feat: add funcitons manger page

web/src/views/ImageSd.vue

@@ -533,10 +533,10 @@ const params = ref({
   cfg_scale: 7,
   face_fix: false,
   hd_fix: false,
-  hd_redraw_rate: 0.7,
+  hd_redraw_rate: 0.5,
   hd_scale: 2,
   hd_scale_alg: scaleAlg[0],
-  hd_steps: 10,
+  hd_steps: 15,
   prompt: "",
   negative_prompt: "nsfw, paintings,low quality,easynegative,ng_deepnegative ,lowres,bad anatomy,bad hands,bad feet",
 })

web/src/views/admin/Functions.vue

@@ -21,7 +21,7 @@
         <el-table-column label="操作" width="150" align="right">
           <template #default="scope">
             <el-button size="small" type="primary" @click="rowEdit(scope.$index, scope.row)">编辑</el-button>
-            <el-popconfirm title="确定要删除当前函数吗?" @confirm="removeRole(scope.row)">
+            <el-popconfirm title="确定要删除当前函数吗?" @confirm="remove(scope.row)">
               <template #reference>
                 <el-button size="small" type="danger">删除</el-button>
               </template>
@@ -33,80 +33,89 @@
 
     <el-dialog
         v-model="showDialog"
-        title="编辑角色"
+        :title="title"
         width="50%"
     >
-      <el-form :model="role" label-width="120px" ref="formRef" label-position="left" :rules="rules">
-        <el-form-item label="角色名称：" prop="name">
+      <el-form :model="item" label-width="120px" ref="formRef" label-position="left" :rules="rules">
+        <el-form-item label="函数名称：" prop="name">
           <el-input
-              v-model="role.name"
+              v-model="item.name"
               autocomplete="off"
           />
         </el-form-item>
 
-        <el-form-item label="角色标志：" prop="key">
+        <el-form-item label="函数标签：" prop="label">
           <el-input
-              v-model="role.key"
+              v-model="item.label"
+              placeholder="函数的中文名称"
               autocomplete="off"
           />
         </el-form-item>
 
-        <el-form-item label="角色图标：" prop="icon">
+        <el-form-item label="功能描述：" prop="description">
           <el-input
-              v-model="role.icon"
+              v-model="item.description"
               autocomplete="off"
           />
         </el-form-item>
 
-        <el-form-item label="打招呼信息：" prop="hello_msg">
-          <el-input
-              v-model="role.hello_msg"
-              autocomplete="off"
-          />
-        </el-form-item>
-
-        <el-form-item label="上下文信息：" prop="context">
+        <el-form-item label="函数参数：" prop="parameters">
           <template #default>
-            <el-table :data="role.context" :border="childBorder" size="small">
-              <el-table-column label="对话角色" width="120">
+            <el-table :data="params" :border="childBorder" size="small">
+              <el-table-column label="参数名称" width="120">
                 <template #default="scope">
                   <el-input
-                      v-model="scope.row.role"
+                      v-model="scope.row.name"
                       autocomplete="off"
                   />
                 </template>
               </el-table-column>
-              <el-table-column label="对话内容">
-                <template #header>
-                  <div class="context-msg-key">
-                    <span>对话内容</span>
-                    <span class="fr">
-                      <el-button type="primary" @click="addContext" size="small">
-                      <el-icon>
-                        <Plus/>
-                      </el-icon>
-                      增加一行
-                    </el-button>
-                    </span>
+              <el-table-column label="参数类型" width="120">
+                <template #default="scope">
+                  <el-select v-model="scope.row.type" placeholder="参数类型">
+                    <el-option v-for="pt in paramsType" :value="pt" :key="pt">{{ pt }}</el-option>
+                  </el-select>
+                </template>
+              </el-table-column>
+              <el-table-column label="参数描述">
+                <template #default="scope">
+                  <el-input
+                      v-model="scope.row.desc"
+                      autocomplete="off"
+                  />
+                </template>
+              </el-table-column>
+
+              <el-table-column label="必填参数" width="80">
+                <template #default="scope">
+                  <div class="param-opt">
+                    <el-checkbox v-model="scope.row.required"/>
                   </div>
                 </template>
+              </el-table-column>
 
+              <el-table-column label="操作" width="80">
                 <template #default="scope">
-                  <div class="context-msg-content">
-                    <el-input
-                        v-model="scope.row.content"
-                        autocomplete="off"
-                    />
-                    <span><el-icon @click="removeContext(scope.$index)"><RemoveFilled/></el-icon></span>
+                  <div class="param-opt">
+                    <el-button type="danger" :icon="Delete" circle @click="removeParam(scope.$index)" size="small"/>
                   </div>
                 </template>
               </el-table-column>
             </el-table>
+
+            <div class="param-line">
+              <el-button type="primary" @click="addParam" size="small">
+                <el-icon>
+                  <Plus/>
+                </el-icon>
+                增加参数
+              </el-button>
+            </div>
           </template>
         </el-form-item>
 
         <el-form-item label="启用状态">
-          <el-switch v-model="role.enable"/>
+          <el-switch v-model="item.enabled"/>
         </el-form-item>
       </el-form>
 
@@ -122,7 +131,7 @@
 
 <script setup>
 
-import {Plus, RemoveFilled} from "@element-plus/icons-vue";
+import {Delete, Plus, RemoveFilled} from "@element-plus/icons-vue";
 import {onMounted, reactive, ref} from "vue";
 import {httpGet, httpPost} from "@/utils/http";
 import {ElMessage} from "element-plus";
@@ -133,74 +142,31 @@ const showDialog = ref(false)
 const parentBorder = ref(true)
 const childBorder = ref(true)
 const tableData = ref([])
-const sortedTableData = ref([])
-const role = ref({context: []})
+const item = ref({parameters: []})
+const params = ref([])
 const formRef = ref(null)
 const editRow = ref({})
 const loading = ref(true)
+const title = ref("新增函数")
 
 const rules = reactive({
-  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: '请输入有效数字'},
-  ],
-  hello_msg: [{required: true, message: '请输入打招呼信息', trigger: 'change',}]
+  name: [{required: true, message: '请输入函数名称', trigger: 'blur',}],
+  label: [{required: true, message: '请输入函数标签', trigger: 'blur',}],
+  description: [{required: true, message: '请输入函数功能描述', trigger: 'blur',}],
 })
+const paramsType = ref(["string", "number"])
 
-// 获取角色列表
-httpGet('/api/admin/role/list').then((res) => {
-  tableData.value = res.data
-  sortedTableData.value = copyObj(tableData.value)
-  loading.value = false
-}).catch(() => {
-  ElMessage.error("获取聊天角色失败");
-})
 
 onMounted(() => {
-  const drawBodyWrapper = document.querySelector('.el-table__body tbody')
-
-  // 初始化拖动排序插件
-  Sortable.create(drawBodyWrapper, {
-    sort: true,
-    animation: 500,
-    onEnd({newIndex, oldIndex, from}) {
-      if (oldIndex === newIndex) {
-        return
-      }
-
-      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)
-      })
-
-      httpPost("/api/admin/role/sort", {ids: ids, sorts: sorts}).catch(e => {
-        ElMessage.error("排序失败：" + e.message)
-      })
-    }
-  })
+  fetch()
 })
 
-const editSort = function (event, row) {
-  event.stopPropagation()
-  editRow.value.id = row.id
-  editRow.value.sort = row.sort
-}
-const updateSort = function (row) {
-  if (row.sort === editRow.value.sort) {
-    editRow.value.id = 0
-    return
-  }
-
-  httpPost('/api/admin/role/sort', {"id": row.id, "sort": row.sort}).then(() => {
-    editRow.value.id = 0
+const fetch = () => {
+  httpGet('/api/admin/function/list').then((res) => {
+    tableData.value = res.data
+    loading.value = false
   }).catch(() => {
-    ElMessage.error("更新失败！")
+    ElMessage.error("获取数据失败");
   })
 }
 
@@ -208,12 +174,12 @@ const updateSort = function (row) {
 const curIndex = ref(0)
 const rowEdit = function (index, row) {
   curIndex.value = index
-  role.value = copyObj(row)
+  item.value = copyObj(row)
   showDialog.value = true
 }
 
 const addRole = function () {
-  role.value = {context: []}
+  item.value = {parameters: []}
   showDialog.value = true
 }
 
@@ -221,14 +187,24 @@ const save = function () {
   formRef.value.validate((valid) => {
     if (valid) {
       showDialog.value = false
-      httpPost('/api/admin/role/save', role.value).then((res) => {
+      const properties = {}
+      const required = []
+      // process params
+      for (let i = 0; i < params.value.length; i++) {
+        properties[params.value[i].name] = {"type": params.value[i].type, "description": params.value[i].desc}
+        if (params.value[i].required) {
+          required.push(params.value[i].name)
+        }
+      }
+      item.value.parameters = {type: "object", "properties": properties, "required": required}
+      httpPost('/api/admin/function/save', item.value).then((res) => {
         ElMessage.success('操作成功')
         // 更新当前数据行
-        if (role.value.id) {
-          tableData.value[curIndex.value] = role.value
-        } else {
-          tableData.value.push(res.data)
-        }
+        // if (item.value.id) {
+        //   tableData.value[curIndex.value] = item.value
+        // } else {
+        //   tableData.value.push(res.data)
+        // }
       }).catch((e) => {
         ElMessage.error('操作失败，' + e.message)
       })
@@ -236,26 +212,24 @@ const save = function () {
   })
 }
 
-const removeRole = function (row) {
+const remove = function (row) {
   httpGet('/api/admin/role/remove?id=' + row.id).then(() => {
     ElMessage.success("删除成功！")
-    tableData.value = removeArrayItem(tableData.value, row, (v1, v2) => {
-      return v1.id === v2.id
-    })
+    fetch()
   }).catch(() => {
     ElMessage.error("删除失败！")
   })
 }
 
-const addContext = function () {
-  if (!role.value.context) {
-    role.value.context = []
+const addParam = function () {
+  if (!params.value) {
+    item.value = []
   }
-  role.value.context.push({role: '', content: ''})
+  params.value.push({name: "", type: "", desc: "", required: false})
 }
 
-const removeContext = function (index) {
-  role.value.context.splice(index, 1);
+const removeParam = function (index) {
+  params.value.splice(index, 1);
 }
 
 </script>
@@ -272,18 +246,17 @@ const removeContext = function (index) {
     }
   }
 
-  .context-msg-key {
-    .fr {
-      float right
+  .param-line {
+    padding 5px 0
 
-      .el-icon {
-        margin-right 5px
-      }
+    .el-icon {
+      margin-right 5px;
     }
   }
 
-  .context-msg-content {
+  .param-opt {
     display flex
+    justify-content center
 
     .el-icon {
       font-size: 20px;