merge v4.2.3

2026-04-27 21:44:25 +08:00 · 2026-01-29 20:11:50 +08:00
parent c84754fc0c 5e59b3a708
commit 126c9921a8
129 changed files with 3386 additions and 1946 deletions
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -8,8 +8,12 @@
      "name": "geekai-web",
      "version": "0.1.0",
      "dependencies": {
+        "@better-scroll/core": "^2.5.1",
+        "@better-scroll/mouse-wheel": "^2.5.1",
+        "@better-scroll/observe-dom": "^2.5.1",
+        "@better-scroll/pull-up": "^2.5.1",
+        "@better-scroll/scroll-bar": "^2.5.1",
        "@element-plus/icons-vue": "^2.3.1",
-        "@openai/realtime-api-beta": "github:openai/openai-realtime-api-beta",
        "animate.css": "^4.1.1",
        "axios": "^0.27.2",
        "clipboard": "^2.0.11",
@@ -35,7 +39,6 @@
        "qs": "^6.11.1",
        "sortablejs": "^1.15.0",
        "three": "^0.128.0",
-        "v3-waterfall": "^1.3.3",
        "vant": "^4.5.0",
        "vue": "^3.2.13",
        "vue-router": "^4.0.15",
@@ -1728,6 +1731,51 @@
        "node": ">=6.9.0"
      }
    },
+    "node_modules/@better-scroll/core": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/@better-scroll/core/-/core-2.5.1.tgz",
+      "integrity": "sha512-koKOuYA55dQ04FJRIVUpMGDr1hbCfWmfX0MGp1hKagkQSWSRpwblqACiwtggVauoj9aaJRJZ9hDsTM4weaavlg==",
+      "dependencies": {
+        "@better-scroll/shared-utils": "^2.5.1"
+      }
+    },
+    "node_modules/@better-scroll/mouse-wheel": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/@better-scroll/mouse-wheel/-/mouse-wheel-2.5.1.tgz",
+      "integrity": "sha512-DGnrirRMY6zMM7xwgx09D/cA9A//3J1/uDkq8iBVEyE5p0sEr/keQpjEfFHGkBRa505BnbBwdbN6f5lugEDSPw==",
+      "dependencies": {
+        "@better-scroll/core": "^2.5.1"
+      }
+    },
+    "node_modules/@better-scroll/observe-dom": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/@better-scroll/observe-dom/-/observe-dom-2.5.1.tgz",
+      "integrity": "sha512-TCMGFLRfpXBPIwtUV/efliUmfmrhSNI7NXdSyjdWjsLOS7dh3eFkmcom5ERVWMaXVELSmujGXLqobT+dT0C/jg==",
+      "dependencies": {
+        "@better-scroll/core": "^2.5.1"
+      }
+    },
+    "node_modules/@better-scroll/pull-up": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/@better-scroll/pull-up/-/pull-up-2.5.1.tgz",
+      "integrity": "sha512-1hu3xSMxdB8T391KffpNZ7g93lMwZEHjfb1F1Y4KvIkciDt8nXqkGpqrZF+YwR+EJTgYcWqUO8kgmI6XXu7Pkg==",
+      "dependencies": {
+        "@better-scroll/core": "^2.5.1"
+      }
+    },
+    "node_modules/@better-scroll/scroll-bar": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/@better-scroll/scroll-bar/-/scroll-bar-2.5.1.tgz",
+      "integrity": "sha512-i6r60pWG/ztkFK2j5Gj54I0LJb2jGh5TWJNQBoW0gUkp28B+0JvBFTwZn9tF7beZCBorKR7Hvvu4O9A1TJy94Q==",
+      "dependencies": {
+        "@better-scroll/core": "^2.5.1"
+      }
+    },
+    "node_modules/@better-scroll/shared-utils": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/@better-scroll/shared-utils/-/shared-utils-2.5.1.tgz",
+      "integrity": "sha512-AplkfSjXVYP9LZiD6JsKgmgQJ/mG4uuLmBuwLz8W5OsYc7AYTfN8kw6GqZ5OwCGoXkVhBGyd8NeC4xwYItp0aw=="
+    },
    "node_modules/@ctrl/tinycolor": {
      "version": "3.6.1",
      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
@@ -2133,13 +2181,6 @@
        "node": ">= 8"
      }
    },
-    "node_modules/@openai/realtime-api-beta": {
-      "version": "0.0.0",
-      "resolved": "git+ssh://git@github.com/openai/openai-realtime-api-beta.git#a5cb94824f625423858ebacb9f769226ca98945f",
-      "dependencies": {
-        "ws": "^8.18.0"
-      }
-    },
    "node_modules/@pkgjs/parseargs": {
      "version": "0.11.0",
      "resolved": "https://registry.npmmirror.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -12711,11 +12752,6 @@
        "uuid": "dist/bin/uuid"
      }
    },
-    "node_modules/v3-waterfall": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/v3-waterfall/-/v3-waterfall-1.3.3.tgz",
-      "integrity": "sha512-jUmp0xpHGkEcUxaYKGRtI5b2NvogxI/UrfoCLmpTi0UbQndDdqjwufxJvWwiJjwZQyOIPpnq9ZOFtkBwxchq3Q=="
-    },
    "node_modules/v8-compile-cache": {
      "version": "2.4.0",
      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.4.0.tgz",
@@ -13531,6 +13567,7 @@
      "version": "8.18.0",
      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
      "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
+      "dev": true,
      "engines": {
        "node": ">=10.0.0"
      },
--- a/web/public/images/index-bg.jpg
+++ b/web/public/images/index-bg.jpg
--- a/web/public/images/land_ocean_ice_cloud_2048.jpg
+++ b/web/public/images/land_ocean_ice_cloud_2048.jpg
--- a/web/src/assets/css/chat-plus.styl
+++ b/web/src/assets/css/chat-plus.styl
@@ -19,7 +19,7 @@
      padding 10px
      width var(--el-aside-width, 320px)

-      .media-page {
+      .chat-list-container {
        display: flex
        flex-flow: column
        border-radius 10px
--- a/web/src/assets/css/suno.styl
+++ b/web/src/assets/css/suno.styl
@@ -216,6 +216,7 @@
            .el-image {
              height 90px
              border-radius 5px
+              width 100%
            }

            .duration {
--- a/web/src/assets/img/admin-login-bg.jpg
+++ b/web/src/assets/img/admin-login-bg.jpg
--- a/web/src/assets/img/login-bg2.jpg
+++ b/web/src/assets/img/login-bg2.jpg
--- a/web/src/assets/img/transparent-bg.png
+++ b/web/src/assets/img/transparent-bg.png
--- a/web/src/components/ChatReply.vue
+++ b/web/src/components/ChatReply.vue
@@ -7,7 +7,14 @@
        </div>

        <div class="chat-item">
-          <div class="content-wrapper" v-html="md.render(processContent(data.content))"></div>
+          <div
+            class="content-wrapper"
+            v-html="md.render(processContent(data.content))"
+            v-if="data.content"
+          ></div>
+          <div class="content-wrapper flex justify-start items-center" v-else>
+            <span class="mr-2">AI 思考中</span> <Thinking :duration="1.5" />
+          </div>
          <div class="bar flex text-gray-500" v-if="data.created_at">
            <span class="bar-item text-sm">{{ dateFormat(data.created_at) }}</span>
            <!-- <span class="bar-item">tokens: {{ data.tokens }}</span> -->
@@ -65,7 +72,14 @@
        </div>
        <div class="chat-item">
          <div class="content-wrapper">
-            <div class="content" v-html="md.render(processContent(data.content))"></div>
+            <div
+              class="content"
+              v-html="md.render(processContent(data.content))"
+              v-if="data.content"
+            ></div>
+            <div class="content flex justify-start items-center" v-else>
+              <span class="mr-2">AI 思考中</span> <Thinking :duration="1.5" />
+            </div>
          </div>
          <div class="bar text-gray-500" v-if="data.created_at">
            <span class="bar-item text-sm"> {{ dateFormat(data.created_at) }}</span>
@@ -124,6 +138,7 @@ import MarkdownIt from 'markdown-it'
 import emoji from 'markdown-it-emoji'
 import mathjaxPlugin from 'markdown-it-mathjax3'
 import { ref } from 'vue'
+import Thinking from './Thinking.vue'
 // eslint-disable-next-line no-undef,no-unused-vars
 const props = defineProps({
  data: {
--- a/web/src/components/Thinking.vue
+++ b/web/src/components/Thinking.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="loading-container" :style="containerStyle">
+    <div
+      v-for="i in 3"
+      :key="i"
+      class="dot"
+      :style="[dotStyle, { animationDelay: `${(i - 1) * 0.2}s` }]"
+    ></div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  // 点的大小(px)
+  size: {
+    type: Number,
+    default: 8,
+  },
+  // 点之间的间距(px)
+  spacing: {
+    type: Number,
+    default: 4,
+  },
+  // 动画持续时间(秒)
+  duration: {
+    type: Number,
+    default: 1.4,
+  },
+})
+
+// 计算样式
+const containerStyle = computed(() => ({
+  height: `${props.size * 2}px`,
+}))
+
+const dotStyle = computed(() => ({
+  width: `${props.size}px`,
+  height: `${props.size}px`,
+  margin: `0 ${props.spacing}px`,
+  background: `var(--el-text-color-regular)`,
+  animationDuration: `${props.duration}s`,
+}))
+</script>
+<style scoped>
+.loading-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dot {
+  border-radius: 50%;
+  display: inline-block;
+  animation: loading ease-in-out infinite;
+}
+
+@keyframes loading {
+  0% {
+    opacity: 0.2;
+    transform: scale(0.8);
+  }
+  20% {
+    opacity: 1;
+    transform: scale(1.2);
+  }
+  40% {
+    opacity: 0.2;
+    transform: scale(0.8);
+  }
+  100% {
+    opacity: 0.2;
+    transform: scale(0.8);
+  }
+}
+</style>
--- a/web/src/components/mobile/ChatReply.vue
+++ b/web/src/components/mobile/ChatReply.vue
@@ -1,24 +1,31 @@
 <template>
  <div class="mobile-message-reply">
    <div class="chat-icon">
-      <van-image :src="icon"/>
+      <van-image :src="icon" />
    </div>

    <div class="chat-item">
      <div class="triangle"></div>
      <div class="content-box" ref="contentRef">
-        <div :data-clipboard-text="orgContent" class="content content-mobile" v-html="content"></div>
+        <div
+          :data-clipboard-text="orgContent"
+          class="content content-mobile"
+          v-html="content"
+          v-if="content"
+        ></div>
+        <div class="content content-mobile flex justify-start items-center" v-else>
+          <span class="mr-2">AI 思考中</span> <Thinking :duration="1.5" />
+        </div>
      </div>
-
    </div>
  </div>
 </template>

 <script setup>
-import {nextTick, onMounted, ref} from "vue"
-
-import {showImagePreview} from "vant";
+import { onMounted, ref } from 'vue'

+import { showImagePreview } from 'vant'
+import Thinking from '../Thinking.vue'
 const props = defineProps({
  content: {
    type: String,
@@ -31,8 +38,8 @@ const props = defineProps({
  icon: {
    type: String,
    default: '/images/gpt-icon.png',
-  }
-});
+  },
+})

 const contentRef = ref(null)
 onMounted(() => {
@@ -43,7 +50,7 @@ onMounted(() => {
    }
    imgs[i].addEventListener('click', (e) => {
      e.stopPropagation()
-      showImagePreview([imgs[i].src]);
+      showImagePreview([imgs[i].src])
    })
  }
 })
@@ -221,4 +228,4 @@ onMounted(() => {
  }

 }
-</style>
+</style>
--- a/web/src/views/ChatPlus.vue
+++ b/web/src/views/ChatPlus.vue
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="layout">
    <div class="tab-box">
-      <div class="flex-center-col pt-2 mb-2">
+      <!-- <div class="flex-center-col pt-2 mb-2">
        <div class="flex flex-center-col">
          <div class="menuIcon" @click="store.setChatListExtend(!store.chatListExtend)">
            <el-tooltip content="隐藏对话列表" placement="right" v-if="store.chatListExtend">
@@ -12,16 +12,16 @@
            </el-tooltip>
          </div>
        </div>
-      </div>
+      </div> -->

-      <div class="menu-list">
+      <div class="menu-list pt-2">
        <ul>
          <li
            class="menu-list-item flex-center-col"
            v-for="item in mainNavs"
            :key="item.url"
            @click="changeNav(item)"
-            :class="item.url === curPath ? 'active' : ''"
+            :class="curPath.startsWith(item.url) ? 'active' : ''"
          >
            <span v-if="item.icon.startsWith('icon')">
              <i class="iconfont" :class="item.icon"></i>
@@ -48,7 +48,7 @@
                  v-for="(item, index) in moreNavs"
                  :key="item.url"
                  :class="{
-                    active: item.url === curPath,
+                    active: curPath.startsWith(item.url),
                    moreTitle: index !== 3 && index !== 4,
                    twoTittle: index === 3 || index === 4,
                  }"
@@ -58,7 +58,7 @@
                      <i class="iconfont" :class="item.icon"></i>
                    </span>
                    <el-image :src="item.icon" style="width: 20px; height: 20px" v-else />
-                    <span :class="item.url === curPath ? 'title active' : 'title'">{{
+                    <span class="title" :class="curPath.startsWith(item.url) ? 'active' : ''">{{
                      item.name
                    }}</span>
                  </a>
@@ -142,18 +142,18 @@
 </template>

 <script setup>
-import { UserFilled } from '@element-plus/icons-vue'
+import LoginDialog from '@/components/LoginDialog.vue'
 import ThemeChange from '@/components/ThemeChange.vue'
-import { useRouter } from 'vue-router'
-import { computed, onMounted, ref, watch } from 'vue'
-import { httpGet } from '@/utils/http'
-import { ElMessage } from 'element-plus'
+import ConfigDialog from '@/components/UserInfoDialog.vue'
 import { checkSession, getLicenseInfo, getSystemInfo } from '@/store/cache'
 import { removeUserToken } from '@/store/session'
 import { useSharedStore } from '@/store/sharedata'
-import ConfigDialog from '@/components/UserInfoDialog.vue'
 import { showMessageError } from '@/utils/dialog'
-import LoginDialog from '@/components/LoginDialog.vue'
+import { httpGet } from '@/utils/http'
+import { UserFilled } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'

 const router = useRouter()
 const logo = ref('')
@@ -209,6 +209,7 @@ watch(
 // 监听路由变化;
 router.beforeEach((to, from, next) => {
  curPath.value = to.path
+  console.log(curPath.value)
  next()
 })

@@ -246,7 +247,7 @@ onMounted(() => {
    .then((res) => {
      mainNavs.value = res.data
      // 根据窗口的高度计算应该显示多少菜单
-      const rows = Math.floor((window.innerHeight - 100) / 90)
+      const rows = Math.floor((window.innerHeight - 100) / 75)
      if (res.data.length > rows) {
        mainNavs.value = res.data.slice(0, rows)
        moreNavs.value = res.data.slice(rows)
--- a/web/src/views/ImageMj.vue
+++ b/web/src/views/ImageMj.vue
@@ -203,6 +203,9 @@
                              <InfoFilled />
                            </el-icon>
                          </el-tooltip>
+                          <div class="flex-row justify-start items-center">
+                            <span>如需自定义比例，在绘画指令最后加一个空格然后加上指令(宽高比) --ar w:h 例如: 1 cat --ar 21:9 </span>
+                          </div>
                        </div>
                      </div>
                    </div>
@@ -326,6 +329,9 @@
                            </el-icon>
                          </el-tooltip>
                        </div>
+                        <div class="flex-row justify-start items-center">
+                            <span>如需自定义比例，在绘画指令最后加一个空格然后加上指令(宽高比) --ar w:h 例如: 1 cat --ar 21:9 </span>
+                          </div>
                      </div>
                    </div>

@@ -538,6 +544,9 @@
                              <InfoFilled />
                            </el-icon>
                          </el-tooltip>
+                          <div class="flex-row justify-start items-center">
+                            <span>如需自定义比例，在绘画指令最后加一个空格然后加上指令(宽高比) --ar w:h 例如: 1 cat --ar 21:9 </span>
+                          </div>
                        </div>
                      </div>
                    </div>
@@ -730,7 +739,7 @@
                                class="px-3 h-6 rounded bg-gray-500 text-xs text-white shadow-md transition-all duration-300 hover:bg-gray-600"
                                @click="variation(1, item)"
                              >
-                                U1
+                                V1
                              </button>
                              <button
                                class="px-3 h-6 rounded bg-gray-500 text-xs text-white shadow-md transition-all duration-300 hover:bg-gray-600 ml-2"
@@ -772,7 +781,7 @@
                                <el-button
                                  type="info"
                                  circle
-                                  class="copy-prompt"
+                                  class="copy-prompt-mj"
                                  :data-clipboard-text="item.prompt"
                                >
                                  <i class="iconfont icon-file"></i>
@@ -1203,6 +1212,13 @@ const generate = () => {
  if (imgList.value.length !== 2 && params.value.task_type === 'swapFace') {
    return ElMessage.error('换脸操作需要上传两张图片')
  }
+
+  const regex = /(^|\s)--ar\s+(\d+:\d+)/;
+  const match = regex.exec(params.value.prompt);
+  if (match) {
+    params.value.rate = match[2]
+  }
+
  params.value.session_id = getSessionId()
  params.value.img_arr = imgList.value
  httpPost('/api/mj/image', params.value)
--- a/web/src/views/Index.vue
+++ b/web/src/views/Index.vue
@@ -14,20 +14,12 @@
                <i class="iconfont icon-book"></i>
              </a>
            </el-tooltip>
-            <el-tooltip
-              class="box-item"
-              content="Github 源码"
-              placement="bottom"
-            >
+            <el-tooltip class="box-item" content="Github 源码" placement="bottom">
              <a :href="githubURL" class="link-button mr-3" target="_blank">
                <i class="iconfont icon-github"></i>
              </a>
            </el-tooltip>
-            <el-tooltip
-              class="box-item"
-              content="Gitee 源码"
-              placement="bottom"
-            >
+            <el-tooltip class="box-item" content="Gitee 源码" placement="bottom">
              <a :href="giteeURL" class="link-button" target="_blank">
                <i class="iconfont icon-gitee"></i>
              </a>
@@ -50,7 +42,7 @@
      <h1 class="animate__animated animate__backInDown">
        {{ title }}
      </h1>
-      <div class="msg-text cursor-ani">
+      <!-- <div class="msg-text cursor-ani">
        <span
          v-for="(char, index) in displayedChars"
          :key="index"
@@ -58,7 +50,7 @@
        >
          {{ char }}
        </span>
-      </div>
+      </div> -->

      <div class="navs animate__animated animate__backInDown">
        <el-space wrap :size="14">
@@ -80,112 +72,129 @@
 </template>

 <script setup>
-import { onMounted, ref } from "vue";
-import { useRouter } from "vue-router";
-import FooterBar from "@/components/FooterBar.vue";
-import ThemeChange from "@/components/ThemeChange.vue";
-import { httpGet } from "@/utils/http";
-import { ElMessage } from "element-plus";
-import { checkSession, getLicenseInfo, getSystemInfo } from "@/store/cache";
-import { isMobile } from "@/utils/libs";
+import FooterBar from '@/components/FooterBar.vue'
+import ThemeChange from '@/components/ThemeChange.vue'
+import { checkSession, getLicenseInfo, getSystemInfo } from '@/store/cache'
+import { httpGet } from '@/utils/http'
+import { isMobile } from '@/utils/libs'
+import { ElMessage } from 'element-plus'
+import { onMounted, onUnmounted, ref } from 'vue'
+import { useRouter } from 'vue-router'

-const router = useRouter();
+const router = useRouter()

 if (isMobile()) {
-  router.push("/mobile/index");
+  router.push('/mobile/index')
 }

-const title = ref("");
-const logo = ref("");
-const slogan = ref("");
-const license = ref({ de_copy: true });
+const title = ref('')
+const logo = ref('')
+const slogan = ref('')
+const license = ref({ de_copy: true })

-const isLogin = ref(false);
-const docsURL = ref(process.env.VUE_APP_DOCS_URL);
-const githubURL = ref(process.env.VUE_APP_GITHUB_URL);
-const giteeURL = ref(process.env.VUE_APP_GITEE_URL);
-const navs = ref([]);
+const isLogin = ref(false)
+const docsURL = ref(process.env.VUE_APP_DOCS_URL)
+const githubURL = ref(process.env.VUE_APP_GITHUB_URL)
+const giteeURL = ref(process.env.VUE_APP_GITEE_URL)
+const navs = ref([])

 const iconMap = ref({
-  "/chat": "icon-chat",
-  "/mj": "icon-mj",
-  "/sd": "icon-sd",
-  "/dalle": "icon-dalle",
-  "/images-wall": "icon-image",
-  "/suno": "icon-suno",
-  "/xmind": "icon-xmind",
-  "/apps": "icon-app",
-  "/member": "icon-vip-user",
-  "/invite": "icon-share",
-  "/luma": "icon-luma"
-});
+  '/chat': 'icon-chat',
+  '/mj': 'icon-mj',
+  '/sd': 'icon-sd',
+  '/dalle': 'icon-dalle',
+  '/images-wall': 'icon-image',
+  '/suno': 'icon-suno',
+  '/xmind': 'icon-xmind',
+  '/apps': 'icon-app',
+  '/member': 'icon-vip-user',
+  '/invite': 'icon-share',
+  '/luma': 'icon-luma',
+})

-const displayedChars = ref([]);
-const initAnimation = ref("");
-let timer = null; // 定时器句柄
+const displayedChars = ref([])
+const initAnimation = ref('')
+let timer = null // 定时器句柄

 // 初始化间隔时间和随机时间数组
-const interTime = ref(50);
-const interArr = [90, 100, 70, 88, 80, 110, 85, 400, 90, 99];
+const interTime = ref(50)
+const interArr = [90, 100, 70, 88, 80, 110, 85, 400, 90, 99]

 onMounted(() => {
  getSystemInfo()
    .then((res) => {
-      title.value = res.data.title;
-      logo.value = res.data.logo;
-      slogan.value = res.data.slogan;
-      if (timer) clearInterval(timer); // 清除定时器
-      timer = setInterval(setContent, interTime.value);
+      title.value = res.data.title
+      logo.value = res.data.logo
+      slogan.value = res.data.slogan
+
+      // 确保获取数据后再启动定时器
+      if (timer) clearInterval(timer) // 清除已有定时器
+      timer = setInterval(setContent, interTime.value)
    })
    .catch((e) => {
-      ElMessage.error("获取系统配置失败：" + e.message);
-    });
+      ElMessage.error('获取系统配置失败：' + e.message)
+    })

  getLicenseInfo()
    .then((res) => {
-      license.value = res.data;
+      license.value = res.data
    })
    .catch((e) => {
-      license.value = { de_copy: false };
-      ElMessage.error("获取 License 配置失败：" + e.message);
-    });
+      license.value = { de_copy: false }
+      ElMessage.error('获取 License 配置失败：' + e.message)
+    })

-  httpGet("/api/menu/list?index=1")
+  httpGet('/api/menu/list?index=1')
    .then((res) => {
-      navs.value = res.data;
+      navs.value = res.data
    })
    .catch((e) => {
-      ElMessage.error("获取导航菜单失败：" + e.message);
-    });
+      ElMessage.error('获取导航菜单失败：' + e.message)
+    })

  checkSession()
    .then(() => {
-      isLogin.value = true;
+      isLogin.value = true
    })
-    .catch(() => {});
-});
+    .catch(() => {})
+})
+
+// 组件销毁时清除定时器
+onUnmounted(() => {
+  if (timer) {
+    clearInterval(timer)
+    timer = null
+  }
+})
+
 // 打字机内容逐字符显示
 const setContent = () => {
+  if (!slogan.value) {
+    if (timer) clearInterval(timer)
+    timer = setTimeout(setContent, 100)
+    return
+  }
+
  if (initAnimation.value.length >= slogan.value.length) {
    // 文本已全部输出
-    initAnimation.value = "";
-    displayedChars.value = [];
-    if (timer) clearInterval(timer);
-    timer = setInterval(setContent, interTime.value);
+    initAnimation.value = ''
+    displayedChars.value = []
+    if (timer) clearInterval(timer)
+    timer = setInterval(setContent, interTime.value)
  } else {
-    const nextChar = slogan.value.charAt(initAnimation.value.length);
-    initAnimation.value += slogan.value.charAt(initAnimation.value.length); // 逐字符追加
-    displayedChars.value.push(nextChar);
-    interTime.value = interArr[Math.floor(Math.random() * interArr.length)]; // 设置随机间隔
-    if (timer) clearInterval(timer);
-    timer = setInterval(setContent, interTime.value);
+    const nextChar = slogan.value.charAt(initAnimation.value.length)
+    initAnimation.value += nextChar // 逐字符追加
+    displayedChars.value.push(nextChar)
+    interTime.value = interArr[Math.floor(Math.random() * interArr.length)] // 设置随机间隔
+    if (timer) clearInterval(timer)
+    timer = setInterval(setContent, interTime.value)
  }
-};
+}
 // 计算彩虹色
 const rainbowColor = (index) => {
-  const hue = (index * 40) % 360; // 每个字符间隔40度，形成彩虹色
-  return `hsl(${hue}, 90%, 50%)`; // 色调(hue)，饱和度(70%)，亮度(50%)
-};
+  const hue = (index * 40) % 360 // 每个字符间隔40度，形成彩虹色
+  return `hsl(${hue}, 90%, 50%)` // 色调(hue)，饱和度(70%)，亮度(50%)
+}
 </script>

 <style lang="stylus" scoped>
--- a/web/src/views/MarkMap.vue
+++ b/web/src/views/MarkMap.vue
@@ -263,29 +263,35 @@ const getModelById = (modelId) => {
 }

 // download SVG to png file
-const downloadImage = () => {
+const downloadImage = async() => {
+  // 先自适应思维导图到可视化区域
+  await markMap.value.fit() 
+
  const svgElement = document.getElementById('markmap')
-  // 将 SVG 渲染到图片对象
  const serializer = new XMLSerializer()
  const source =
    '<?xml version="1.0" standalone="no"?>\r\n' + serializer.serializeToString(svgRef.value)
  const image = new Image()
  image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source)

-  // 将图片对象渲染
+  // 分辨率倍数，越高图片越清晰，但文件越大
+  const scale = 4 
  const canvas = document.createElement('canvas')
-  canvas.width = svgElement.offsetWidth
-  canvas.height = svgElement.offsetHeight
+  canvas.width = svgElement.offsetWidth * scale
+  canvas.height = svgElement.offsetHeight * scale
+
  let context = canvas.getContext('2d')
  context.clearRect(0, 0, canvas.width, canvas.height)
  context.fillStyle = 'white'
  context.fillRect(0, 0, canvas.width, canvas.height)

  image.onload = function () {
+    // 关键：缩放 context
+    context.setTransform(scale, 0, 0, scale, 0, 0)
    context.drawImage(image, 0, 0)
    const a = document.createElement('a')
    a.download = 'geek-ai-xmind.png'
-    a.href = canvas.toDataURL(`image/png`)
+    a.href = canvas.toDataURL('image/png')
    a.click()
  }
 }
--- a/web/src/views/admin/ApiKey.vue
+++ b/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>
--- a/web/src/views/admin/ChatModel.vue
+++ b/web/src/views/admin/ChatModel.vue
@@ -24,6 +24,8 @@
            <el-tag type="success" v-else>聊天</el-tag>
          </template>
        </el-table-column>
+
+        <el-table-column prop="category" label="标签" />
        <el-table-column prop="value" label="模型值">
          <template #default="scope">
            <span>{{ scope.row.value }}</span>
@@ -32,6 +34,13 @@
            </el-icon>
          </template>
        </el-table-column>
+        <el-table-column prop="description" label="模型描述" width="180">
+          <template #default="scope">
+            <el-tooltip :content="scope.row.description || ''" placement="top" :show-after="200">
+              <div class="description-cell">{{ scope.row.description }}</div>
+            </el-tooltip>
+          </template>
+        </el-table-column>
        <el-table-column prop="power" label="费率" />
        <el-table-column prop="max_tokens" label="最大响应长度" />
        <el-table-column prop="max_context" label="最大上下文长度" />
@@ -61,7 +70,12 @@
      </el-table>
    </el-row>

-    <el-dialog v-model="showDialog" :title="title" :close-on-click-modal="false" style="width: 90%; max-width: 600px">
+    <el-dialog
+      v-model="showDialog"
+      :title="title"
+      :close-on-click-modal="false"
+      style="width: 90%; max-width: 600px"
+    >
      <el-form :model="item" label-width="120px" ref="formRef" :rules="rules">
        <el-form-item label="模型类型：" prop="type">
          <el-select v-model="item.type" placeholder="请选择模型类型">
@@ -78,15 +92,14 @@
          <el-input v-model="item.value" autocomplete="off" />
        </el-form-item>

+        <el-form-item label="模型标签" prop="category">
+          <el-input v-model="item.category" autocomplete="off" />
+        </el-form-item>
+
        <el-form-item label="消耗算力：" prop="power">
          <template #label>
            <div class="flex items-center">
              <span class="mr-1">消耗算力</span>
-              <el-tooltip effect="dark" content="每日签到赠送算力" raw-content placement="right">
-                <el-icon>
-                  <InfoFilled />
-                </el-icon>
-              </el-tooltip>
            </div>
          </template>
          <el-input v-model.number="item.power" autocomplete="off" placeholder="消耗算力" />
@@ -94,28 +107,50 @@

        <div v-if="item.type === 'chat'">
          <el-form-item label="最长响应：" prop="max_tokens">
-            <el-input v-model.number="item.max_tokens" autocomplete="off" placeholder="模型最大响应长度" />
+            <el-input
+              v-model.number="item.max_tokens"
+              autocomplete="off"
+              placeholder="模型最大响应长度"
+            />
          </el-form-item>

          <el-form-item>
            <template #label>
              <div class="flex items-center">
                <span class="mr-1">最大上下文</span>
-                <el-tooltip effect="dark" content="去各大模型的官方 API 文档查询模型支持的最大上下文长度" raw-content placement="right">
+                <el-tooltip
+                  effect="dark"
+                  content="去各大模型的官方 API 文档查询模型支持的最大上下文长度"
+                  raw-content
+                  placement="right"
+                >
                  <el-icon>
                    <InfoFilled />
                  </el-icon>
                </el-tooltip>
              </div>
            </template>
-            <el-input v-model.number="item.max_context" autocomplete="off" placeholder="模型最大上下文长度" />
+            <el-input
+              v-model.number="item.max_context"
+              autocomplete="off"
+              placeholder="模型最大上下文长度"
+            />
+          </el-form-item>
+
+          <el-form-item label="模型描述" prop="description">
+            <el-input v-model="item.description" autocomplete="off" />
          </el-form-item>

          <el-form-item label="创意度：" prop="temperature">
            <template #label>
              <div class="flex items-center">
                <span class="mr-1">创意度</span>
-                <el-tooltip effect="dark" content="OpenAI 0-2，其他模型 0-1" raw-content placement="right">
+                <el-tooltip
+                  effect="dark"
+                  content="OpenAI 0-2，其他模型 0-1"
+                  raw-content
+                  placement="right"
+                >
                  <el-icon>
                    <InfoFilled />
                  </el-icon>
@@ -153,7 +188,12 @@
          <template #label>
            <div class="flex items-center">
              <span class="mr-1">开放状态</span>
-              <el-tooltip effect="dark" content="开放后，该模型将对所有用户可见。<br/> 如果模型没有启用，则当前设置无效。" raw-content placement="right">
+              <el-tooltip
+                effect="dark"
+                content="开放后，该模型将对所有用户可见。<br/> 如果模型没有启用，则当前设置无效。"
+                raw-content
+                placement="right"
+              >
                <el-icon>
                  <InfoFilled />
                </el-icon>
@@ -175,76 +215,75 @@
 </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, InfoFilled, Plus, Search } from "@element-plus/icons-vue";
-import { Sortable } from "sortablejs";
-import ClipboardJS from "clipboard";
-import Default from "md-editor-v3";
+import { httpGet, httpPost } from '@/utils/http'
+import { dateFormat, removeArrayItem, substr } from '@/utils/libs'
+import { DocumentCopy, InfoFilled, Plus, Search } from '@element-plus/icons-vue'
+import ClipboardJS from 'clipboard'
+import { ElMessage } from 'element-plus'
+import { Sortable } from 'sortablejs'
+import { onMounted, onUnmounted, reactive, ref } from 'vue'

 // 变量定义
-const items = ref([]);
-const query = ref({ name: "" });
-const item = ref({});
-const showDialog = ref(false);
-const title = ref("");
+const items = ref([])
+const query = ref({ name: '' })
+const item = ref({})
+const showDialog = ref(false)
+const title = ref('')
 const rules = reactive({
-  type: [{ required: true, message: "请选择模型类型", trigger: "change" }],
-  name: [{ required: true, message: "请输入模型名称", trigger: "change" }],
-  value: [{ required: true, message: "请输入模型值", trigger: "change" }],
-  power: [{ required: true, message: "请输入消耗算力", trigger: "change" }],
-});
-const loading = ref(true);
-const formRef = ref(null);
+  type: [{ required: true, message: '请选择模型类型', trigger: 'change' }],
+  name: [{ required: true, message: '请输入模型名称', trigger: 'change' }],
+  value: [{ required: true, message: '请输入模型值', trigger: 'change' }],
+  power: [{ required: true, message: '请输入消耗算力', trigger: 'change' }],
+})
+const loading = ref(true)
+const formRef = ref(null)
 const type = ref([
-  { label: "聊天", value: "chat" },
-  { label: "绘图", value: "img" },
-  { label: "语音", value: "tts" },
-]);
+  { label: '聊天', value: 'chat' },
+  { label: '绘图', value: 'img' },
+  { label: '语音', value: 'tts' },
+])

 const voices = ref([
-  { label: "Echo", value: "echo" },
-  { label: "Fable", value: "fable" },
-  { label: "Onyx", value: "onyx" },
-  { label: "Nova", value: "nova" },
-  { label: "Shimmer", value: "shimmer" },
-]);
+  { label: 'Echo', value: 'echo' },
+  { label: 'Fable', value: 'fable' },
+  { label: 'Onyx', value: 'onyx' },
+  { label: 'Nova', value: 'nova' },
+  { label: 'Shimmer', value: 'shimmer' },
+])

 // 获取 API KEY
-const apiKeys = ref([]);
-httpGet("/api/admin/apikey/list")
+const apiKeys = ref([])
+httpGet('/api/admin/apikey/list')
  .then((res) => {
-    apiKeys.value = res.data;
+    apiKeys.value = res.data
  })
  .catch((e) => {
-    ElMessage.error("获取 API KEY 失败：" + e.message);
-  });
+    ElMessage.error('获取 API KEY 失败：' + e.message)
+  })

 // 获取数据
 const fetchData = () => {
-  httpGet("/api/admin/model/list", query.value)
+  httpGet('/api/admin/model/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 clipboard = ref(null);
+const clipboard = ref(null)
 onMounted(() => {
-  fetchData();
-  const drawBodyWrapper = document.querySelector(".el-table__body tbody");
+  fetchData()
+  const drawBodyWrapper = document.querySelector('.el-table__body tbody')

  // 初始化拖动排序插件
  Sortable.create(drawBodyWrapper, {
@@ -252,94 +291,104 @@ onMounted(() => {
    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);
-        items.value[index].sort_num = index + 1;
-      });
+        ids.push(parseInt(id))
+        sorts.push(index + 1)
+        items.value[index].sort_num = index + 1
+      })

-      httpPost("/api/admin/model/sort", { ids: ids, sorts: sorts })
+      httpPost('/api/admin/model/sort', { ids: ids, sorts: sorts })
        .then(() => {})
        .catch((e) => {
-          ElMessage.error("排序失败：" + e.message);
-        });
+          ElMessage.error('排序失败：' + e.message)
+        })
    },
-  });
+  })

-  clipboard.value = new ClipboardJS(".copy-model");
-  clipboard.value.on("success", () => {
-    ElMessage.success("复制成功！");
-  });
+  clipboard.value = new ClipboardJS('.copy-model')
+  clipboard.value.on('success', () => {
+    ElMessage.success('复制成功！')
+  })

-  clipboard.value.on("error", () => {
-    ElMessage.error("复制失败！");
-  });
-});
+  clipboard.value.on('error', () => {
+    ElMessage.error('复制失败！')
+  })
+})

 onUnmounted(() => {
-  clipboard.value.destroy();
-});
+  clipboard.value.destroy()
+})

 const add = function () {
-  title.value = "新增模型";
-  showDialog.value = true;
-  item.value = { enabled: true, power: 1, open: true, max_tokens: 1024, max_context: 8192, temperature: 0.9, options: {} };
-};
+  title.value = '新增模型'
+  showDialog.value = true
+  item.value = {
+    enabled: true,
+    power: 1,
+    open: true,
+    description: '',
+    max_tokens: 1024,
+    max_context: 8192,
+    temperature: 0.9,
+  }
+}

 const edit = function (row) {
-  title.value = "修改模型";
-  showDialog.value = true;
-  item.value = row;
-};
+  title.value = '修改模型'
+  showDialog.value = true
+  item.value = row
+}

 const save = function () {
  formRef.value.validate((valid) => {
-    item.value.temperature = parseFloat(item.value.temperature);
+    item.value.temperature = parseFloat(item.value.temperature)
    if (valid) {
-      showDialog.value = false;
-      item.value.key_id = parseInt(item.value.key_id);
-      httpPost("/api/admin/model/save", item.value)
+      showDialog.value = false
+      item.value.key_id = parseInt(item.value.key_id)
+      httpPost('/api/admin/model/save', item.value)
        .then(() => {
-          ElMessage.success("操作成功！");
-          fetchData();
+          ElMessage.success('操作成功！')
+          fetchData()
        })
        .catch((e) => {
-          ElMessage.error("操作失败，" + e.message);
-        });
+          ElMessage.error('操作失败，' + e.message)
+        })
    } else {
-      return false;
+      return false
    }
-  });
-};
+  })
+}

 const modelSet = (filed, row) => {
-  httpPost("/api/admin/model/set", { id: row.id, filed: filed, value: row[filed] })
+  httpPost('/api/admin/model/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 remove = function (row) {
-  httpGet("/api/admin/model/remove?id=" + row.id)
+  httpGet('/api/admin/model/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)
+    })
+}
 </script>

 <style lang="stylus" scoped>
@@ -361,6 +410,13 @@ const remove = function (row) {
    }
  }

+  .description-cell {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 160px;
+  }
+
  .el-select {
    width: 100%
  }
--- a/web/src/views/admin/Login.vue
+++ b/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
--- a/web/src/views/mobile/ChatSession.vue
+++ b/web/src/views/mobile/ChatSession.vue
@@ -20,14 +20,33 @@
        </template>
      </van-nav-bar>

-      <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="shareOptions" @select="shareChat" />
+      <van-share-sheet
+        v-model:show="showShare"
+        title="立即分享给好友"
+        :options="shareOptions"
+        @select="shareChat"
+      />

      <div class="chat-list-wrapper">
        <div id="message-list-box" :style="{ height: winHeight + 'px' }" class="message-list-box">
-          <van-list v-model:error="error" :finished="finished" error-text="请求失败，点击重新加载" @load="onLoad">
+          <van-list
+            v-model:error="error"
+            :finished="finished"
+            error-text="请求失败，点击重新加载"
+            @load="onLoad"
+          >
            <van-cell v-for="item in chatData" :key="item" :border="false" class="message-line">
-              <chat-prompt v-if="item.type === 'prompt'" :content="item.content" :icon="item.icon" />
-              <chat-reply v-else-if="item.type === 'reply'" :content="item.content" :icon="item.icon" :org-content="item.orgContent" />
+              <chat-prompt
+                v-if="item.type === 'prompt'"
+                :content="item.content"
+                :icon="item.icon"
+              />
+              <chat-reply
+                v-else-if="item.type === 'reply'"
+                :content="item.content"
+                :icon="item.icon"
+                :org-content="item.orgContent"
+              />
            </van-cell>
          </van-list>
        </div>
@@ -61,7 +80,9 @@
      </div>
    </div>

-    <button id="copy-link-btn" style="display: none" :data-clipboard-text="url">复制链接地址</button>
+    <button id="copy-link-btn" style="display: none" :data-clipboard-text="url">
+      复制链接地址
+    </button>

    <!--    <van-overlay :show="showMic" z-index="100">-->
    <!--      <div class="mic-wrapper">-->
@@ -78,10 +99,14 @@
  </div>

  <van-popup v-model:show="showPicker" position="bottom" class="popup">
-    <van-picker :columns="columns" v-model="selectedValues"
-                title="选择模型和角色"
-                @change="onChange"
-                @cancel="showPicker = false" @confirm="newChat">
+    <van-picker
+      :columns="columns"
+      v-model="selectedValues"
+      title="选择模型和角色"
+      @change="onChange"
+      @cancel="showPicker = false"
+      @confirm="newChat"
+    >
      <template #option="item">
        <div class="picker-option">
          <van-image v-if="item.icon" :src="item.icon" fit="cover" round />
@@ -93,439 +118,359 @@
 </template>

 <script setup>
-import { nextTick, onMounted, onUnmounted, ref, watch } from "vue";
-import { showImagePreview, showNotify, showToast } from "vant";
-import { useRouter } from "vue-router";
-import { processContent, randString, renderInputText, UUID } from "@/utils/libs";
-import { httpGet } from "@/utils/http";
-import hl from "highlight.js";
-import "highlight.js/styles/a11y-dark.css";
-import ChatPrompt from "@/components/mobile/ChatPrompt.vue";
-import ChatReply from "@/components/mobile/ChatReply.vue";
-import { checkSession, getClientId } from "@/store/cache";
-import Clipboard from "clipboard";
-import { showMessageError } from "@/utils/dialog";
-import { useSharedStore } from "@/store/sharedata";
-import emoji from "markdown-it-emoji";
-import mathjaxPlugin from "markdown-it-mathjax3";
-import MarkdownIt from "markdown-it";
-const winHeight = ref(0);
-const navBarRef = ref(null);
-const bottomBarRef = ref(null);
-const router = useRouter();
+import ChatPrompt from '@/components/mobile/ChatPrompt.vue'
+import ChatReply from '@/components/mobile/ChatReply.vue'
+import { checkSession, getClientId } from '@/store/cache'
+import { useSharedStore } from '@/store/sharedata'
+import { showMessageError } from '@/utils/dialog'
+import { httpGet } from '@/utils/http'
+import { processContent, randString, renderInputText, UUID } from '@/utils/libs'
+import Clipboard from 'clipboard'
+import hl from 'highlight.js'
+import 'highlight.js/styles/a11y-dark.css'
+import MarkdownIt from 'markdown-it'
+import emoji from 'markdown-it-emoji'
+import mathjaxPlugin from 'markdown-it-mathjax3'
+import { showImagePreview, showNotify, showToast } from 'vant'
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+const winHeight = ref(0)
+const navBarRef = ref(null)
+const bottomBarRef = ref(null)
+const router = useRouter()

-const roles = ref([]);
-const roleId = ref(parseInt(router.currentRoute.value.query["role_id"]));
-const role = ref({});
-const models = ref([]);
-const modelId = ref(parseInt(router.currentRoute.value.query["model_id"]));
-const modelValue = ref("");
-const title = ref(router.currentRoute.value.query["title"]);
-const chatId = ref(router.currentRoute.value.query["chat_id"]);
-const loginUser = ref(null);
+const roles = ref([])
+const roleId = ref(parseInt(router.currentRoute.value.query['role_id']))
+const role = ref({})
+const models = ref([])
+const modelId = ref(parseInt(router.currentRoute.value.query['model_id']))
+const modelValue = ref('')
+const title = ref(router.currentRoute.value.query['title'])
+const chatId = ref(router.currentRoute.value.query['chat_id'])
+const loginUser = ref(null)
 // const showMic = ref(false)
-const showPicker = ref(false);
-const columns = ref([roles.value, models.value]);
-const selectedValues = ref([roleId.value, modelId.value]);
+const showPicker = ref(false)
+const columns = ref([roles.value, models.value])
+const selectedValues = ref([roleId.value, modelId.value])

 checkSession()
  .then((user) => {
-    loginUser.value = user;
+    loginUser.value = user
  })
  .catch(() => {
-    router.push("/login");
-  });
+    router.push('/login')
+  })

 const loadModels = () => {
  // 加载模型
-  httpGet("/api/model/list")
+  httpGet('/api/model/list')
    .then((res) => {
-      models.value = res.data;
+      models.value = res.data
      if (!modelId.value) {
-        modelId.value = models.value[0].id;
+        modelId.value = models.value[0].id
      }
      for (let i = 0; i < models.value.length; i++) {
-        models.value[i].text = models.value[i].name;
-        models.value[i].mValue = models.value[i].value;
-        models.value[i].value = models.value[i].id;
+        models.value[i].text = models.value[i].name
+        models.value[i].mValue = models.value[i].value
+        models.value[i].value = models.value[i].id
      }
-      modelValue.value = getModelName(modelId.value);
+      modelValue.value = getModelName(modelId.value)
      // 加载角色列表
      httpGet(`/api/app/list/user`, { id: roleId.value })
        .then((res) => {
-          roles.value = res.data;
+          roles.value = res.data
          if (!roleId.value) {
-            roleId.value = roles.value[0]["id"];
+            roleId.value = roles.value[0]['id']
          }
          // build data for role picker
          for (let i = 0; i < roles.value.length; i++) {
-            roles.value[i].text = roles.value[i].name;
-            roles.value[i].value = roles.value[i].id;
-            roles.value[i].helloMsg = roles.value[i].hello_msg;
+            roles.value[i].text = roles.value[i].name
+            roles.value[i].value = roles.value[i].id
+            roles.value[i].helloMsg = roles.value[i].hello_msg
          }
-          role.value = getRoleById(roleId.value);
-          columns.value = [roles.value, models.value];
-          selectedValues.value = [roleId.value, modelId.value];
-          loadChatHistory();
+          role.value = getRoleById(roleId.value)
+          columns.value = [roles.value, models.value]
+          selectedValues.value = [roleId.value, modelId.value]
+          loadChatHistory()
        })
        .catch((e) => {
-          showNotify({ type: "danger", message: "获取聊天角色失败: " + e.messages });
-        });
+          showNotify({ type: 'danger', message: '获取聊天角色失败: ' + e.messages })
+        })
    })
    .catch((e) => {
-      showNotify({ type: "danger", message: "加载模型失败: " + e.message });
-    });
-};
+      showNotify({ type: 'danger', message: '加载模型失败: ' + e.message })
+    })
+}
 if (chatId.value) {
  httpGet(`/api/chat/detail?chat_id=${chatId.value}`)
    .then((res) => {
-      title.value = res.data.title;
-      modelId.value = res.data.model_id;
-      roleId.value = res.data.role_id;
-      loadModels();
+      title.value = res.data.title
+      modelId.value = res.data.model_id
+      roleId.value = res.data.role_id
+      loadModels()
    })
    .catch(() => {
-      loadModels();
-    });
+      loadModels()
+    })
 } else {
-  title.value = "新建对话";
-  chatId.value = UUID();
-  loadModels();
+  title.value = '新建对话'
+  chatId.value = UUID()
+  loadModels()
 }

-const chatData = ref([]);
-const loading = ref(false);
-const finished = ref(false);
-const error = ref(false);
-const store = useSharedStore();
-const url = ref(location.protocol + "//" + location.host + "/mobile/chat/export?chat_id=" + chatId.value);
+const chatData = ref([])
+const loading = ref(false)
+const finished = ref(false)
+const error = ref(false)
+const store = useSharedStore()
+const url = ref(
+  location.protocol + '//' + location.host + '/mobile/chat/export?chat_id=' + chatId.value
+)
 const md = new MarkdownIt({
  breaks: true,
  html: true,
  linkify: true,
  typographer: true,
  highlight: function (str, lang) {
-    const codeIndex = parseInt(Date.now()) + Math.floor(Math.random() * 10000000);
+    const codeIndex = parseInt(Date.now()) + Math.floor(Math.random() * 10000000)
    // 显示复制代码按钮
    const copyBtn = `<span class="copy-code-mobile" data-clipboard-action="copy" data-clipboard-target="#copy-target-${codeIndex}">复制</span>
 <textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy-target-${codeIndex}">${str.replace(
      /<\/textarea>/g,
-      "&lt;/textarea>"
-    )}</textarea>`;
+      '&lt;/textarea>'
+    )}</textarea>`
    if (lang && hl.getLanguage(lang)) {
-      const langHtml = `<span class="lang-name">${lang}</span>`;
+      const langHtml = `<span class="lang-name">${lang}</span>`
      // 处理代码高亮
-      const preCode = hl.highlight(lang, str, true).value;
+      const preCode = hl.highlight(lang, str, true).value
      // 将代码包裹在 pre 中
-      return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn} ${langHtml}</pre>`;
+      return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn} ${langHtml}</pre>`
    }

    // 处理代码高亮
-    const preCode = md.utils.escapeHtml(str);
+    const preCode = md.utils.escapeHtml(str)
    // 将代码包裹在 pre 中
-    return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn}</pre>`;
+    return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn}</pre>`
  },
-});
-md.use(mathjaxPlugin);
-md.use(emoji);
+})
+md.use(mathjaxPlugin)
+md.use(emoji)
 onMounted(() => {
-  winHeight.value = window.innerHeight - navBarRef.value.$el.offsetHeight - bottomBarRef.value.$el.offsetHeight - 70;
+  winHeight.value =
+    window.innerHeight - navBarRef.value.$el.offsetHeight - bottomBarRef.value.$el.offsetHeight - 70

-  const clipboard = new Clipboard(".content-mobile,.copy-code-mobile,#copy-link-btn");
-  clipboard.on("success", (e) => {
-    e.clearSelection();
-    showNotify({ type: "success", message: "复制成功", duration: 1000 });
-  });
-  clipboard.on("error", () => {
-    showNotify({ type: "danger", message: "复制失败", duration: 2000 });
-  });
+  const clipboard = new Clipboard('.content-mobile,.copy-code-mobile,#copy-link-btn')
+  clipboard.on('success', (e) => {
+    e.clearSelection()
+    showNotify({ type: 'success', message: '复制成功', duration: 1000 })
+  })
+  clipboard.on('error', () => {
+    showNotify({ type: 'danger', message: '复制失败', duration: 2000 })
+  })

-  store.addMessageHandler("chat", (data) => {
-    if (data.channel !== "chat" || data.clientId !== getClientId()) {
-      return;
+  store.addMessageHandler('chat', (data) => {
+    if (data.channel !== 'chat' || data.clientId !== getClientId()) {
+      return
    }

-    if (data.type === "error") {
-      showMessageError(data.body);
-      return;
+    if (data.type === 'error') {
+      showMessageError(data.body)
+      return
    }

    if (isNewMsg.value) {
-      chatData.value.push({
-        type: "reply",
-        id: randString(32),
-        icon: role.value.icon,
-        content: data.body,
-      });
      if (!title.value) {
-        title.value = previousText.value;
+        title.value = previousText.value
      }
-      lineBuffer.value = data.body;
-      isNewMsg.value = false;
-    } else if (data.type === "end") {
+      lineBuffer.value = data.body
+      isNewMsg.value = false
+      const reply = chatData.value[chatData.value.length - 1]
+      if (reply) {
+        reply['content'] = lineBuffer.value
+      }
+    } else if (data.type === 'end') {
      // 消息接收完毕
-      enableInput();
-      lineBuffer.value = ""; // 清空缓冲
-      isNewMsg.value = true;
+      enableInput()
+      lineBuffer.value = '' // 清空缓冲
+      isNewMsg.value = true
    } else {
-      lineBuffer.value += data.body;
-      const reply = chatData.value[chatData.value.length - 1];
-      reply["orgContent"] = lineBuffer.value;
-      reply["content"] = md.render(processContent(lineBuffer.value));
+      lineBuffer.value += data.body
+      const reply = chatData.value[chatData.value.length - 1]
+      reply['orgContent'] = lineBuffer.value
+      reply['content'] = md.render(processContent(lineBuffer.value))

      nextTick(() => {
-        hl.configure({ ignoreUnescapedHTML: true });
-        const lines = document.querySelectorAll(".message-line");
-        const blocks = lines[lines.length - 1].querySelectorAll("pre code");
+        hl.configure({ ignoreUnescapedHTML: true })
+        const lines = document.querySelectorAll('.message-line')
+        const blocks = lines[lines.length - 1].querySelectorAll('pre code')
        blocks.forEach((block) => {
-          hl.highlightElement(block);
-        });
-        scrollListBox();
+          hl.highlightElement(block)
+        })
+        scrollListBox()

-        const items = document.querySelectorAll(".message-line");
-        const imgs = items[items.length - 1].querySelectorAll("img");
+        const items = document.querySelectorAll('.message-line')
+        const imgs = items[items.length - 1].querySelectorAll('img')
        for (let i = 0; i < imgs.length; i++) {
          if (!imgs[i].src) {
-            continue;
+            continue
          }
-          imgs[i].addEventListener("click", (e) => {
-            e.stopPropagation();
-            showImagePreview([imgs[i].src]);
-          });
+          imgs[i].addEventListener('click', (e) => {
+            e.stopPropagation()
+            showImagePreview([imgs[i].src])
+          })
        }
-      });
+      })
    }
-  });
-});
+  })
+})

 onUnmounted(() => {
-  store.removeMessageHandler("chat");
-});
+  store.removeMessageHandler('chat')
+})

 const newChat = (item) => {
-  showPicker.value = false;
-  const options = item.selectedOptions;
-  roleId.value = options[0].value;
-  modelId.value = options[1].value;
-  modelValue.value = getModelName(modelId.value);
-  chatId.value = UUID();
-  chatData.value = [];
-  role.value = getRoleById(roleId.value);
-  title.value = "新建对话";
-  loadChatHistory();
-};
+  showPicker.value = false
+  const options = item.selectedOptions
+  roleId.value = options[0].value
+  modelId.value = options[1].value
+  modelValue.value = getModelName(modelId.value)
+  chatId.value = UUID()
+  chatData.value = []
+  role.value = getRoleById(roleId.value)
+  title.value = '新建对话'
+  loadChatHistory()
+}

 const onLoad = () => {
  // checkSession().then(() => {
  //   connect()
  // }).catch(() => {
  // })
-};
+}

 const loadChatHistory = () => {
-  httpGet("/api/chat/history?chat_id=" + chatId.value)
+  httpGet('/api/chat/history?chat_id=' + chatId.value)
    .then((res) => {
-      const role = getRoleById(roleId.value);
+      const role = getRoleById(roleId.value)
      // 加载状态结束
-      finished.value = true;
-      const data = res.data;
+      finished.value = true
+      const data = res.data
      if (data.length === 0) {
        chatData.value.push({
-          type: "reply",
+          type: 'reply',
          id: randString(32),
          icon: role.icon,
          content: role.hello_msg,
          orgContent: role.hello_msg,
-        });
-        return;
+        })
+        return
      }

      for (let i = 0; i < data.length; i++) {
-        if (data[i].type === "prompt") {
-          chatData.value.push(data[i]);
-          continue;
+        if (data[i].type === 'prompt') {
+          chatData.value.push(data[i])
+          continue
        }

-        data[i].orgContent = data[i].content;
-        data[i].content = md.render(processContent(data[i].content));
-        chatData.value.push(data[i]);
+        data[i].orgContent = data[i].content
+        data[i].content = md.render(processContent(data[i].content))
+        chatData.value.push(data[i])
      }

      nextTick(() => {
-        hl.configure({ ignoreUnescapedHTML: true });
-        const blocks = document.querySelector("#message-list-box").querySelectorAll("pre code");
+        hl.configure({ ignoreUnescapedHTML: true })
+        const blocks = document.querySelector('#message-list-box').querySelectorAll('pre code')
        blocks.forEach((block) => {
-          hl.highlightElement(block);
-        });
+          hl.highlightElement(block)
+        })

-        scrollListBox();
-      });
+        scrollListBox()
+      })
    })
    .catch(() => {
-      error.value = true;
-    });
-};
+      error.value = true
+    })
+}

 // 创建 socket 连接
-const prompt = ref("");
-const showStopGenerate = ref(false); // 停止生成
-const showReGenerate = ref(false); // 重新生成
-const previousText = ref(""); // 上一次提问
-const lineBuffer = ref(""); // 输出缓冲行
-const canSend = ref(true);
-const isNewMsg = ref(true);
-const stream = ref(store.chatStream);
+const prompt = ref('')
+const showStopGenerate = ref(false) // 停止生成
+const showReGenerate = ref(false) // 重新生成
+const previousText = ref('') // 上一次提问
+const lineBuffer = ref('') // 输出缓冲行
+const canSend = ref(true)
+const isNewMsg = ref(true)
+const stream = ref(store.chatStream)
 watch(
  () => store.chatStream,
  (newValue) => {
-    stream.value = newValue;
+    stream.value = newValue
  }
-);
-// const connect = function () {
-//   // 初始化 WebSocket 对象
-//   const _sessionId = getSessionId();
-//   let host = process.env.VUE_APP_WS_HOST
-//   if (host === '') {
-//     if (location.protocol === 'https:') {
-//       host = 'wss://' + location.host;
-//     } else {
-//       host = 'ws://' + location.host;
-//     }
-//   }
-//   const _socket = new WebSocket(host + `/api/chat/new?session_id=${_sessionId}&role_id=${roleId.value}&chat_id=${chatId.value}&model_id=${modelId.value}&token=${getUserToken()}`);
-//   _socket.addEventListener('open', () => {
-//     loading.value = false
-//     previousText.value = '';
-//     canSend.value = true;
-//
-//     if (loadHistory.value) { // 加载历史消息
-//      loadChatHistory()
-//     }
-//   });
-//
-//   _socket.addEventListener('message', event => {
-//     if (event.data instanceof Blob) {
-//       const reader = new FileReader();
-//       reader.readAsText(event.data, "UTF-8");
-//       reader.onload = () => {
-//         const data = JSON.parse(String(reader.result));
-//         if (data.type === 'error') {
-//           showMessageError(data.message)
-//           return
-//         }
-//
-//         if (isNewMsg.value && data.type !== 'end') {
-//           chatData.value.push({
-//             type: "reply",
-//             id: randString(32),
-//             icon: role.value.icon,
-//             content: data.content
-//           });
-//           if (!title.value) {
-//             title.value = previousText.value
-//           }
-//           lineBuffer.value = data.content;
-//           isNewMsg.value = false
-//         } else if (data.type === 'end') { // 消息接收完毕
-//           enableInput()
-//           lineBuffer.value = ''; // 清空缓冲
-//           isNewMsg.value = true
-//         } else {
-//           lineBuffer.value += data.content;
-//           const reply = chatData.value[chatData.value.length - 1]
-//           reply['orgContent'] = lineBuffer.value;
-//           reply['content'] = md.render(processContent(lineBuffer.value));
-//
-//           nextTick(() => {
-//             hl.configure({ignoreUnescapedHTML: true})
-//             const lines = document.querySelectorAll('.message-line');
-//             const blocks = lines[lines.length - 1].querySelectorAll('pre code');
-//             blocks.forEach((block) => {
-//               hl.highlightElement(block)
-//             })
-//             scrollListBox()
-//
-//             const items = document.querySelectorAll('.message-line')
-//             const imgs = items[items.length - 1].querySelectorAll('img')
-//             for (let i = 0; i < imgs.length; i++) {
-//               if (!imgs[i].src) {
-//                 continue
-//               }
-//               imgs[i].addEventListener('click', (e) => {
-//                 e.stopPropagation()
-//                 showImagePreview([imgs[i].src]);
-//               })
-//             }
-//           })
-//         }
-//
-//       };
-//     }
-//
-//   });
-//
-//   _socket.addEventListener('close', () => {
-//     // 停止发送消息
-//     canSend.value = true
-//     loadHistory.value = false
-//     // 重连
-//     connect()
-//   });
-//
-//   socket.value = _socket;
-// }
+)

 const disableInput = (force) => {
-  canSend.value = false;
-  showReGenerate.value = false;
-  showStopGenerate.value = !force;
-};
+  canSend.value = false
+  showReGenerate.value = false
+  showStopGenerate.value = !force
+}

 const enableInput = () => {
-  canSend.value = true;
-  showReGenerate.value = previousText.value !== "";
-  showStopGenerate.value = false;
-};
+  canSend.value = true
+  showReGenerate.value = previousText.value !== ''
+  showStopGenerate.value = false
+}

 // 将聊天框的滚动条滑动到最底部
 const scrollListBox = () => {
-  document.getElementById("message-list-box").scrollTo(0, document.getElementById("message-list-box").scrollHeight + 46);
-};
+  document
+    .getElementById('message-list-box')
+    .scrollTo(0, document.getElementById('message-list-box').scrollHeight + 46)
+}

 const sendMessage = () => {
  if (canSend.value === false) {
-    showToast("AI 正在作答中，请稍后...");
-    return;
+    showToast('AI 正在作答中，请稍后...')
+    return
  }

  if (store.socket.conn.readyState !== WebSocket.OPEN) {
-    showToast("连接断开，正在重连...");
-    return;
+    showToast('连接断开，正在重连...')
+    return
  }

  if (prompt.value.trim().length === 0) {
-    showToast("请输入需要 AI 回答的问题");
-    return false;
+    showToast('请输入需要 AI 回答的问题')
+    return false
  }

  // 追加消息
  chatData.value.push({
-    type: "prompt",
+    type: 'prompt',
    id: randString(32),
    icon: loginUser.value.avatar,
    content: renderInputText(prompt.value),
    created_at: new Date().getTime(),
-  });
+  })
+  // 添加空回复消息
+  const _role = getRoleById(roleId.value)
+  chatData.value.push({
+    chat_id: chatId,
+    role_id: roleId.value,
+    type: 'reply',
+    id: randString(32),
+    icon: _role['icon'],
+    content: '',
+  })

  nextTick(() => {
-    scrollListBox();
-  });
+    scrollListBox()
+  })

-  disableInput(false);
+  disableInput(false)
  store.socket.conn.send(
    JSON.stringify({
-      channel: "chat",
-      type: "text",
+      channel: 'chat',
+      type: 'text',
      body: {
        role_id: roleId.value,
        model_id: modelId.value,
@@ -534,33 +479,33 @@ const sendMessage = () => {
        stream: stream.value,
      },
    })
-  );
-  previousText.value = prompt.value;
-  prompt.value = "";
-  return true;
-};
+  )
+  previousText.value = prompt.value
+  prompt.value = ''
+  return true
+}

 const stopGenerate = () => {
-  showStopGenerate.value = false;
-  httpGet("/api/chat/stop?session_id=" + getClientId()).then(() => {
-    enableInput();
-  });
-};
+  showStopGenerate.value = false
+  httpGet('/api/chat/stop?session_id=' + getClientId()).then(() => {
+    enableInput()
+  })
+}

 const reGenerate = () => {
-  disableInput(false);
-  const text = "重新生成上述问题的答案：" + previousText.value;
+  disableInput(false)
+  const text = '重新生成上述问题的答案：' + previousText.value
  // 追加消息
  chatData.value.push({
-    type: "prompt",
+    type: 'prompt',
    id: randString(32),
    icon: loginUser.value.avatar,
    content: renderInputText(text),
-  });
+  })
  store.socket.conn.send(
    JSON.stringify({
-      channel: "chat",
-      type: "text",
+      channel: 'chat',
+      type: 'text',
      body: {
        role_id: roleId.value,
        model_id: modelId.value,
@@ -569,44 +514,52 @@ const reGenerate = () => {
        stream: stream.value,
      },
    })
-  );
-};
+  )
+}

-const showShare = ref(false);
+const showShare = ref(false)
 const shareOptions = [
-  { name: "微信", icon: "wechat" },
-  { name: "复制链接", icon: "link" },
-];
+  { name: '微信', icon: 'wechat' },
+  { name: '复制链接', icon: 'link' },
+]
 const shareChat = (option) => {
-  showShare.value = false;
-  if (option.icon === "wechat") {
-    showToast({ message: "当前会话已经导出，请通过浏览器或者微信的自带分享功能分享给好友", duration: 5000 });
+  showShare.value = false
+  if (option.icon === 'wechat') {
+    showToast({
+      message: '当前会话已经导出，请通过浏览器或者微信的自带分享功能分享给好友',
+      duration: 5000,
+    })
    router.push({
-      path: "/mobile/chat/export",
-      query: { title: title.value, chat_id: chatId.value, role: role.value.name, model: modelValue.value },
-    });
-  } else if (option.icon === "link") {
-    document.getElementById("copy-link-btn").click();
+      path: '/mobile/chat/export',
+      query: {
+        title: title.value,
+        chat_id: chatId.value,
+        role: role.value.name,
+        model: modelValue.value,
+      },
+    })
+  } else if (option.icon === 'link') {
+    document.getElementById('copy-link-btn').click()
  }
-};
+}

 const getRoleById = function (rid) {
  for (let i = 0; i < roles.value.length; i++) {
-    if (roles.value[i]["id"] === rid) {
-      return roles.value[i];
+    if (roles.value[i]['id'] === rid) {
+      return roles.value[i]
    }
  }
-  return null;
-};
+  return null
+}

 const getModelName = (model_id) => {
  for (let i = 0; i < models.value.length; i++) {
    if (models.value[i].id === model_id) {
-      return models.value[i].text;
+      return models.value[i].text
    }
  }
-  return "";
-};
+  return ''
+}

 // // eslint-disable-next-line no-undef
 // const recognition = new webkitSpeechRecognition() || SpeechRecognition();
@@ -638,11 +591,11 @@ const onChange = (item) => {
  const selectedValues = item.selectedOptions
  if (selectedValues[0].model_id) {
    for (let i = 0; i < columns.value[1].length; i++) {
-      columns.value[1][i].disabled = columns.value[1][i].value !== selectedValues[0].model_id;
+      columns.value[1][i].disabled = columns.value[1][i].value !== selectedValues[0].model_id
    }
  } else {
    for (let i = 0; i < columns.value[1].length; i++) {
-      columns.value[1][i].disabled = false;
+      columns.value[1][i].disabled = false
    }
  }
 }