AI对话页面增加显示AI思考中

web/src/views/admin/ApiKey.vue

@@ -2,7 +2,12 @@
   <div class="container list" v-loading="loading">
     <div class="handle-box">
       <el-select v-model="query.type" placeholder="类型" class="handle-input">
-        <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value" />
+        <el-option
+          v-for="item in types"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
       </el-select>
 
       <el-button :icon="Search" @click="fetchData">搜索</el-button>
@@ -40,7 +45,7 @@
 
         <el-table-column label="最后使用时间">
           <template #default="scope">
-            <span v-if="scope.row['last_used_at']">{{ scope.row["last_used_at"] }}</span>
+            <span v-if="scope.row['last_used_at']">{{ scope.row['last_used_at'] }}</span>
             <el-tag v-else>未使用</el-tag>
           </template>
         </el-table-column>
@@ -73,7 +78,13 @@
               </el-col>
               <el-col :span="12">
                 <el-select v-model="preset" placeholder="请选择预设" @change="changePreset">
-                  <el-option v-for="item in presets" :value="item" :label="item.label" :key="item.value">{{ item.label }} </el-option>
+                  <el-option
+                    v-for="item in presets"
+                    :value="item"
+                    :label="item.label"
+                    :key="item.value"
+                    >{{ item.label }}
+                  </el-option>
                 </el-select>
               </el-col>
             </el-row>
@@ -81,14 +92,24 @@
         </el-form-item>
         <el-form-item label="类型：" prop="type">
           <el-select v-model="item.type" placeholder="请选择类型">
-            <el-option v-for="item in types" :value="item.value" :label="item.label" :key="item.value">{{ item.label }} </el-option>
+            <el-option
+              v-for="item in types"
+              :value="item.value"
+              :label="item.label"
+              :key="item.value"
+              >{{ item.label }}
+            </el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="API KEY：" prop="value">
           <el-input v-model="item.value" autocomplete="off" />
         </el-form-item>
         <el-form-item label="API URL：" prop="api_url">
-          <el-input v-model="item.api_url" autocomplete="off" placeholder="只填 BASE URL 即可，如：https://api.openai.com 或者 wss://api.openai.com" />
+          <el-input
+            v-model="item.api_url"
+            autocomplete="off"
+            placeholder="只填 BASE URL 如：https://api.openai.com 或者完整 URL 如：https://api.openai.com/v1/chat/completions"
+          />
         </el-form-item>
 
         <!--        <el-form-item label="代理地址：" prop="proxy_url">-->
@@ -112,162 +133,162 @@
 </template>
 
 <script setup>
-import { onMounted, onUnmounted, reactive, ref } from "vue";
-import { httpGet, httpPost } from "@/utils/http";
-import { ElMessage } from "element-plus";
-import { dateFormat, removeArrayItem, substr } from "@/utils/libs";
-import { DocumentCopy, Plus, ShoppingCart, Search } from "@element-plus/icons-vue";
-import ClipboardJS from "clipboard";
+import { httpGet, httpPost } from '@/utils/http'
+import { dateFormat, removeArrayItem, substr } from '@/utils/libs'
+import { DocumentCopy, Plus, Search, ShoppingCart } from '@element-plus/icons-vue'
+import ClipboardJS from 'clipboard'
+import { ElMessage } from 'element-plus'
+import { onMounted, onUnmounted, reactive, ref } from 'vue'
 
 // 变量定义
-const items = ref([]);
-const query = ref({ type: "" });
-const item = ref({});
-const showDialog = ref(false);
+const items = ref([])
+const query = ref({ type: '' })
+const item = ref({})
+const showDialog = ref(false)
 const rules = reactive({
-  name: [{ required: true, message: "请输入名称", trigger: "change" }],
-  type: [{ required: true, message: "请选择用途", trigger: "change" }],
-  value: [{ required: true, message: "请输入 API KEY 值", trigger: "change" }],
-});
+  name: [{ required: true, message: '请输入名称', trigger: 'change' }],
+  type: [{ required: true, message: '请选择用途', trigger: 'change' }],
+  value: [{ required: true, message: '请输入 API KEY 值', trigger: 'change' }],
+})
 
-const loading = ref(true);
-const formRef = ref(null);
-const title = ref("");
+const loading = ref(true)
+const formRef = ref(null)
+const title = ref('')
 const types = ref([
-  { label: "对话", value: "chat" },
-  { label: "Midjourney", value: "mj" },
-  { label: "Stable-Diffusion", value: "sd" },
-  { label: "DALL-E", value: "dalle" },
-  { label: "Suno文生歌", value: "suno" },
-  { label: "Luma视频", value: "luma" },
-  { label: "可灵视频", value: "keling" },
-  { label: "Realtime API", value: "realtime" },
-  { label: "语音合成", value: "tts" },
-  { label: "其他", value: "other" },
-]);
-const isEdit = ref(false);
-const clipboard = ref(null);
+  { label: '对话', value: 'chat' },
+  { label: 'Midjourney', value: 'mj' },
+  { label: 'Stable-Diffusion', value: 'sd' },
+  { label: 'DALL-E', value: 'dalle' },
+  { label: 'Suno文生歌', value: 'suno' },
+  { label: 'Luma视频', value: 'luma' },
+  { label: '可灵视频', value: 'keling' },
+  { label: 'Realtime API', value: 'realtime' },
+  { label: '语音合成', value: 'tts' },
+  { label: '其他', value: 'other' },
+])
+const isEdit = ref(false)
+const clipboard = ref(null)
 const presets = ref([
-  { label: "GiteeAI", value: "https://ai.gitee.com" },
-  { label: "中转01", value: "https://api.geekai.pro" },
-  { label: "中转03", value: "https://api.geekai.me" },
-  { label: "OpenAI", value: "https://api.openai.com" },
-]);
-const preset = ref(null);
+  { label: 'GiteeAI', value: 'https://ai.gitee.com' },
+  { label: '中转01', value: 'https://api.geekai.pro' },
+  { label: '中转03', value: 'https://api.geekai.me' },
+  { label: 'OpenAI', value: 'https://api.openai.com' },
+])
+const preset = ref(null)
 
 onMounted(() => {
-  clipboard.value = new ClipboardJS(".copy-key");
-  clipboard.value.on("success", () => {
-    ElMessage.success("复制成功！");
-  });
+  clipboard.value = new ClipboardJS('.copy-key')
+  clipboard.value.on('success', () => {
+    ElMessage.success('复制成功！')
+  })
 
-  clipboard.value.on("error", () => {
-    ElMessage.error("复制失败！");
-  });
+  clipboard.value.on('error', () => {
+    ElMessage.error('复制失败！')
+  })
 
-  fetchData();
-});
+  fetchData()
+})
 
 onUnmounted(() => {
-  clipboard.value.destroy();
-});
+  clipboard.value.destroy()
+})
 
 const getTypeName = (type) => {
   for (let v of types.value) {
     if (v.value === type) {
-      return v.label;
+      return v.label
     }
   }
-  return "";
-};
+  return ''
+}
 
 // 获取数据
 const fetchData = () => {
-  httpGet("/api/admin/apikey/list", query.value)
+  httpGet('/api/admin/apikey/list', query.value)
     .then((res) => {
       if (res.data) {
         // 初始化数据
-        const arr = res.data;
+        const arr = res.data
         for (let i = 0; i < arr.length; i++) {
-          arr[i].last_used_at = dateFormat(arr[i].last_used_at);
+          arr[i].last_used_at = dateFormat(arr[i].last_used_at)
         }
-        items.value = arr;
+        items.value = arr
       }
-      loading.value = false;
+      loading.value = false
     })
     .catch(() => {
-      ElMessage.error("获取数据失败");
-    });
-};
+      ElMessage.error('获取数据失败')
+    })
+}
 
 const add = function () {
-  showDialog.value = true;
-  title.value = "新增 API KEY";
-  isEdit.value = false;
+  showDialog.value = true
+  title.value = '新增 API KEY'
+  isEdit.value = false
   item.value = {
     enabled: true,
-    api_url: "",
-  };
-};
+    api_url: '',
+  }
+}
 
 const edit = function (row) {
-  showDialog.value = true;
-  title.value = "修改 API KEY";
-  item.value = row;
-  isEdit.value = true;
-};
+  showDialog.value = true
+  title.value = '修改 API KEY'
+  item.value = row
+  isEdit.value = true
+}
 
 const save = function () {
   formRef.value.validate((valid) => {
     if (valid) {
-      showDialog.value = false;
-      httpPost("/api/admin/apikey/save", item.value)
+      showDialog.value = false
+      httpPost('/api/admin/apikey/save', item.value)
         .then((res) => {
-          ElMessage.success("操作成功！");
-          if (!item.value["id"]) {
-            const newItem = res.data;
-            newItem.last_used_at = dateFormat(newItem.last_used_at);
-            items.value.push(newItem);
+          ElMessage.success('操作成功！')
+          if (!item.value['id']) {
+            const newItem = res.data
+            newItem.last_used_at = dateFormat(newItem.last_used_at)
+            items.value.push(newItem)
           }
         })
         .catch((e) => {
-          ElMessage.error("操作失败，" + e.message);
-        });
+          ElMessage.error('操作失败，' + e.message)
+        })
     } else {
-      return false;
+      return false
     }
-  });
-};
+  })
+}
 
 const remove = function (row) {
-  httpGet("/api/admin/apikey/remove?id=" + row.id)
+  httpGet('/api/admin/apikey/remove?id=' + row.id)
     .then(() => {
-      ElMessage.success("删除成功！");
+      ElMessage.success('删除成功！')
       items.value = removeArrayItem(items.value, row, (v1, v2) => {
-        return v1.id === v2.id;
-      });
+        return v1.id === v2.id
+      })
     })
     .catch((e) => {
-      ElMessage.error("删除失败：" + e.message);
-    });
-};
+      ElMessage.error('删除失败：' + e.message)
+    })
+}
 
 const set = (filed, row) => {
-  httpPost("/api/admin/apikey/set", { id: row.id, filed: filed, value: row[filed] })
+  httpPost('/api/admin/apikey/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 changePreset = (row) => {
-  item.value.api_url = row.value;
+  item.value.api_url = row.value
   if (!item.value.name) {
-    item.value.name = row.label;
+    item.value.name = row.label
   }
-};
+}
 </script>
 
 <style lang="stylus" scoped>

web/src/views/admin/Login.vue

@@ -10,7 +10,14 @@
 
           <h1 class="header">登录 {{ title }}</h1>
           <div class="content">
-            <el-input v-model="username" placeholder="请输入用户名" size="large" autocomplete="off" autofocus @keyup.enter="login">
+            <el-input
+              v-model="username"
+              placeholder="请输入用户名"
+              size="large"
+              autocomplete="off"
+              autofocus
+              @keyup.enter="login"
+            >
               <template #prefix>
                 <el-icon>
                   <UserFilled />
@@ -18,7 +25,14 @@
               </template>
             </el-input>
 
-            <el-input v-model="password" placeholder="请输入密码" size="large" show-password autocomplete="off" @keyup.enter="login">
+            <el-input
+              v-model="password"
+              placeholder="请输入密码"
+              size="large"
+              show-password
+              autocomplete="off"
+              @keyup.enter="login"
+            >
               <template #prefix>
                 <el-icon>
                   <Lock />
@@ -27,7 +41,9 @@
             </el-input>
 
             <el-row class="btn-row">
-              <el-button class="login-btn" size="large" type="primary" @click="login">登录</el-button>
+              <el-button class="login-btn" size="large" type="primary" @click="login"
+                >登录</el-button
+              >
             </el-row>
           </div>
         </div>
@@ -40,57 +56,57 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
-import { Lock, UserFilled } from "@element-plus/icons-vue";
-import { httpPost } from "@/utils/http";
-import { ElMessage } from "element-plus";
-import { useRouter } from "vue-router";
-import FooterBar from "@/components/FooterBar.vue";
-import { setAdminToken } from "@/store/session";
-import { checkAdminSession, getSystemInfo } from "@/store/cache";
-import Captcha from "@/components/Captcha.vue";
+import Captcha from '@/components/Captcha.vue'
+import FooterBar from '@/components/FooterBar.vue'
+import { checkAdminSession, getSystemInfo } from '@/store/cache'
+import { setAdminToken } from '@/store/session'
+import { httpPost } from '@/utils/http'
+import { Lock, UserFilled } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
 
-const router = useRouter();
-const title = ref("Geek-AI Console");
-const username = ref(process.env.VUE_APP_ADMIN_USER);
-const password = ref(process.env.VUE_APP_ADMIN_PASS);
-const logo = ref("");
-const enableVerify = ref(false);
-const captchaRef = ref(null);
+const router = useRouter()
+const title = ref('Geek-AI Console')
+const username = ref(process.env.VUE_APP_ADMIN_USER)
+const password = ref(process.env.VUE_APP_ADMIN_PASS)
+const logo = ref('')
+const enableVerify = ref(false)
+const captchaRef = ref(null)
 
 checkAdminSession()
   .then(() => {
-    router.push("/admin");
+    router.push('/admin')
   })
-  .catch(() => {});
+  .catch(() => {})
 
 // 加载系统配置
 getSystemInfo()
   .then((res) => {
-    title.value = res.data.admin_title;
-    logo.value = res.data.logo;
-    enableVerify.value = res.data["enabled_verify"];
+    title.value = res.data.admin_title
+    logo.value = res.data.logo
+    enableVerify.value = res.data['enabled_verify']
   })
   .catch((e) => {
-    ElMessage.error("加载系统配置失败: " + e.message);
-  });
+    ElMessage.error('加载系统配置失败: ' + e.message)
+  })
 
 const login = function () {
-  if (username.value === "") {
-    return ElMessage.error("请输入用户名");
+  if (username.value === '') {
+    return ElMessage.error('请输入用户名')
   }
-  if (password.value === "") {
-    return ElMessage.error("请输入密码");
+  if (password.value === '') {
+    return ElMessage.error('请输入密码')
   }
   if (enableVerify.value) {
-    captchaRef.value.loadCaptcha();
+    captchaRef.value.loadCaptcha()
   } else {
-    doLogin({});
+    doLogin({})
   }
-};
+}
 
 const doLogin = function (verifyData) {
-  httpPost("/api/admin/login", {
+  httpPost('/api/admin/login', {
     username: username.value.trim(),
     password: password.value.trim(),
     key: verifyData.key,
@@ -98,13 +114,13 @@ const doLogin = function (verifyData) {
     x: verifyData.x,
   })
     .then((res) => {
-      setAdminToken(res.data.token);
-      router.push("/admin");
+      setAdminToken(res.data.token)
+      router.push('/admin')
     })
     .catch((e) => {
-      ElMessage.error("登录失败，" + e.message);
-    });
-};
+      ElMessage.error('登录失败，' + e.message)
+    })
+}
 </script>
 
 <style lang="stylus" scoped>
@@ -114,7 +130,9 @@ const doLogin = function (verifyData) {
   right 0
   top 0
   bottom 0
-  background-color #091519
+  background #8d4bbb
+  // background-image url("~@/assets/img/transparent-bg.png")
+  // background-repeat:repeat;
   background-image url("~@/assets/img/admin-login-bg.jpg")
   background-size cover
   background-position center
@@ -145,7 +163,7 @@ const doLogin = function (verifyData) {
       padding 40px;
       color #ffffff
       border-radius 10px;
-      background rgba(0, 0, 0, 0.3)
+      background rgba(0, 0, 0, 0.4)
 
       .logo {
         text-align center