From 88b956cf983cc2d12bbf6e188b74a5647258a7a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BB=96=E5=BD=A6=E6=A3=8B?= <liaoyq@pvc123.com>
Date: Fri, 8 Mar 2024 09:12:39 +0800
Subject: [PATCH] =?UTF-8?q?refactor(ui):=20=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/SearchTable/FormSection.vue    | 28 ++++++-------------
 gpt-vue/projects/vue-admin/src/router/menu.ts | 16 +++++++++--
 .../views/Functions/FunctionsContainer.vue    |  7 ++++-
 .../src/views/Functions/FunctionsForm.vue     | 19 ++++++-------
 .../src/views/System/SystemBaseConfig.vue     | 22 +++++++++------
 .../src/views/System/SystemChatConfig.vue     |  2 +-
 .../src/views/System/SystemContainer.vue      | 12 ++++++--
 .../src/views/System/SystemNoticeConfig.vue   |  2 +-
 .../src/views/System/SystemUploader.vue       | 19 +++++++------
 9 files changed, 72 insertions(+), 55 deletions(-)

diff --git a/gpt-vue/projects/vue-admin/src/components/SearchTable/FormSection.vue b/gpt-vue/projects/vue-admin/src/components/SearchTable/FormSection.vue
index 1a5f717a..178b6c8c 100644
--- a/gpt-vue/projects/vue-admin/src/components/SearchTable/FormSection.vue
+++ b/gpt-vue/projects/vue-admin/src/components/SearchTable/FormSection.vue
@@ -33,9 +33,9 @@ const formData = computed({
 });
 
 const searchColumns = computed(() => {
-  return props.columns?.filter(
-    (item) => item.dataIndex && item.search
-  ) as (SearchColumns & { dataIndex: string })[];
+  return props.columns?.filter((item) => item.dataIndex && item.search) as (SearchColumns & {
+    dataIndex: string;
+  })[];
 });
 
 const optionsEvent = {
@@ -60,7 +60,7 @@ const optionsEvent = {
     @submit="optionsEvent.onSearch"
   >
     <AGrid
-      :cols="{ md: 1, lg: 2, xl: 3, xxl: 5 }"
+      :cols="{ md: 1, lg: 3, xl: 4, xxl: 5 }"
       :row-gap="12"
       :col-gap="12"
       :collapsed="collapsed"
@@ -70,14 +70,11 @@ const optionsEvent = {
         :key="item.dataIndex"
         style="transition: all 0.3s ease-in-out"
       >
-        <AFormItem :field="item.dataIndex" :label="(item.title as string)">
+        <AFormItem :field="item.dataIndex" :label="item.title as string">
           <slot :name="item.search.slotsName">
             <component
               v-model="formData[item.dataIndex]"
-              :is="
-                ValueType[item.search.valueType ?? 'input'] ??
-                item.search.render
-              "
+              :is="ValueType[item.search.valueType ?? 'input'] ?? item.search.render"
               v-bind="useComponentConfig(size, item)"
             />
           </slot>
@@ -86,20 +83,11 @@ const optionsEvent = {
       <AGridItem suffix>
         <ASpace class="flex-end">
           <slot name="search-options" :option="optionsEvent">
-            <AButton
-              type="primary"
-              html-type="submit"
-              :size="size"
-              :loading="submitting"
-            >
+            <AButton type="primary" html-type="submit" :size="size" :loading="submitting">
               <icon-search />
               <span>查询</span>
             </AButton>
-            <AButton
-              :size="size"
-              @click="optionsEvent.onReset"
-              :loading="submitting"
-            >
+            <AButton :size="size" @click="optionsEvent.onReset" :loading="submitting">
               <icon-refresh />
               <span>重置</span>
             </AButton>
diff --git a/gpt-vue/projects/vue-admin/src/router/menu.ts b/gpt-vue/projects/vue-admin/src/router/menu.ts
index 81e7f5b8..9b047a6a 100644
--- a/gpt-vue/projects/vue-admin/src/router/menu.ts
+++ b/gpt-vue/projects/vue-admin/src/router/menu.ts
@@ -3,6 +3,9 @@ import {
   IconDashboard,
   IconOrderedList,
   IconCalendar,
+  IconHeartFill,
+  IconCodeSquare,
+  IconMessage,
   IconSettings,
   IconUserGroup,
   IconLock,
@@ -80,16 +83,25 @@ const menu = [
     name: "Reward",
     meta: {
       title: "众筹管理",
-      icon: IconCalendar,
+      icon: IconHeartFill,
     },
     component: () => import("@/views/Reward/RewardContainer.vue"),
   },
+  {
+    path: "/functions",
+    name: "Functions",
+    meta: {
+      title: "函数管理",
+      icon: IconCodeSquare,
+    },
+    component: () => import("@/views/Functions/FunctionsContainer.vue"),
+  },
   {
     path: "/chats",
     name: "Chats",
     meta: {
       title: "对话管理",
-      icon: IconCalendar,
+      icon: IconMessage,
     },
     component: () => import("@/views/Chats/ChatsContainer.vue"),
   },
diff --git a/gpt-vue/projects/vue-admin/src/views/Functions/FunctionsContainer.vue b/gpt-vue/projects/vue-admin/src/views/Functions/FunctionsContainer.vue
index e68a958e..94e12a54 100644
--- a/gpt-vue/projects/vue-admin/src/views/Functions/FunctionsContainer.vue
+++ b/gpt-vue/projects/vue-admin/src/views/Functions/FunctionsContainer.vue
@@ -55,8 +55,13 @@ const handleRemove = async (id, reload) => {
 };
 </script>
 <template>
-  <a-button type="primary" @click="openFormModal">新增</a-button>
   <SimpleTable :request="getList" :columns="columns" :pagination="false">
+    <template #header="{ reload }">
+      <a-button @click="openFormModal(reload, {})">
+        <template #icon> <icon-plus /> </template>
+        新增
+      </a-button>
+    </template>
     <template #switch="{ record, column }">
       <ConfirmSwitch
         v-model="record[column.dataIndex]"
diff --git a/gpt-vue/projects/vue-admin/src/views/Functions/FunctionsForm.vue b/gpt-vue/projects/vue-admin/src/views/Functions/FunctionsForm.vue
index 01b5d141..9315e046 100644
--- a/gpt-vue/projects/vue-admin/src/views/Functions/FunctionsForm.vue
+++ b/gpt-vue/projects/vue-admin/src/views/Functions/FunctionsForm.vue
@@ -28,7 +28,7 @@ const rules = {
 };
 
 const generateToken = async () => {
-  const { data } = await token();
+  const { data } = await token({});
   Message.success("生成 Token 成功");
   formData.token = data;
 };
@@ -64,15 +64,14 @@ defineExpose({
         <a-input v-model="formData.action" placeholder="该函数实现的API地址，可以是第三方服务API" />
       </a-form-item>
       <a-form-item field="token" label="API Token">
-        <a-input v-model="formData.token" placeholder="API授权Token">
-          <template #append>
-            <a-tooltip
-              content="只有本地服务才可以使用自动生成Token第三方服务请填写第三方服务API Token"
-            >
-              <a-button type="text" @click="generateToken">生成Token</a-button>
-            </a-tooltip>
-          </template>
-        </a-input>
+        <a-input-group style="width: 100%">
+          <a-input v-model="formData.token" placeholder="API授权Token" />
+          <a-tooltip
+            content="只有本地服务才可以使用自动生成Token第三方服务请填写第三方服务API Token"
+          >
+            <a-button type="primary" @click="generateToken">生成Token</a-button>
+          </a-tooltip>
+        </a-input-group>
       </a-form-item>
       <a-form-item field="enabled" label="启用状态">
         <a-switch v-model="formData.enabled" />
diff --git a/gpt-vue/projects/vue-admin/src/views/System/SystemBaseConfig.vue b/gpt-vue/projects/vue-admin/src/views/System/SystemBaseConfig.vue
index 55335541..f05f5739 100644
--- a/gpt-vue/projects/vue-admin/src/views/System/SystemBaseConfig.vue
+++ b/gpt-vue/projects/vue-admin/src/views/System/SystemBaseConfig.vue
@@ -38,7 +38,7 @@ onMounted(async () => {
 });
 </script>
 <template>
-  <a-form ref="formRef" :model="system" :rules="rules" auto-laba-width>
+  <a-form ref="formRef" :model="system" :rules="rules" auto-label-width>
     <a-form-item label="网站标题" field="title">
       <a-input v-model="system['title']" />
     </a-form-item>
@@ -73,10 +73,12 @@ onMounted(async () => {
       />
     </a-form-item>
     <a-form-item label="开放注册" field="enabled_register">
-      <a-switch v-model="system['enabled_register']" />
-      <a-tooltip content="关闭注册之后只能通过管理后台添加用户" position="right">
-        <icon-info-circle-fill size="18" />
-      </a-tooltip>
+      <a-space>
+        <a-switch v-model="system['enabled_register']" />
+        <a-tooltip content="关闭注册之后只能通过管理后台添加用户" position="right">
+          <icon-info-circle-fill size="18" />
+        </a-tooltip>
+      </a-space>
     </a-form-item>
     <a-form-item label="注册方式" field="register_ways">
       <a-checkbox-group v-model="system['register_ways']">
@@ -85,10 +87,12 @@ onMounted(async () => {
       </a-checkbox-group>
     </a-form-item>
     <a-form-item label="启用众筹功能" field="enabled_reward">
-      <a-switch v-model="system['enabled_reward']" />
-      <a-tooltip content="如果关闭次功能将不在用户菜单显示众筹二维码" position="right">
-        <icon-info-circle-fill size="18" />
-      </a-tooltip>
+      <a-space>
+        <a-switch v-model="system['enabled_reward']" />
+        <a-tooltip content="如果关闭次功能将不在用户菜单显示众筹二维码" position="right">
+          <icon-info-circle-fill size="18" />
+        </a-tooltip>
+      </a-space>
     </a-form-item>
     <template v-if="system['enabled_reward']">
       <a-form-item label="单次对话价格" field="chat_call_price">
diff --git a/gpt-vue/projects/vue-admin/src/views/System/SystemChatConfig.vue b/gpt-vue/projects/vue-admin/src/views/System/SystemChatConfig.vue
index fb5aa9f0..2f50f289 100644
--- a/gpt-vue/projects/vue-admin/src/views/System/SystemChatConfig.vue
+++ b/gpt-vue/projects/vue-admin/src/views/System/SystemChatConfig.vue
@@ -46,7 +46,7 @@ const reload = async () => {
 onMounted(reload);
 </script>
 <template>
-  <a-form ref="formRef" :model="chat" :rules="rules" auto-laba-width>
+  <a-form ref="formRef" :model="chat" :rules="rules" auto-label-width>
     <a-form-item label="开启聊天上下文">
       <a-switch v-model="chat['enable_context']" />
     </a-form-item>
diff --git a/gpt-vue/projects/vue-admin/src/views/System/SystemContainer.vue b/gpt-vue/projects/vue-admin/src/views/System/SystemContainer.vue
index e3f51e19..05f18b69 100644
--- a/gpt-vue/projects/vue-admin/src/views/System/SystemContainer.vue
+++ b/gpt-vue/projects/vue-admin/src/views/System/SystemContainer.vue
@@ -12,9 +12,17 @@ const tabsList = [
 const activeKey = ref(tabsList[0].key);
 </script>
 <template>
-  <a-tabs v-model:active-key="activeKey" lazy-load>
+  <a-tabs v-model:active-key="activeKey" lazy-load justify>
     <a-tab-pane v-for="item in tabsList" :key="item.key" :title="item.title">
-      <component :is="item.components" />
+      <div class="system-config-wrapper">
+        <component :is="item.components" />
+      </div>
     </a-tab-pane>
   </a-tabs>
 </template>
+<style scoped>
+.system-config-wrapper {
+  height: 100%;
+  overflow-y: auto;
+}
+</style>
diff --git a/gpt-vue/projects/vue-admin/src/views/System/SystemNoticeConfig.vue b/gpt-vue/projects/vue-admin/src/views/System/SystemNoticeConfig.vue
index 5c4c8b6c..54445da5 100644
--- a/gpt-vue/projects/vue-admin/src/views/System/SystemNoticeConfig.vue
+++ b/gpt-vue/projects/vue-admin/src/views/System/SystemNoticeConfig.vue
@@ -56,7 +56,7 @@ const onUploadImg = (files, callback) => {
 onMounted(reload);
 </script>
 <template>
-  <a-form ref="formRef" :model="formData" auto-laba-width>
+  <a-form ref="formRef" :model="formData" auto-label-width>
     <md-editor v-model="formData.content" @on-upload-img="onUploadImg" />
     <a-form-item>
       <a-button type="primary" :loading="submitting" @click="handleSave">提交</a-button>
diff --git a/gpt-vue/projects/vue-admin/src/views/System/SystemUploader.vue b/gpt-vue/projects/vue-admin/src/views/System/SystemUploader.vue
index f98d0ed2..742d2db8 100644
--- a/gpt-vue/projects/vue-admin/src/views/System/SystemUploader.vue
+++ b/gpt-vue/projects/vue-admin/src/views/System/SystemUploader.vue
@@ -23,14 +23,15 @@ const handleChange = (_, file: FileItem) => {
 </script>
 <template>
   <a-space>
-    <a-input :model-value="modelValue" :placeholder="placeholder" readonly>
-      <template #append>
-        <a-upload v-bind="uploadProps" @change="handleChange">
-          <template #upload-button>
-            <icon-upload />
-          </template>
-        </a-upload>
-      </template>
-    </a-input>
+    <a-input-group>
+      <a-input :model-value="modelValue" :placeholder="placeholder" readonly />
+      <a-upload v-bind="uploadProps" @change="handleChange">
+        <template #upload-button>
+          <a-button type="primary">
+            <icon-cloud />
+          </a-button>
+        </template>
+      </a-upload>
+    </a-input-group>
   </a-space>
 </template>