stylus 语法换成 saas 语法

web/src/views/admin/Apps.vue

@@ -39,8 +39,14 @@
         <el-table-column label="打招呼信息" prop="hello_msg" />
         <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">
+            <el-button size="small" type="primary" @click="rowEdit(scope.$index, scope.row)"
+              >编辑</el-button
+            >
+            <el-popconfirm
+              title="确定要删除当前应用吗?"
+              @confirm="removeRole(scope.row)"
+              :width="200"
+            >
               <template #reference>
                 <el-button size="small" type="danger">删除</el-button>
               </template>
@@ -57,7 +63,12 @@
         </el-form-item>
         <el-form-item label="应用分类：" prop="tid">
           <el-select v-model="role.tid" filterable placeholder="请选择分类" clearable>
-            <el-option v-for="item in appTypes" :key="item.id" :label="item.name" :value="item.id" />
+            <el-option
+              v-for="item in appTypes"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
           </el-select>
         </el-form-item>
 
@@ -68,7 +79,9 @@
         <el-form-item label="应用图标：" prop="icon">
           <el-input v-model="role.icon">
             <template #append>
-              <el-upload :auto-upload="true" :show-file-list="false" :http-request="uploadImg"> 上传 </el-upload>
+              <el-upload :auto-upload="true" :show-file-list="false" :http-request="uploadImg">
+                上传
+              </el-upload>
             </template>
           </el-input>
         </el-form-item>
@@ -89,7 +102,12 @@
               <el-table-column label="对话应用" width="120">
                 <template #default="scope">
                   <el-select v-model="scope.row.role" placeholder="Role">
-                    <el-option v-for="value in messageRoles" :key="value" :label="value" :value="value" />
+                    <el-option
+                      v-for="value in messageRoles"
+                      :key="value"
+                      :label="value"
+                      :value="value"
+                    />
                   </el-select>
                 </template>
               </el-table-column>
@@ -110,7 +128,13 @@
 
                 <template #default="scope">
                   <div class="context-msg-content">
-                    <el-input type="textarea" :rows="3" v-model="scope.row.content" autocomplete="off" v-loading="isGenerating" />
+                    <el-input
+                      type="textarea"
+                      :rows="3"
+                      v-model="scope.row.content"
+                      autocomplete="off"
+                      v-loading="isGenerating"
+                    />
                     <span class="remove-item">
                       <el-tooltip effect="dark" content="删除当前行" placement="right">
                         <el-button circle type="danger" size="small">
@@ -133,7 +157,13 @@
                         />
                         <el-row class="text-line">
                           <el-text type="info" size="small">使用 AI 生成 System 预设指令</el-text>
-                          <el-button class="generate-btn" size="small" @click="generatePrompt(scope.row)" color="#5865f2" :disabled="isGenerating">
+                          <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>
@@ -163,64 +193,64 @@
 </template>
 
 <script setup>
-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";
+import { showMessageError } from '@/utils/dialog'
+import { httpGet, httpPost } from '@/utils/http'
+import { copyObj, removeArrayItem } from '@/utils/libs'
+import { Delete, Plus } from '@element-plus/icons-vue'
+import Compressor from 'compressorjs'
+import { ElMessage } from 'element-plus'
+import { Sortable } from 'sortablejs'
+import { onMounted, reactive, ref } from 'vue'
 
-const showDialog = ref(false);
-const parentBorder = ref(true);
-const childBorder = ref(true);
-const tableData = ref([]);
-const sortedTableData = ref([]);
-const role = ref({ context: [] });
-const formRef = ref(null);
-const optTitle = ref("");
-const loading = ref(true);
+const showDialog = ref(false)
+const parentBorder = ref(true)
+const childBorder = ref(true)
+const tableData = ref([])
+const sortedTableData = ref([])
+const role = ref({ context: [] })
+const formRef = ref(null)
+const optTitle = ref('')
+const loading = ref(true)
 
 const rules = reactive({
-  name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
-  key: [{ required: true, message: "请输入应用标识", trigger: "blur" }],
-  icon: [{ required: true, message: "请输入应用图标", trigger: "blur" }],
+  name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+  key: [{ required: true, message: '请输入应用标识', trigger: 'blur' }],
+  icon: [{ required: true, message: '请输入应用图标', trigger: 'blur' }],
   sort: [
-    { required: true, message: "请输入排序数字", trigger: "blur" },
-    { type: "number", message: "请输入有效数字" },
+    { required: true, message: '请输入排序数字', trigger: 'blur' },
+    { type: 'number', message: '请输入有效数字' },
   ],
-  hello_msg: [{ required: true, message: "请输入打招呼信息", trigger: "change" }],
-});
+  hello_msg: [{ required: true, message: '请输入打招呼信息', trigger: 'change' }],
+})
 
-const appTypes = ref([]);
-const models = ref([]);
-const messageRoles = ref(["system", "user", "assistant"]);
+const appTypes = ref([])
+const models = ref([])
+const messageRoles = ref(['system', 'user', 'assistant'])
 onMounted(() => {
-  fetchData();
+  fetchData()
 
   // get chat models
-  httpGet("/api/admin/model/list?enable=1")
+  httpGet('/api/admin/model/list?enable=1')
     .then((res) => {
-      models.value = res.data;
+      models.value = res.data
     })
     .catch(() => {
-      ElMessage.error("获取AI模型数据失败");
-    });
+      ElMessage.error('获取AI模型数据失败')
+    })
 
   // get app type
-  httpGet("/api/admin/app/type/list?enable=1")
+  httpGet('/api/admin/app/type/list?enable=1')
     .then((res) => {
-      appTypes.value = res.data;
+      appTypes.value = res.data
     })
     .catch(() => {
-      ElMessage.error("获取应用分类数据失败");
-    });
-});
+      ElMessage.error('获取应用分类数据失败')
+    })
+})
 
 const fetchData = () => {
   // 获取应用列表
-  httpGet("/api/admin/role/list")
+  httpGet('/api/admin/role/list')
     .then((res) => {
       // 初始化数据
       // const arr = res.data;
@@ -229,108 +259,110 @@ const fetchData = () => {
       //     arr[i].model_id = ''
       //   }
       // }
-      tableData.value = res.data;
-      sortedTableData.value = copyObj(tableData.value);
-      loading.value = false;
+      tableData.value = res.data
+      sortedTableData.value = copyObj(tableData.value)
+      loading.value = false
     })
     .catch(() => {
-      ElMessage.error("获取聊天应用失败");
-    });
+      ElMessage.error('获取聊天应用失败')
+    })
 
-  const drawBodyWrapper = document.querySelector(".el-table__body tbody");
+  const drawBodyWrapper = document.querySelector('.el-table__body tbody')
   // 初始化拖动排序插件
   Sortable.create(drawBodyWrapper, {
     sort: true,
     animation: 500,
     onEnd({ newIndex, oldIndex, from }) {
       if (oldIndex === newIndex) {
-        return;
+        return
       }
 
-      const sortedData = Array.from(from.children).map((row) => row.querySelector(".sort").getAttribute("data-id"));
-      const ids = [];
-      const sorts = [];
+      const sortedData = Array.from(from.children).map((row) =>
+        row.querySelector('.sort').getAttribute('data-id')
+      )
+      const ids = []
+      const sorts = []
       sortedData.forEach((id, index) => {
-        ids.push(parseInt(id));
-        sorts.push(index + 1);
-        tableData.value[index].sort_num = index + 1;
-      });
+        ids.push(parseInt(id))
+        sorts.push(index + 1)
+        tableData.value[index].sort_num = index + 1
+      })
 
-      httpPost("/api/admin/role/sort", { ids: ids, sorts: sorts }).catch((e) => {
-        ElMessage.error("排序失败：" + e.message);
-      });
+      httpPost('/api/admin/role/sort', { ids: ids, sorts: sorts }).catch((e) => {
+        ElMessage.error('排序失败：' + e.message)
+      })
     },
-  });
-};
+  })
+}
 
 const roleSet = (filed, row) => {
-  httpPost("/api/admin/role/set", {
+  httpPost('/api/admin/role/set', {
     id: row.id,
     filed: filed,
     value: row[filed],
   })
     .then(() => {
-      ElMessage.success("操作成功！");
+      ElMessage.success('操作成功！')
     })
     .catch((e) => {
-      ElMessage.error("操作失败：" + e.message);
-    });
-};
+      ElMessage.error('操作失败：' + e.message)
+    })
+}
 
 // 编辑
-const curIndex = ref(0);
+const curIndex = ref(0)
 const rowEdit = function (index, row) {
-  optTitle.value = "修改应用";
-  curIndex.value = index;
-  role.value = copyObj(row);
-  showDialog.value = true;
-};
+  optTitle.value = '修改应用'
+  curIndex.value = index
+  role.value = copyObj(row)
+  showDialog.value = true
+}
 
 const addRole = function () {
-  optTitle.value = "添加新应用";
-  role.value = { context: [] };
-  showDialog.value = true;
-};
+  optTitle.value = '添加新应用'
+  role.value = { context: [] }
+  showDialog.value = true
+}
 
 const save = function () {
   formRef.value.validate((valid) => {
     if (valid) {
-      showDialog.value = false;
-      httpPost("/api/admin/role/save", role.value)
+      showDialog.value = false
+      httpPost('/api/admin/role/save', role.value)
         .then(() => {
-          ElMessage.success("操作成功");
-          fetchData();
+          ElMessage.success('操作成功')
+          fetchData()
         })
         .catch((e) => {
-          ElMessage.error("操作失败，" + e.message);
-        });
+          ElMessage.error('操作失败，' + e.message)
+        })
     }
-  });
-};
+  })
+}
 
 const removeRole = function (row) {
-  httpGet("/api/admin/role/remove?id=" + row.id)
+  httpGet('/api/admin/role/remove?id=' + row.id)
     .then(() => {
-      ElMessage.success("删除成功！");
+      ElMessage.success('删除成功！')
       tableData.value = removeArrayItem(tableData.value, row, (v1, v2) => {
-        return v1.id === v2.id;
-      });
+        return v1.id === v2.id
+      })
     })
     .catch(() => {
-      ElMessage.error("删除失败！");
-    });
-};
+      ElMessage.error('删除失败！')
+    })
+}
 
 const addContext = function () {
   if (!role.value.context) {
-    role.value.context = [];
+    role.value.context = []
   }
-  role.value.context.push({ role: "", content: "" });
-};
+  role.value.context.push({ role: '', content: '' })
+}
 
 const removeContext = function (index) {
-  role.value.context.splice(index, 1);
-};
+  role.value.context.splice(index, 1)
+}
 
 // 图片上传
 const uploadImg = (file) => {
@@ -338,121 +370,120 @@ const uploadImg = (file) => {
   new Compressor(file.file, {
     quality: 0.6,
     success(result) {
-      const formData = new FormData();
-      formData.append("file", result, result.name);
+      const formData = new FormData()
+      formData.append('file', result, result.name)
       // 执行上传操作
-      httpPost("/api/admin/upload", formData)
+      httpPost('/api/admin/upload', formData)
         .then((res) => {
-          role.value.icon = res.data.url;
-          ElMessage.success("上传成功");
+          role.value.icon = res.data.url
+          ElMessage.success('上传成功')
         })
         .catch((e) => {
-          ElMessage.error("上传失败:" + e.message);
-        });
+          ElMessage.error('上传失败:' + e.message)
+        })
     },
     error(e) {
-      ElMessage.error("上传失败:" + e.message);
+      ElMessage.error('上传失败:' + e.message)
     },
-  });
-};
+  })
+}
 
-const isGenerating = ref(false);
-const metaPrompt = ref("");
+const isGenerating = ref(false)
+const metaPrompt = ref('')
 const generatePrompt = (row) => {
-  if (metaPrompt.value === "") {
-    return showMessageError("请输入元提示词");
+  if (metaPrompt.value === '') {
+    return showMessageError('请输入元提示词')
   }
-  isGenerating.value = true;
-  httpPost("/api/prompt/meta", { prompt: metaPrompt.value })
+  isGenerating.value = true
+  httpPost('/api/prompt/meta', { prompt: metaPrompt.value })
     .then((res) => {
-      row.content = res.data;
-      isGenerating.value = false;
+      row.content = res.data
+      isGenerating.value = false
     })
     .catch((e) => {
-      showMessageError("生成失败：" + e.message);
-      isGenerating.value = false;
-    });
-};
+      showMessageError('生成失败：' + e.message)
+      isGenerating.value = false
+    })
+}
 </script>
 
-<style lang="stylus" scoped>
+<style lang="scss" scoped>
 .role-list {
   .handle-box {
-    margin-bottom 20px
+    margin-bottom: 20px;
 
     .handle-input {
-      max-width 150px;
-      margin-right 10px;
+      max-width: 150px;
+      margin-right: 10px;
     }
   }
 
   .opt-box {
     padding-bottom: 10px;
-    display flex;
-    justify-content flex-end
+    display: flex;
+    justify-content: flex-end;
 
     .el-icon {
-      margin-right 5px;
+      margin-right: 5px;
     }
   }
 
   .context-msg-key {
     .fr {
-      float right
+      float: right;
 
       .el-icon {
-        margin-right 5px
+        margin-right: 5px;
       }
     }
   }
 
   .context-msg-content {
-    display flex
+    display: flex;
 
     .remove-item {
-      display flex
-      padding 10px
-      flex-flow column
-      align-items center
-      justify-content  center
+      display: flex;
+      padding: 10px;
+      flex-flow: column;
+      align-items: center;
+      justify-content: center;
 
       .icon-btn {
-        margin 10px 0 0 0
+        margin: 10px 0 0 0;
       }
     }
-
   }
 
   .el-input--small {
-    width 30px;
+    width: 30px;
 
     .el-input__inner {
-      text-align center
+      text-align: center;
     }
   }
 
   .sort {
-    cursor move
+    cursor: move;
     .iconfont {
-      position relative
-      top 1px
+      position: relative;
+      top: 1px;
     }
   }
 
   .pagination {
-    padding 20px 0
-    display flex
-    justify-content right
+    padding: 20px 0;
+    display: flex;
+    justify-content: right;
   }
 }
 
 .text-line {
-  display flex
-  justify-content space-between
-  padding-top 10px
+  display: flex;
+  justify-content: space-between;
+  padding-top: 10px;
   .iconfont {
-    margin-right 5px
-    font-size 14px
+    margin-right: 5px;
+    font-size: 14px;
   }
 }
 </style>