meta prompt function is ready

web/src/views/Dalle.vue

@@ -60,6 +60,8 @@
                     type="textarea"
                     ref="promptRef"
                     placeholder="请在此输入绘画提示词，您也可以点击下面的提示词助手生成绘画提示词"
+                    v-loading="isGenerating"
+                    style="--el-mask-color:rgba(100, 100, 100, 0.8)"
                 />
               </div>
 

web/src/views/ImageMj.vue

@@ -185,6 +185,8 @@
                     <div class="param-line pt" style="position: relative">
                       <el-input v-model="params.prompt" :autosize="{ minRows: 4, maxRows: 6 }" type="textarea"
                                 ref="promptRef"
+                                v-loading="isGenerating"
+                                style="--el-mask-color:rgba(100, 100, 100, 0.8)"
                                 placeholder="请在此输入绘画提示词，您也可以点击下面的提示词助手生成绘画提示词"/>
                     </div>
 
@@ -271,6 +273,8 @@
                     <div class="param-line pt">
                       <el-input v-model="params.prompt" :autosize="{ minRows: 4, maxRows: 6 }" type="textarea"
                                 ref="promptRef"
+                                v-loading="isGenerating"
+                                style="--el-mask-color:rgba(100, 100, 100, 0.8)"
                                 placeholder="请在此输入绘画提示词，系统会自动翻译中文提示词，高手请直接输入英文提示词"/>
                     </div>
 

web/src/views/ImageSd.vue

@@ -251,6 +251,8 @@
                     type="textarea"
                     ref="promptRef"
                     placeholder="请在此输入绘画提示词，您也可以点击下面的提示词助手生成绘画提示词"
+                    v-loading="isGenerating"
+                    style="--el-mask-color:rgba(100, 100, 100, 0.8)"
                 />
               </div>
 

web/src/views/admin/Apps.vue

@@ -37,7 +37,7 @@
           </template>
         </el-table-column>
         <el-table-column label="打招呼信息" prop="hello_msg"/>
-        <el-table-column label="操作" width="150" align="right">
+        <el-table-column label="操作" width="150">
           <template #default="scope">
             <el-button size="small" type="primary" @click="rowEdit(scope.$index, scope.row)">编辑</el-button>
             <el-popconfirm title="确定要删除当前应用吗?" @confirm="removeRole(scope.row)" :width="200">
@@ -128,10 +128,14 @@
             <el-table :data="role.context" :border="childBorder" size="small">
               <el-table-column label="对话应用" width="120">
                 <template #default="scope">
-                  <el-input
-                      v-model="scope.row.role"
-                      autocomplete="off"
-                  />
+                  <el-select v-model="scope.row.role" placeholder="Role">
+                    <el-option
+                        v-for="value in messageRoles"
+                        :key="value"
+                        :label="value"
+                        :value="value"
+                    />
+                  </el-select>
                 </template>
               </el-table-column>
               <el-table-column label="对话内容">
@@ -153,11 +157,40 @@
                   <div class="context-msg-content">
                     <el-input
                         type="textarea"
-                        :rows="2"
+                        :rows="3"
                         v-model="scope.row.content"
                         autocomplete="off"
+                        v-loading="isGenerating"
                     />
-                    <span><el-icon @click="removeContext(scope.$index)"><RemoveFilled/></el-icon></span>
+                    <span class="remove-item">
+                      <el-tooltip effect="dark" content="删除当前行" placement="right">
+                        <el-button circle type="danger" size="small">
+                          <el-icon @click="removeContext(scope.$index)"><Delete /></el-icon>
+                        </el-button>
+                      </el-tooltip>
+
+                      <el-popover placement="right" :width="400" trigger="click" :visible="popoverVisible">
+                        <template #reference>
+                          <el-button type="primary" circle size="small" class="icon-btn" @click="popoverVisible = true">
+                            <i class="iconfont icon-linggan"></i>
+                          </el-button>
+                        </template>
+                        <el-input
+                            type="textarea"
+                            :rows="3"
+                            v-model="metaPrompt"
+                            autocomplete="off"
+                            placeholder="请您输入要 AI实现的目标，任务或者需要AI扮演的角色？"
+                        />
+                        <el-row class="text-line">
+                           <el-text class="mx-1" type="info" size="small">使用 AI 生成 System 预设指令</el-text>
+                          <el-button class="generate-btn" size="small" @click="generatePrompt(scope.row)" color="#5865f2" :disabled="isGenerating">
+                            <i class="iconfont icon-chuangzuo"></i>
+                            <span>立即生成</span>
+                          </el-button>
+                        </el-row>
+                      </el-popover>
+                    </span>
                   </div>
                 </template>
               </el-table-column>
@@ -182,13 +215,14 @@
 
 <script setup>
 
-import {Plus, RemoveFilled} from "@element-plus/icons-vue";
+import {Delete, Plus} from "@element-plus/icons-vue";
 import {onMounted, reactive, ref} from "vue";
 import {httpGet, httpPost} from "@/utils/http";
 import {ElMessage} from "element-plus";
 import {copyObj, removeArrayItem} from "@/utils/libs";
 import {Sortable} from "sortablejs"
 import Compressor from "compressorjs";
+import {showMessageError} from "@/utils/dialog";
 
 const showDialog = ref(false)
 const parentBorder = ref(true)
@@ -213,6 +247,7 @@ const rules = reactive({
 
 const appTypes = ref([])
 const models = ref([])
+const messageRoles = ref(["system", "user", "assistant"])
 onMounted(() => {
   fetchData()
 
@@ -354,7 +389,25 @@ const uploadImg = (file) => {
       ElMessage.error('上传失败:' + e.message)
     },
   });
-};
+}
+
+const isGenerating = ref(false)
+const popoverVisible = ref(false)
+const metaPrompt = ref("")
+const generatePrompt = (row) => {
+  if (metaPrompt.value === "") {
+    return showMessageError("请输入元提示词")
+  }
+  popoverVisible.value = false
+  isGenerating.value = true
+  httpPost("/api/prompt/meta", {prompt: metaPrompt.value}).then(res => {
+    row.content = res.data
+    isGenerating.value = false
+  }).catch(e => {
+    showMessageError("生成失败："+e.message)
+    isGenerating.value = false
+  })
+}
 </script>
 
 <style lang="stylus" scoped>
@@ -391,12 +444,18 @@ const uploadImg = (file) => {
   .context-msg-content {
     display flex
 
-    .el-icon {
-      font-size: 20px;
-      margin-top 5px;
-      margin-left 5px;
-      cursor pointer
+    .remove-item {
+      display flex
+      padding 10px
+      flex-flow column
+      align-items center
+      justify-content  center
+
+      .icon-btn {
+        margin 10px 0 0 0
+      }
     }
+
   }
 
   .el-input--small {
@@ -421,4 +480,14 @@ const uploadImg = (file) => {
     justify-content right
   }
 }
+
+.text-line {
+  display flex
+  justify-content space-between
+  padding-top 10px
+  .iconfont {
+    margin-right 5px
+    font-size 14px
+  }
+}
 </style>