系统设置页面功能完成

web/src/views/admin/SysConfig.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="system-config">
+  <div class="system-config" v-loading="loading">
     <el-form :model="form" label-width="120px">
       <el-form-item label="应用标题">
         <el-input v-model="form['title']"/>
@@ -8,7 +8,7 @@
         <el-input v-model="form['console_title']"/>
       </el-form-item>
       <el-form-item label="代理地址">
-        <el-input v-model="form['console_title']" placeholder="多个地址之间用逗号隔开"/>
+        <el-input v-model="form['proxy_url']" placeholder="多个地址之间用逗号隔开"/>
       </el-form-item>
 
       <el-divider content-position="center">聊天设置</el-divider>
@@ -16,14 +16,14 @@
         <el-col :span="12">
           <div class="grid-content">
             <el-form-item label="GPT模型">
-              <el-input v-model="form['console_title']" placeholder="目前只支持 GPT-3 和 GPT-3.5"/>
+              <el-input v-model="form['model']" placeholder="gpt-3/gpt-3.5-turbo/gpt-4"/>
             </el-form-item>
           </div>
         </el-col>
         <el-col :span="12">
           <div class="grid-content">
             <el-form-item label="模型温度">
-              <el-input v-model="form['console_title']" placeholder="0-1之间的小数"/>
+              <el-input v-model="form['temperature']" placeholder="0-1之间的小数"/>
             </el-form-item>
           </div>
         </el-col>
@@ -41,7 +41,7 @@
         <el-col :span="12">
           <div class="grid-content">
             <el-form-item label="上下文超时">
-              <el-input v-model="form['chat_context_expire_time']" placeholder="默认60min"/>
+              <el-input v-model="form['chat_context_expire_time']" placeholder="单位：秒"/>
             </el-form-item>
           </div>
         </el-col>
@@ -52,36 +52,44 @@
       </el-form-item>
 
       <el-form-item>
-        <el-button type="primary" @click="save">保存</el-button>
+        <el-button type="primary" @click="saveConfig">保存</el-button>
       </el-form-item>
     </el-form>
 
     <el-divider content-position="center">API KEY 管理</el-divider>
     <el-row class="api-key-box">
-      <el-button type="primary" @click="save">
-        <el-icon class="el-icon--right"><Plus /></el-icon> 新增
-      </el-button>
+      <el-input
+          v-model="apiKey"
+          placeholder="输入 API KEY"
+          class="input-with-select"
+      >
+        <template #prepend>
+          <el-button type="primary">
+            <el-icon><Plus /></el-icon>
+          </el-button>
+        </template>
+        <template #append>
+          <el-button class="new-proxy" @click="addApiKey">新增</el-button>
+        </template>
+      </el-input>
     </el-row>
 
     <el-row>
-      <el-table :data="tableData" style="width: 100%">
-        <el-table-column prop="key" label="API-KEY" />
+      <el-table :data="apiKeys" style="width: 100%">
+        <el-table-column prop="value" label="API-KEY" />
         <el-table-column prop="last_used" label="最后使用" width="180">
           <template #default="scope">
-            <span>{{scope.row['last_used']}}</span>
-            <el-tag>未使用</el-tag>
+            <span v-if="scope.row['last_used'] > 0">{{ dateFormat(scope.row['last_used']) }}</span>
+            <el-tag v-else>未使用</el-tag>
           </template>
         </el-table-column>
         <el-table-column label="操作" width="180">
           <template #default="scope">
-            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
-            >Edit</el-button
-            >
             <el-button
                 size="small"
                 type="danger"
-                @click="handleDelete(scope.$index, scope.row)"
-            >Delete</el-button
+                @click="removeApiKey(scope.row.value)"
+            >删除</el-button
             >
           </template>
         </el-table-column>
@@ -92,8 +100,11 @@
 </template>
 
 <script>
-import {defineComponent} from "vue";
+import {defineComponent, nextTick} from "vue";
 import {Plus} from "@element-plus/icons-vue";
+import {httpGet, httpPost} from "@/utils/http";
+import {ElMessage} from "element-plus";
+import {dateFormat, removeArrayItem} from "@/utils/libs";
 
 export default defineComponent({
   name: 'SysConfig',
@@ -101,12 +112,74 @@ export default defineComponent({
   data() {
     return {
       title: "系统管理",
-      form: {}
+      apiKey: '',
+      form: {},
+      apiKeys: [],
+      loading: true
     }
   },
-  methods: {
-    save: function () {
+  mounted() {
+    // 获取系统配置
+    httpGet('/api/admin/config/get').then((res) => {
+      this.form = res.data;
+    }).catch(() => {
+      ElMessage.error('获取系统配置失败')
+    })
 
+    // 获取 API KEYS
+    httpPost('api/admin/apikey/list').then((res) => {
+      this.apiKeys = res.data
+    }).catch(() => {
+      ElMessage.error('获取 API KEY 失败')
+    })
+
+    nextTick(() => {
+      this.loading = false
+    })
+  },
+  computed: {
+    dateFormat() {
+      return dateFormat
+    },
+  },
+  methods: {
+    saveConfig: function (e) {
+      this.form['temperature'] = parseFloat(this.form['temperature'])
+      this.form['chat_context_expire_time'] = parseInt(this.form['chat_context_expire_time'])
+      this.form['max_tokens'] = parseInt(this.form['max_tokens'])
+      httpPost("/api/admin/config/set", this.form).then(() => {
+        ElMessage.success("保存成功");
+        e.currentTarget.blur()
+      }).catch((e) => {
+        console.log(e.message);
+        ElMessage.error("保存失败");
+      })
+    },
+
+    addApiKey: function () {
+      if (this.apiKey.trim() === '') {
+        ElMessage.error('请输入 API KEY')
+        return
+      }
+
+      httpPost('api/admin/apikey/add', {api_key: this.apiKey.trim()}).then(() => {
+        ElMessage.success('添加成功')
+        this.apiKeys.push({value: this.apiKey, last_used: 0})
+        this.apiKey = ''
+      }).catch((e) => {
+        ElMessage.error('添加失败，'+e.message)
+      })
+    },
+
+    removeApiKey:function (key) {
+      httpPost('api/admin/apikey/remove', {api_key: key}).then(() => {
+        ElMessage.success('删除成功')
+        this.apiKeys = removeArrayItem(this.apiKeys, key, function (v1,v2) {
+          return v1.value === v2
+        })
+      }).catch((e) => {
+        ElMessage.error('删除失败，'+e.message)
+      })
     }
   }
 })
@@ -117,11 +190,6 @@ export default defineComponent({
 
   .api-key-box {
     padding-bottom: 10px;
-    justify-content: end;
-
-    .el-icon--right {
-      margin-right 5px;
-    }
   }
 
 }