From b1ddcef593b36ba5cb8b2a4c53ef714311072469 Mon Sep 17 00:00:00 2001
From: GeekMaster <yangjian102621@gmail.com>
Date: Mon, 26 May 2025 14:14:29 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=BF=E6=8D=A2=20vite=20=E6=9E=B6=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/.env.development                        |  26 +-
 web/.env.production                         |  16 +-
 web/package.json                            |   5 +-
 web/src/App.vue                             | 117 +++----
 web/src/components/FooterBar.vue            |  44 +--
 web/src/components/LoginDialog.vue          | 311 +++++++++++--------
 web/src/components/RealtimeConversation.vue | 280 +++++++++--------
 web/src/components/Welcome.vue              |  64 ++--
 web/src/components/admin/AdminHeader.vue    | 114 +++----
 web/src/store/session.js                    |  28 +-
 web/src/store/system.js                     |  60 ++--
 web/src/views/Home.vue                      |   2 +-
 web/src/views/Index.vue                     |   6 +-
 web/src/views/Login.vue                     |   4 +-
 web/src/views/Luma.vue                      | 320 +++++++++++---------
 web/src/views/Member.vue                    | 221 ++++++++------
 web/src/views/Suno.vue                      |  30 +-
 web/src/views/admin/Login.vue               |   4 +-
 web/src/views/mobile/Index.vue              |   2 +-
 web/vite.config.js                          |  65 ++--
 20 files changed, 937 insertions(+), 782 deletions(-)

diff --git a/web/.env.development b/web/.env.development
index d681c62c..058389fa 100644
--- a/web/.env.development
+++ b/web/.env.development
@@ -1,14 +1,14 @@
-VUE_APP_API_HOST=http://localhost:5678
-VUE_APP_WS_HOST=ws://localhost:5678
-VUE_APP_USER=18888888888
-VUE_APP_PASS=12345678
-VUE_APP_ADMIN_USER=admin
-VUE_APP_ADMIN_PASS=admin123
-VUE_APP_KEY_PREFIX=GeekAI_DEV_
-VUE_APP_TITLE="Geek-AI 创作系统"
-VUE_APP_VERSION=v4.2.3
-VUE_APP_DOCS_URL=https://docs.geekai.me
-VUE_APP_GITHUB_URL=https://github.com/yangjian102621/geekai
-VUE_APP_GITEE_URL=https://gitee.com/blackfox/geekai
-VUE_APP_GITCODE_URL=https://gitcode.com/yangjian102621/geekai
+VITE_API_HOST=http://localhost:5678
+VITE_WS_HOST=ws://localhost:5678
+VITE_USER=18888888888
+VITE_PASS=12345678
+VITE_ADMIN_USER=admin
+VITE_ADMIN_PASS=admin123
+VITE_KEY_PREFIX=GeekAI_DEV_
+VITE_TITLE="Geek-AI 创作系统"
+VITE_VERSION=v4.2.4
+VITE_DOCS_URL=https://docs.geekai.me
+VITE_GITHUB_URL=https://github.com/yangjian102621/geekai
+VITE_GITEE_URL=https://gitee.com/blackfox/geekai
+VITE_GITCODE_URL=https://gitcode.com/yangjian102621/geekai
 
diff --git a/web/.env.production b/web/.env.production
index fc958bd2..a3b495e0 100644
--- a/web/.env.production
+++ b/web/.env.production
@@ -1,8 +1,8 @@
-VUE_APP_API_HOST=
-VUE_APP_WS_HOST=
-VUE_APP_KEY_PREFIX=GeekAI_
-VUE_APP_VERSION=v4.2.3
-VUE_APP_DOCS_URL=https://docs.geekai.me
-VUE_APP_GITHUB_URL=https://github.com/yangjian102621/geekai
-VUE_APP_GITEE_URL=https://gitee.com/blackfox/geekai
-VUE_APP_GITCODE_URL=https://gitcode.com/yangjian102621/geekai
+VITE_API_HOST=
+VITE_WS_HOST=
+VITE_KEY_PREFIX=GeekAI_
+VITE_VERSION=v4.2.4
+VITE_DOCS_URL=https://docs.geekai.me
+VITE_GITHUB_URL=https://github.com/yangjian102621/geekai
+VITE_GITEE_URL=https://gitee.com/blackfox/geekai
+VITE_GITCODE_URL=https://gitcode.com/yangjian102621/geekai
diff --git a/web/package.json b/web/package.json
index 89d41986..90d2fb33 100644
--- a/web/package.json
+++ b/web/package.json
@@ -50,14 +50,11 @@
     "@babel/eslint-parser": "^7.12.16",
     "@vitejs/plugin-vue": "^5.2.4",
     "autoprefixer": "^10.4.20",
-    "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^8.0.3",
     "postcss": "^8.4.49",
     "stylus": "^0.58.1",
     "stylus-loader": "^7.0.0",
     "tailwindcss": "^3.4.17",
-    "vite": "^6.3.5",
-    "webpack": "^5.90.3"
+    "vite": "^5.4.10"
   },
   "eslintConfig": {
     "root": true,
diff --git a/web/src/App.vue b/web/src/App.vue
index c0d638c1..0b026747 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -5,93 +5,93 @@
 </template>
 
 <script setup>
-import { ElConfigProvider } from "element-plus";
-import { onMounted, ref, watch } from "vue";
-import { checkSession, getClientId, getSystemInfo } from "@/store/cache";
-import { isChrome, isMobile } from "@/utils/libs";
-import { showMessageInfo } from "@/utils/dialog";
-import { useSharedStore } from "@/store/sharedata";
-import { getUserToken } from "@/store/session";
+import { checkSession, getClientId, getSystemInfo } from '@/store/cache'
+import { getUserToken } from '@/store/session'
+import { useSharedStore } from '@/store/sharedata'
+import { showMessageInfo } from '@/utils/dialog'
+import { isChrome, isMobile } from '@/utils/libs'
+import { ElConfigProvider } from 'element-plus'
+import { onMounted, ref, watch } from 'vue'
 
 const debounce = (fn, delay) => {
-  let timer;
+  let timer
   return (...args) => {
     if (timer) {
-      clearTimeout(timer);
+      clearTimeout(timer)
     }
     timer = setTimeout(() => {
-      fn(...args);
-    }, delay);
-  };
-};
+      fn(...args)
+    }, delay)
+  }
+}
 
-const _ResizeObserver = window.ResizeObserver;
+const _ResizeObserver = window.ResizeObserver
 window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
   constructor(callback) {
-    callback = debounce(callback, 200);
-    super(callback);
+    callback = debounce(callback, 200)
+    super(callback)
   }
-};
+}
 
-const store = useSharedStore();
+const store = useSharedStore()
 onMounted(() => {
   // 获取系统参数
   getSystemInfo().then((res) => {
-    const link = document.createElement("link");
-    link.rel = "shortcut icon";
-    link.href = res.data.logo;
-    document.head.appendChild(link);
-  });
+    const link = document.createElement('link')
+    link.rel = 'shortcut icon'
+    link.href = res.data.logo
+    document.head.appendChild(link)
+  })
   if (!isChrome() && !isMobile()) {
-    showMessageInfo("建议使用 Chrome 浏览器以获得最佳体验。");
+    showMessageInfo('建议使用 Chrome 浏览器以获得最佳体验。')
   }
 
   checkSession()
     .then(() => {
-      store.setIsLogin(true);
+      store.setIsLogin(true)
     })
-    .catch(() => {});
+    .catch(() => {})
 
   // 设置主题
-  document.documentElement.setAttribute("data-theme", store.theme);
-});
+  document.documentElement.setAttribute('data-theme', store.theme)
+})
 
 watch(
   () => store.isLogin,
   (val) => {
     if (val) {
-      connect();
+      connect()
     }
   }
-);
+)
 
-const handler = ref(0);
+const handler = ref(0)
 // 初始化 websocket 连接
 const connect = () => {
-  let host = process.env.VUE_APP_WS_HOST;
-  if (host === "") {
-    if (location.protocol === "https:") {
-      host = "wss://" + location.host;
+  let host = import.meta.env.VITE_WS_HOST
+  if (host === '') {
+    if (location.protocol === 'https:') {
+      host = 'wss://' + location.host
     } else {
-      host = "ws://" + location.host;
+      host = 'ws://' + location.host
     }
   }
-  const clientId = getClientId();
-  const _socket = new WebSocket(host + `/api/ws?client_id=${clientId}`, ["token", getUserToken()]);
-  _socket.addEventListener("open", () => {
-    console.log("WebSocket 已连接");
+  const clientId = getClientId()
+  const _socket = new WebSocket(host + `/api/ws?client_id=${clientId}`, ['token', getUserToken()])
+  _socket.addEventListener('open', () => {
+    console.log('WebSocket 已连接')
     handler.value = setInterval(() => {
       if (_socket.readyState === WebSocket.OPEN) {
-        _socket.send(JSON.stringify({ type: "ping" }));
+        _socket.send(JSON.stringify({ type: 'ping' }))
       }
-    }, 5000);
-  });
-  _socket.addEventListener("close", () => {
-    clearInterval(handler.value);
-    connect();
-  });
-  store.setSocket(_socket);
-};
+    }, 5000)
+  })
+  _socket.addEventListener('close', () => {
+    clearInterval(handler.value)
+    connect()
+  })
+  store.setSocket(_socket)
+}
 
 // 打印 banner
 const banner = `
@@ -104,20 +104,23 @@ const banner = `
 '88.    .88'  888    .o 888    .o  888  88b.   .8'      888.   888  
   Y8bood8P'    Y8bod8P'  Y8bod8P' o888o o888o o88o     o8888o o888o
 
-  `;
-console.log("%c" + banner + "", "color: purple;font-size: 18px;");
+  `
+console.log('%c' + banner + '', 'color: purple;font-size: 18px;')
 
-console.log("%c感谢大家为 GeekAI 做出的卓越贡献！", "color: green;font-size: 40px;font-family: '微软雅黑';");
 console.log(
-  "%c项目源码：https://github.com/yangjian102621/geekai %c 您的 star 对我们非常重要！",
+  '%c感谢大家为 GeekAI 做出的卓越贡献！',
+  "color: green;font-size: 40px;font-family: '微软雅黑';"
+)
+console.log(
+  '%c项目源码：https://github.com/yangjian102621/geekai %c 您的 star 对我们非常重要！',
   "color: green;font-size: 20px;font-family: '微软雅黑';",
   "color: red;font-size: 20px;font-family: '微软雅黑';"
-);
-
-console.log("%c 愿你出走半生，归来仍是少年！大奉武夫许七安，前来凿阵！", "color: #7c39ed;font-size: 18px;font-family: '微软雅黑';");
+)
 </script>
 
 <style lang="stylus">
+@import '@/assets/iconfont/iconfont.css'
+
 html, body {
   margin: 0;
   padding: 0;
@@ -173,6 +176,4 @@ html, body {
   background #D6FBCC
   color #07C160
 }
-
-@import '@/assets/iconfont/iconfont.css'
 </style>
diff --git a/web/src/components/FooterBar.vue b/web/src/components/FooterBar.vue
index bb45c600..b6582291 100644
--- a/web/src/components/FooterBar.vue
+++ b/web/src/components/FooterBar.vue
@@ -17,45 +17,45 @@
   </div>
 </template>
 <script setup>
-import { ref } from "vue";
-import { showMessageError } from "@/utils/dialog";
-import { getLicenseInfo, getSystemInfo } from "@/store/cache";
+import { getLicenseInfo, getSystemInfo } from '@/store/cache'
+import { showMessageError } from '@/utils/dialog'
+import { ref } from 'vue'
 
-const title = ref("");
-const version = ref(process.env.VUE_APP_VERSION);
-const gitURL = ref(process.env.VUE_APP_GITHUB_URL);
-const copyRight = ref("");
-const icp = ref("");
-const license = ref({});
+const title = ref('')
+const version = ref(import.meta.env.VITE_VERSION)
+const gitURL = ref(import.meta.env.VITE_GITHUB_URL)
+const copyRight = ref('')
+const icp = ref('')
+const license = ref({})
 const props = defineProps({
   textColor: {
     type: String,
-    default: "#ffffff"
-  }
-});
+    default: '#ffffff',
+  },
+})
 
 // 获取系统配置
 getSystemInfo()
   .then((res) => {
-    title.value = res.data.title ?? process.env.VUE_APP_TITLE;
+    title.value = res.data.title ?? import.meta.env.VITE_TITLE
     copyRight.value =
-      (res.data.copyright ? res.data.copyright : "极客学长") +
-      " © 2023 - " +
+      (res.data.copyright ? res.data.copyright : '极客学长') +
+      ' © 2023 - ' +
       new Date().getFullYear() +
-      " All rights reserved";
-    icp.value = res.data.icp;
+      ' All rights reserved'
+    icp.value = res.data.icp
   })
   .catch((e) => {
-    showMessageError("获取系统配置失败：" + e.message);
-  });
+    showMessageError('获取系统配置失败：' + e.message)
+  })
 
 getLicenseInfo()
   .then((res) => {
-    license.value = res.data;
+    license.value = res.data
   })
   .catch((e) => {
-    showMessageError("获取 License 失败：" + e.message);
-  });
+    showMessageError('获取 License 失败：' + e.message)
+  })
 </script>
 
 <style scoped lang="stylus">
diff --git a/web/src/components/LoginDialog.vue b/web/src/components/LoginDialog.vue
index d667a439..7c0ffc9d 100644
--- a/web/src/components/LoginDialog.vue
+++ b/web/src/components/LoginDialog.vue
@@ -13,7 +13,14 @@
         </div>
 
         <div class="block">
-          <el-input placeholder="请输入密码(8-16位)" maxlength="16" size="large" v-model="data.password" show-password autocomplete="off">
+          <el-input
+            placeholder="请输入密码(8-16位)"
+            maxlength="16"
+            size="large"
+            v-model="data.password"
+            show-password
+            autocomplete="off"
+          >
             <template #prefix>
               <el-icon>
                 <Lock />
@@ -24,7 +31,9 @@
 
         <el-row class="btn-row" :gutter="20">
           <el-col :span="24">
-            <el-button class="login-btn" type="primary" size="large" @click="submitLogin">登 录</el-button>
+            <el-button class="login-btn" type="primary" size="large" @click="submitLogin"
+              >登 录</el-button
+            >
           </el-col>
         </el-row>
 
@@ -33,7 +42,9 @@
             还没有账号？
             <el-button size="small" @click="login = false">注册</el-button>
 
-            <el-button type="info" class="forget" size="small" @click="showResetPass = true">忘记密码？</el-button>
+            <el-button type="info" class="forget" size="small" @click="showResetPass = true"
+              >忘记密码？</el-button
+            >
           </div>
           <div v-if="wechatLoginURL !== ''">
             <el-divider>
@@ -42,7 +53,11 @@
             <div class="c-login flex justify-center">
               <div class="p-2 w-full">
                 <a :href="wechatLoginURL">
-                  <el-button type="success" class="w-full" size="large" @click="setRoute(router.currentRoute.value.path)"
+                  <el-button
+                    type="success"
+                    class="w-full"
+                    size="large"
+                    @click="setRoute(router.currentRoute.value.path)"
                     ><i class="iconfont icon-wechat mr-2"></i> 微信登录
                   </el-button>
                 </a>
@@ -58,7 +73,13 @@
         <el-tabs v-model="activeName" class="demo-tabs">
           <el-tab-pane label="手机注册" name="mobile" v-if="enableMobile">
             <div class="block">
-              <el-input placeholder="手机号码" size="large" v-model="data.mobile" maxlength="11" autocomplete="off">
+              <el-input
+                placeholder="手机号码"
+                size="large"
+                v-model="data.mobile"
+                maxlength="11"
+                autocomplete="off"
+              >
                 <template #prefix>
                   <el-icon>
                     <Iphone />
@@ -69,7 +90,13 @@
             <div class="block">
               <el-row :gutter="10">
                 <el-col :span="12">
-                  <el-input placeholder="验证码" size="large" maxlength="30" v-model="data.code" autocomplete="off">
+                  <el-input
+                    placeholder="验证码"
+                    size="large"
+                    maxlength="30"
+                    v-model="data.code"
+                    autocomplete="off"
+                  >
                     <template #prefix>
                       <el-icon>
                         <Checked />
@@ -96,7 +123,13 @@
             <div class="block">
               <el-row :gutter="10">
                 <el-col :span="12">
-                  <el-input placeholder="验证码" size="large" maxlength="30" v-model="data.code" autocomplete="off">
+                  <el-input
+                    placeholder="验证码"
+                    size="large"
+                    maxlength="30"
+                    v-model="data.code"
+                    autocomplete="off"
+                  >
                     <template #prefix>
                       <el-icon>
                         <Checked />
@@ -112,7 +145,12 @@
           </el-tab-pane>
           <el-tab-pane label="用户名注册" name="username" v-if="enableUser">
             <div class="block">
-              <el-input placeholder="用户名" size="large" v-model="data.username" autocomplete="off">
+              <el-input
+                placeholder="用户名"
+                size="large"
+                v-model="data.username"
+                autocomplete="off"
+              >
                 <template #prefix>
                   <el-icon>
                     <Iphone />
@@ -124,7 +162,14 @@
         </el-tabs>
 
         <div class="block">
-          <el-input placeholder="请输入密码(8-16位)" maxlength="16" size="large" v-model="data.password" show-password autocomplete="off">
+          <el-input
+            placeholder="请输入密码(8-16位)"
+            maxlength="16"
+            size="large"
+            v-model="data.password"
+            show-password
+            autocomplete="off"
+          >
             <template #prefix>
               <el-icon>
                 <Lock />
@@ -134,7 +179,14 @@
         </div>
 
         <div class="block">
-          <el-input placeholder="重复密码(8-16位)" size="large" maxlength="16" v-model="data.repass" show-password autocomplete="off">
+          <el-input
+            placeholder="重复密码(8-16位)"
+            size="large"
+            maxlength="16"
+            v-model="data.repass"
+            show-password
+            autocomplete="off"
+          >
             <template #prefix>
               <el-icon>
                 <Lock />
@@ -144,7 +196,12 @@
         </div>
 
         <div class="block">
-          <el-input placeholder="邀请码(可选)" size="large" v-model="data.invite_code" autocomplete="off">
+          <el-input
+            placeholder="邀请码(可选)"
+            size="large"
+            v-model="data.invite_code"
+            autocomplete="off"
+          >
             <template #prefix>
               <el-icon>
                 <Message />
@@ -154,7 +211,9 @@
         </div>
 
         <div class="w-full">
-          <el-button class="login-btn w-full" type="primary" size="large" @click="submitRegister">注 册</el-button>
+          <el-button class="login-btn w-full" type="primary" size="large" @click="submitRegister"
+            >注 册</el-button
+          >
         </div>
 
         <div class="text text-sm flex justify-center items-center w-full pt-3">
@@ -188,193 +247,193 @@
 </template>
 
 <script setup>
-import { onMounted, ref, watch } from "vue";
-import { httpGet, httpPost } from "@/utils/http";
-import { ElMessage } from "element-plus";
-import { setUserToken } from "@/store/session";
-import { validateEmail, validateMobile } from "@/utils/validate";
-import { Checked, Close, Iphone, Lock, Message } from "@element-plus/icons-vue";
-import SendMsg from "@/components/SendMsg.vue";
-import { arrayContains } from "@/utils/libs";
-import { getSystemInfo } from "@/store/cache";
-import Captcha from "@/components/Captcha.vue";
-import ResetPass from "@/components/ResetPass.vue";
-import { setRoute } from "@/store/system";
-import { useRouter } from "vue-router";
-import { useSharedStore } from "@/store/sharedata";
+import Captcha from '@/components/Captcha.vue'
+import ResetPass from '@/components/ResetPass.vue'
+import SendMsg from '@/components/SendMsg.vue'
+import { getSystemInfo } from '@/store/cache'
+import { setUserToken } from '@/store/session'
+import { useSharedStore } from '@/store/sharedata'
+import { setRoute } from '@/store/system'
+import { httpGet, httpPost } from '@/utils/http'
+import { arrayContains } from '@/utils/libs'
+import { validateEmail, validateMobile } from '@/utils/validate'
+import { Checked, Iphone, Lock, Message } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import { onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
 
 // eslint-disable-next-line no-undef
 const props = defineProps({
   show: Boolean,
-});
-const showDialog = ref(false);
+})
+const showDialog = ref(false)
 watch(
   () => props.show,
   (newValue) => {
-    showDialog.value = newValue;
+    showDialog.value = newValue
   }
-);
+)
 
-const login = ref(true);
+const login = ref(true)
 const data = ref({
-  username: process.env.VUE_APP_USER,
-  password: process.env.VUE_APP_PASS,
-  mobile: "",
-  email: "",
-  repass: "",
-  code: "",
-  invite_code: "",
-});
-const enableMobile = ref(false);
-const enableEmail = ref(false);
-const enableUser = ref(false);
-const enableRegister = ref(true);
-const wechatLoginURL = ref("");
-const activeName = ref("");
-const wxImg = ref("/images/wx.png");
-const captchaRef = ref(null);
+  username: import.meta.env.VITE_USER,
+  password: import.meta.env.VITE_PASS,
+  mobile: '',
+  email: '',
+  repass: '',
+  code: '',
+  invite_code: '',
+})
+const enableMobile = ref(false)
+const enableEmail = ref(false)
+const enableUser = ref(false)
+const enableRegister = ref(true)
+const wechatLoginURL = ref('')
+const activeName = ref('')
+const wxImg = ref('/images/wx.png')
+const captchaRef = ref(null)
 // eslint-disable-next-line no-undef
-const emits = defineEmits(["hide", "success"]);
-const action = ref("login");
-const enableVerify = ref(false);
-const showResetPass = ref(false);
-const router = useRouter();
-const store = useSharedStore();
+const emits = defineEmits(['hide', 'success'])
+const action = ref('login')
+const enableVerify = ref(false)
+const showResetPass = ref(false)
+const router = useRouter()
+const store = useSharedStore()
 
 onMounted(() => {
-  const returnURL = `${location.protocol}//${location.host}/login/callback?action=login`;
-  httpGet("/api/user/clogin?return_url=" + returnURL)
+  const returnURL = `${location.protocol}//${location.host}/login/callback?action=login`
+  httpGet('/api/user/clogin?return_url=' + returnURL)
     .then((res) => {
-      wechatLoginURL.value = res.data.url;
+      wechatLoginURL.value = res.data.url
     })
     .catch((e) => {
-      console.log(e.message);
-    });
+      console.log(e.message)
+    })
 
   getSystemInfo()
     .then((res) => {
       if (res.data) {
-        const registerWays = res.data["register_ways"];
-        if (arrayContains(registerWays, "username")) {
-          enableUser.value = true;
-          activeName.value = "username";
+        const registerWays = res.data['register_ways']
+        if (arrayContains(registerWays, 'username')) {
+          enableUser.value = true
+          activeName.value = 'username'
         }
-        if (arrayContains(registerWays, "email")) {
-          enableEmail.value = true;
-          activeName.value = "email";
+        if (arrayContains(registerWays, 'email')) {
+          enableEmail.value = true
+          activeName.value = 'email'
         }
-        if (arrayContains(registerWays, "mobile")) {
-          enableMobile.value = true;
-          activeName.value = "mobile";
+        if (arrayContains(registerWays, 'mobile')) {
+          enableMobile.value = true
+          activeName.value = 'mobile'
         }
         // 是否启用注册
-        enableRegister.value = res.data["enabled_register"];
+        enableRegister.value = res.data['enabled_register']
         // 使用后台上传的客服微信二维码
-        if (res.data["wechat_card_url"] !== "") {
-          wxImg.value = res.data["wechat_card_url"];
+        if (res.data['wechat_card_url'] !== '') {
+          wxImg.value = res.data['wechat_card_url']
         }
-        enableVerify.value = res.data["enabled_verify"];
+        enableVerify.value = res.data['enabled_verify']
       }
     })
     .catch((e) => {
-      ElMessage.error("获取系统配置失败：" + e.message);
-    });
-});
+      ElMessage.error('获取系统配置失败：' + e.message)
+    })
+})
 
 const submit = (verifyData) => {
-  if (action.value === "login") {
-    doLogin(verifyData);
-  } else if (action.value === "register") {
-    doRegister(verifyData);
+  if (action.value === 'login') {
+    doLogin(verifyData)
+  } else if (action.value === 'register') {
+    doRegister(verifyData)
   }
-};
+}
 
 // 登录操作
 const submitLogin = () => {
   if (!data.value.username) {
-    return ElMessage.error("请输入用户名");
+    return ElMessage.error('请输入用户名')
   }
   if (!data.value.password) {
-    return ElMessage.error("请输入密码");
+    return ElMessage.error('请输入密码')
   }
   if (enableVerify.value) {
-    captchaRef.value.loadCaptcha();
-    action.value = "login";
+    captchaRef.value.loadCaptcha()
+    action.value = 'login'
   } else {
-    doLogin({});
+    doLogin({})
   }
-};
+}
 
 const doLogin = (verifyData) => {
-  data.value.key = verifyData.key;
-  data.value.dots = verifyData.dots;
-  data.value.x = verifyData.x;
-  httpPost("/api/user/login", data.value)
+  data.value.key = verifyData.key
+  data.value.dots = verifyData.dots
+  data.value.x = verifyData.x
+  httpPost('/api/user/login', data.value)
     .then((res) => {
-      setUserToken(res.data.token);
-      store.setIsLogin(true);
-      ElMessage.success("登录成功！");
-      emits("hide");
-      emits("success");
+      setUserToken(res.data.token)
+      store.setIsLogin(true)
+      ElMessage.success('登录成功！')
+      emits('hide')
+      emits('success')
     })
     .catch((e) => {
-      ElMessage.error("登录失败，" + e.message);
-    });
-};
+      ElMessage.error('登录失败，' + e.message)
+    })
+}
 
 // 注册操作
 const submitRegister = () => {
-  if (activeName.value === "username" && data.value.username === "") {
-    return ElMessage.error("请输入用户名");
+  if (activeName.value === 'username' && data.value.username === '') {
+    return ElMessage.error('请输入用户名')
   }
 
-  if (activeName.value === "mobile" && !validateMobile(data.value.mobile)) {
-    return ElMessage.error("请输入合法的手机号");
+  if (activeName.value === 'mobile' && !validateMobile(data.value.mobile)) {
+    return ElMessage.error('请输入合法的手机号')
   }
 
-  if (activeName.value === "email" && !validateEmail(data.value.email)) {
-    return ElMessage.error("请输入合法的邮箱地址");
+  if (activeName.value === 'email' && !validateEmail(data.value.email)) {
+    return ElMessage.error('请输入合法的邮箱地址')
   }
 
   if (data.value.password.length < 8) {
-    return ElMessage.error("密码的长度为8-16个字符");
+    return ElMessage.error('密码的长度为8-16个字符')
   }
   if (data.value.repass !== data.value.password) {
-    return ElMessage.error("两次输入密码不一致");
+    return ElMessage.error('两次输入密码不一致')
   }
 
-  if ((activeName.value === "mobile" || activeName.value === "email") && data.value.code === "") {
-    return ElMessage.error("请输入验证码");
+  if ((activeName.value === 'mobile' || activeName.value === 'email') && data.value.code === '') {
+    return ElMessage.error('请输入验证码')
   }
-  if (enableVerify.value && activeName.value === "username") {
-    captchaRef.value.loadCaptcha();
-    action.value = "register";
+  if (enableVerify.value && activeName.value === 'username') {
+    captchaRef.value.loadCaptcha()
+    action.value = 'register'
   } else {
-    doRegister({});
+    doRegister({})
   }
-};
+}
 
 const doRegister = (verifyData) => {
-  data.value.key = verifyData.key;
-  data.value.dots = verifyData.dots;
-  data.value.x = verifyData.x;
-  data.value.reg_way = activeName.value;
-  httpPost("/api/user/register", data.value)
+  data.value.key = verifyData.key
+  data.value.dots = verifyData.dots
+  data.value.x = verifyData.x
+  data.value.reg_way = activeName.value
+  httpPost('/api/user/register', data.value)
     .then((res) => {
-      setUserToken(res.data.token);
+      setUserToken(res.data.token)
       ElMessage.success({
-        message: "注册成功!",
+        message: '注册成功!',
         onClose: () => {
-          emits("hide");
-          emits("success");
+          emits('hide')
+          emits('success')
         },
         duration: 1000,
-      });
+      })
     })
     .catch((e) => {
-      ElMessage.error("注册失败，" + e.message);
-    });
-};
+      ElMessage.error('注册失败，' + e.message)
+    })
+}
 </script>
 
 <style lang="stylus">
diff --git a/web/src/components/RealtimeConversation.vue b/web/src/components/RealtimeConversation.vue
index 77739034..3232c63b 100644
--- a/web/src/components/RealtimeConversation.vue
+++ b/web/src/components/RealtimeConversation.vue
@@ -38,11 +38,7 @@
       <div class="call-controls">
         <el-tooltip content="长按发送语音" placement="top">
           <ripple-button>
-            <button
-              class="call-button answer"
-              @mousedown="startRecording"
-              @mouseup="stopRecording"
-            >
+            <button class="call-button answer" @mousedown="startRecording" @mouseup="stopRecording">
               <i class="iconfont icon-mic-bold"></i>
             </button>
           </ripple-button>
@@ -58,159 +54,155 @@
 </template>
 
 <script setup>
-import RippleButton from "@/components/ui/RippleButton.vue";
-import { ref, onMounted, onUnmounted } from "vue";
-import { RealtimeClient } from "@openai/realtime-api-beta";
-import { WavRecorder, WavStreamPlayer } from "@/lib/wavtools/index.js";
-import { instructions } from "@/utils/conversation_config.js";
-import { WavRenderer } from "@/utils/wav_renderer";
-import { showMessageError } from "@/utils/dialog";
-import { getUserToken } from "@/store/session";
+import RippleButton from '@/components/ui/RippleButton.vue'
+import { WavRecorder, WavStreamPlayer } from '@/lib/wavtools/index.js'
+import { getUserToken } from '@/store/session'
+import { instructions } from '@/utils/conversation_config.js'
+import { showMessageError } from '@/utils/dialog'
+import { WavRenderer } from '@/utils/wav_renderer'
+import { RealtimeClient } from '@openai/realtime-api-beta'
+import { onMounted, onUnmounted, ref } from 'vue'
 
 // eslint-disable-next-line no-unused-vars,no-undef
 const props = defineProps({
   height: {
     type: String,
-    default: "100vh"
-  }
-});
+    default: '100vh',
+  },
+})
 // eslint-disable-next-line no-undef
-const emits = defineEmits(["close"]);
+const emits = defineEmits(['close'])
 
 /********************** connection animation code *************************/
-const fullText = "正在接通中...";
-const connectingText = ref("");
-let index = 0;
+const fullText = '正在接通中...'
+const connectingText = ref('')
+let index = 0
 const typeText = () => {
   if (index < fullText.length) {
-    connectingText.value += fullText[index];
-    index++;
-    setTimeout(typeText, 200); // 每300毫秒显示一个字
+    connectingText.value += fullText[index]
+    index++
+    setTimeout(typeText, 200) // 每300毫秒显示一个字
   } else {
     setTimeout(() => {
-      connectingText.value = "";
-      index = 0;
-      typeText();
-    }, 1000); // 等待1秒后重新开始
+      connectingText.value = ''
+      index = 0
+      typeText()
+    }, 1000) // 等待1秒后重新开始
   }
-};
+}
 /*************************** end of code ****************************************/
 
 /********************** conversation process code ***************************/
-const leftVoiceActive = ref(false);
-const rightVoiceActive = ref(false);
+const leftVoiceActive = ref(false)
+const rightVoiceActive = ref(false)
 
 const animateVoice = () => {
-  leftVoiceActive.value = Math.random() > 0.5;
-  rightVoiceActive.value = Math.random() > 0.5;
-};
+  leftVoiceActive.value = Math.random() > 0.5
+  rightVoiceActive.value = Math.random() > 0.5
+}
 
-const wavRecorder = ref(new WavRecorder({ sampleRate: 24000 }));
-const wavStreamPlayer = ref(new WavStreamPlayer({ sampleRate: 24000 }));
-let host = process.env.VUE_APP_WS_HOST;
-if (host === "") {
-  if (location.protocol === "https:") {
-    host = "wss://" + location.host;
+const wavRecorder = ref(new WavRecorder({ sampleRate: 24000 }))
+const wavStreamPlayer = ref(new WavStreamPlayer({ sampleRate: 24000 }))
+let host = import.meta.env.VITE_WS_HOST
+if (host === '') {
+  if (location.protocol === 'https:') {
+    host = 'wss://' + location.host
   } else {
-    host = "ws://" + location.host;
+    host = 'ws://' + location.host
   }
 }
 const client = ref(
   new RealtimeClient({
     url: `${host}/api/realtime`,
     apiKey: getUserToken(),
-    dangerouslyAllowAPIKeyInBrowser: true
+    dangerouslyAllowAPIKeyInBrowser: true,
   })
-);
+)
 // // Set up client instructions and transcription
 client.value.updateSession({
   instructions: instructions,
   turn_detection: null,
-  input_audio_transcription: { model: "whisper-1" },
-  voice: "alloy"
-});
+  input_audio_transcription: { model: 'whisper-1' },
+  voice: 'alloy',
+})
 
 // set voice wave canvas
-const clientCanvasRef = ref(null);
-const serverCanvasRef = ref(null);
-const isConnected = ref(false);
-const isRecording = ref(false);
-const backgroundAudio = ref(null);
-const hangUpAudio = ref(null);
+const clientCanvasRef = ref(null)
+const serverCanvasRef = ref(null)
+const isConnected = ref(false)
+const isRecording = ref(false)
+const backgroundAudio = ref(null)
+const hangUpAudio = ref(null)
 function sleep(ms) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
+  return new Promise((resolve) => setTimeout(resolve, ms))
 }
 const connect = async () => {
   if (isConnected.value) {
-    return;
+    return
   }
   // 播放背景音乐
   if (backgroundAudio.value) {
     backgroundAudio.value.play().catch((error) => {
-      console.error("播放失败，可能是浏览器的自动播放策略导致的:", error);
-    });
+      console.error('播放失败，可能是浏览器的自动播放策略导致的:', error)
+    })
   }
   // 模拟拨号延时
-  await sleep(3000);
+  await sleep(3000)
   try {
-    await client.value.connect();
-    await wavRecorder.value.begin();
-    await wavStreamPlayer.value.connect();
-    console.log("对话连接成功！");
+    await client.value.connect()
+    await wavRecorder.value.begin()
+    await wavStreamPlayer.value.connect()
+    console.log('对话连接成功！')
     if (!client.value.isConnected()) {
-      return;
+      return
     }
 
-    isConnected.value = true;
-    backgroundAudio.value?.pause();
-    backgroundAudio.value.currentTime = 0;
+    isConnected.value = true
+    backgroundAudio.value?.pause()
+    backgroundAudio.value.currentTime = 0
     client.value.sendUserMessageContent([
       {
-        type: "input_text",
-        text: "你好，我是极客学长!"
-      }
-    ]);
-    if (client.value.getTurnDetectionType() === "server_vad") {
-      await wavRecorder.value.record((data) =>
-        client.value.appendInputAudio(data.mono)
-      );
+        type: 'input_text',
+        text: '你好，我是极客学长!',
+      },
+    ])
+    if (client.value.getTurnDetectionType() === 'server_vad') {
+      await wavRecorder.value.record((data) => client.value.appendInputAudio(data.mono))
     }
   } catch (e) {
-    console.error(e);
+    console.error(e)
   }
-};
+}
 
 // 开始语音输入
 const startRecording = async () => {
   if (isRecording.value) {
-    return;
+    return
   }
 
-  isRecording.value = true;
+  isRecording.value = true
   try {
-    const trackSampleOffset = await wavStreamPlayer.value.interrupt();
+    const trackSampleOffset = await wavStreamPlayer.value.interrupt()
     if (trackSampleOffset?.trackId) {
-      const { trackId, offset } = trackSampleOffset;
-      client.value.cancelResponse(trackId, offset);
+      const { trackId, offset } = trackSampleOffset
+      client.value.cancelResponse(trackId, offset)
     }
-    await wavRecorder.value.record((data) =>
-      client.value.appendInputAudio(data.mono)
-    );
+    await wavRecorder.value.record((data) => client.value.appendInputAudio(data.mono))
   } catch (e) {
-    console.error(e);
+    console.error(e)
   }
-};
+}
 
 // 结束语音输入
 const stopRecording = async () => {
   try {
-    isRecording.value = false;
-    await wavRecorder.value.pause();
-    client.value.createResponse();
+    isRecording.value = false
+    await wavRecorder.value.pause()
+    client.value.createResponse()
   } catch (e) {
-    console.error(e);
+    console.error(e)
   }
-};
+}
 
 // const changeTurnEndType = async (value) => {
 //   if (value === 'none' && wavRecorder.value.getStatus() === 'recording') {
@@ -228,108 +220,108 @@ const stopRecording = async () => {
 // 初始化 WaveRecorder 组件和 RealtimeClient 事件处理
 const initialize = async () => {
   // Set up render loops for the visualization canvas
-  let isLoaded = true;
+  let isLoaded = true
   const render = () => {
     if (isLoaded) {
       if (clientCanvasRef.value) {
-        const canvas = clientCanvasRef.value;
+        const canvas = clientCanvasRef.value
         if (!canvas.width || !canvas.height) {
-          canvas.width = canvas.offsetWidth;
-          canvas.height = canvas.offsetHeight;
+          canvas.width = canvas.offsetWidth
+          canvas.height = canvas.offsetHeight
         }
-        const ctx = canvas.getContext("2d");
+        const ctx = canvas.getContext('2d')
         if (ctx) {
-          ctx.clearRect(0, 0, canvas.width, canvas.height);
+          ctx.clearRect(0, 0, canvas.width, canvas.height)
           const result = wavRecorder.value.recording
-            ? wavRecorder.value.getFrequencies("voice")
-            : { values: new Float32Array([0]) };
-          WavRenderer.drawBars(canvas, ctx, result.values, "#0099ff", 10, 0, 8);
+            ? wavRecorder.value.getFrequencies('voice')
+            : { values: new Float32Array([0]) }
+          WavRenderer.drawBars(canvas, ctx, result.values, '#0099ff', 10, 0, 8)
         }
       }
       if (serverCanvasRef.value) {
-        const canvas = serverCanvasRef.value;
+        const canvas = serverCanvasRef.value
         if (!canvas.width || !canvas.height) {
-          canvas.width = canvas.offsetWidth;
-          canvas.height = canvas.offsetHeight;
+          canvas.width = canvas.offsetWidth
+          canvas.height = canvas.offsetHeight
         }
-        const ctx = canvas.getContext("2d");
+        const ctx = canvas.getContext('2d')
         if (ctx) {
-          ctx.clearRect(0, 0, canvas.width, canvas.height);
+          ctx.clearRect(0, 0, canvas.width, canvas.height)
           const result = wavStreamPlayer.value.analyser
-            ? wavStreamPlayer.value.getFrequencies("voice")
-            : { values: new Float32Array([0]) };
-          WavRenderer.drawBars(canvas, ctx, result.values, "#009900", 10, 0, 8);
+            ? wavStreamPlayer.value.getFrequencies('voice')
+            : { values: new Float32Array([0]) }
+          WavRenderer.drawBars(canvas, ctx, result.values, '#009900', 10, 0, 8)
         }
       }
-      requestAnimationFrame(render);
+      requestAnimationFrame(render)
     }
-  };
-  render();
+  }
+  render()
 
-  client.value.on("error", (event) => {
-    showMessageError(event.error);
-  });
+  client.value.on('error', (event) => {
+    showMessageError(event.error)
+  })
 
-  client.value.on("realtime.event", (re) => {
-    if (re.event.type === "error") {
-      showMessageError(re.event.error);
+  client.value.on('realtime.event', (re) => {
+    if (re.event.type === 'error') {
+      showMessageError(re.event.error)
     }
-  });
+  })
 
-  client.value.on("conversation.interrupted", async () => {
-    const trackSampleOffset = await wavStreamPlayer.value.interrupt();
+  client.value.on('conversation.interrupted', async () => {
+    const trackSampleOffset = await wavStreamPlayer.value.interrupt()
     if (trackSampleOffset?.trackId) {
-      const { trackId, offset } = trackSampleOffset;
-      client.value.cancelResponse(trackId, offset);
+      const { trackId, offset } = trackSampleOffset
+      client.value.cancelResponse(trackId, offset)
     }
-  });
+  })
 
-  client.value.on("conversation.updated", async ({ item, delta }) => {
+  client.value.on('conversation.updated', async ({ item, delta }) => {
     // console.log('item updated', item, delta)
     if (delta?.audio) {
-      wavStreamPlayer.value.add16BitPCM(delta.audio, item.id);
+      wavStreamPlayer.value.add16BitPCM(delta.audio, item.id)
     }
-  });
-};
+  })
+}
 
-const voiceInterval = ref(null);
+const voiceInterval = ref(null)
 onMounted(() => {
-  initialize();
+  initialize()
   // 启动聊天进行中的动画
-  voiceInterval.value = setInterval(animateVoice, 200);
-  typeText();
-});
+  voiceInterval.value = setInterval(animateVoice, 200)
+  typeText()
+})
 
 onUnmounted(() => {
-  clearInterval(voiceInterval.value);
-  client.value.reset();
-});
+  clearInterval(voiceInterval.value)
+  client.value.reset()
+})
 
 // 挂断通话
 const hangUp = async () => {
   try {
-    isConnected.value = false;
+    isConnected.value = false
     // 停止播放拨号音乐
     if (backgroundAudio.value?.currentTime) {
-      backgroundAudio.value?.pause();
-      backgroundAudio.value.currentTime = 0;
+      backgroundAudio.value?.pause()
+      backgroundAudio.value.currentTime = 0
     }
     // 断开客户端的连接
-    client.value.reset();
+    client.value.reset()
     // 中断语音输入和输出服务
-    await wavRecorder.value.end();
-    await wavStreamPlayer.value.interrupt();
+    await wavRecorder.value.end()
+    await wavStreamPlayer.value.interrupt()
   } catch (e) {
-    console.error(e);
+    console.error(e)
   } finally {
     // 播放挂断音乐
-    hangUpAudio.value?.play();
-    emits("close");
+    hangUpAudio.value?.play()
+    emits('close')
   }
-};
+}
 
 // eslint-disable-next-line no-undef
-defineExpose({ connect, hangUp });
+defineExpose({ connect, hangUp })
 </script>
 
 <style scoped lang="stylus">
diff --git a/web/src/components/Welcome.vue b/web/src/components/Welcome.vue
index 6e33c047..4ba81108 100644
--- a/web/src/components/Welcome.vue
+++ b/web/src/components/Welcome.vue
@@ -58,63 +58,63 @@
   </div>
 </template>
 <script setup>
-import {onMounted, ref} from "vue";
-import {ElMessage} from "element-plus";
-import {getSystemInfo} from "@/store/cache";
+import { getSystemInfo } from '@/store/cache'
+import { ElMessage } from 'element-plus'
+import { onMounted, ref } from 'vue'
 
-const title = ref(process.env.VUE_APP_TITLE);
-const version = ref(process.env.VUE_APP_VERSION);
+const title = ref(import.meta.env.VITE_TITLE)
+const version = ref(import.meta.env.VITE_VERSION)
 
 const samples = ref([
-  "用小学生都能听懂的术语解释什么是量子纠缠",
-  "能给一位6岁男孩的生日会提供一些创造性的建议吗？",
-  "如何用 Go 语言实现支持代理 Http client 请求?"
-]);
+  '用小学生都能听懂的术语解释什么是量子纠缠',
+  '能给一位6岁男孩的生日会提供一些创造性的建议吗？',
+  '如何用 Go 语言实现支持代理 Http client 请求?',
+])
 
 const plugins = ref([
   {
-    value: "今日早报",
-    text: "今日早报：获取当天全球的热门新闻事件列表"
+    value: '今日早报',
+    text: '今日早报：获取当天全球的热门新闻事件列表',
   },
   {
-    value: "微博热搜",
-    text: "微博热搜：新浪微博热搜榜，微博当日热搜榜单"
+    value: '微博热搜',
+    text: '微博热搜：新浪微博热搜榜，微博当日热搜榜单',
   },
   {
-    value: "今日头条",
-    text: "今日头条：给用户推荐当天的头条新闻，周榜热文"
-  }
-]);
+    value: '今日头条',
+    text: '今日头条：给用户推荐当天的头条新闻，周榜热文',
+  },
+])
 
 const capabilities = ref([
   {
-    text: "轻松扮演翻译专家，程序员，AI 女友，文案高手...",
-    value: ""
+    text: '轻松扮演翻译专家，程序员，AI 女友，文案高手...',
+    value: '',
   },
   {
-    text: "国产大语言模型支持，百度文心，科大讯飞，ChatGLM...",
-    value: ""
+    text: '国产大语言模型支持，百度文心，科大讯飞，ChatGLM...',
+    value: '',
   },
   {
-    text: "绘画：马斯克开拖拉机，20世纪，中国农村。3:2",
-    value: "绘画：马斯克开拖拉机，20世纪，中国农村。3:2"
-  }
-]);
+    text: '绘画：马斯克开拖拉机，20世纪，中国农村。3:2',
+    value: '绘画：马斯克开拖拉机，20世纪，中国农村。3:2',
+  },
+])
 
 onMounted(() => {
   getSystemInfo()
     .then((res) => {
-      title.value = res.data.title;
+      title.value = res.data.title
     })
     .catch((e) => {
-      ElMessage.error("获取系统配置失败：" + e.message);
-    });
-});
+      ElMessage.error('获取系统配置失败：' + e.message)
+    })
+})
 
-const emits = defineEmits(["send"]);
+const emits = defineEmits(['send'])
 const send = (text) => {
-  emits("send", text);
-};
+  emits('send', text)
+}
 </script>
 <style scoped lang="stylus">
 .welcome {
diff --git a/web/src/components/admin/AdminHeader.vue b/web/src/components/admin/AdminHeader.vue
index 9d851e26..29a33a73 100644
--- a/web/src/components/admin/AdminHeader.vue
+++ b/web/src/components/admin/AdminHeader.vue
@@ -12,14 +12,22 @@
 
     <div class="breadcrumb">
       <el-breadcrumb :separator-icon="ArrowRight">
-        <el-breadcrumb-item v-for="item in breadcrumb" :key="item.title">{{ item.title }}</el-breadcrumb-item>
+        <el-breadcrumb-item v-for="item in breadcrumb" :key="item.title">{{
+          item.title
+        }}</el-breadcrumb-item>
       </el-breadcrumb>
     </div>
     <div class="header-right">
       <div class="header-user-con">
         <!-- 切换主题 -->
-        <el-switch style="margin-right: 10px" v-model="dark" inline-prompt :active-action-icon="Moon"
-                   :inactive-action-icon="Sunny" @change="changeTheme"/>
+        <el-switch
+          style="margin-right: 10px"
+          v-model="dark"
+          inline-prompt
+          :active-action-icon="Moon"
+          :inactive-action-icon="Sunny"
+          @change="changeTheme"
+        />
         <!-- 用户名下拉菜单 -->
         <el-dropdown class="user-name" :hide-on-click="true" trigger="click">
           <span class="el-dropdown-link">
@@ -30,7 +38,9 @@
           </span>
           <template #dropdown>
             <el-dropdown-menu>
-              <el-dropdown-item><i class="iconfont icon-version"></i> 当前版本：{{ version }}</el-dropdown-item>
+              <el-dropdown-item
+                ><i class="iconfont icon-version"></i> 当前版本：{{ version }}</el-dropdown-item
+              >
               <el-dropdown-item divided @click="logout">
                 <i class="iconfont icon-logout"></i>
                 <span>退出登录</span>
@@ -43,103 +53,103 @@
   </div>
 </template>
 <script setup>
-import {onMounted, ref, watch} from "vue";
-import {getMenuItems, useSidebarStore} from "@/store/sidebar";
-import {useRouter} from "vue-router";
-import {ArrowDown, ArrowRight, Expand, Fold, Moon, Sunny} from "@element-plus/icons-vue";
-import {httpGet} from "@/utils/http";
-import {ElMessage} from "element-plus";
-import {removeAdminToken} from "@/store/session";
-import {useSharedStore} from "@/store/sharedata";
+import { removeAdminToken } from '@/store/session'
+import { useSharedStore } from '@/store/sharedata'
+import { getMenuItems, useSidebarStore } from '@/store/sidebar'
+import { httpGet } from '@/utils/http'
+import { ArrowDown, ArrowRight, Expand, Fold, Moon, Sunny } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import { onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
 
-const version = ref(process.env.VUE_APP_VERSION);
-const avatar = ref("/images/user-info.jpg");
-const sidebar = useSidebarStore();
-const router = useRouter();
-const breadcrumb = ref([]);
+const version = ref(import.meta.env.VITE_VERSION)
+const avatar = ref('/images/user-info.jpg')
+const sidebar = useSidebarStore()
+const router = useRouter()
+const breadcrumb = ref([])
 
-const store = useSharedStore();
-const dark = ref(store.theme === "dark");
-const theme = ref(store.theme);
+const store = useSharedStore()
+const dark = ref(store.theme === 'dark')
+const theme = ref(store.theme)
 watch(
-    () => store.theme,
+  () => store.theme,
   (val) => {
-    theme.value = val;
+    theme.value = val
   }
-);
+)
 
 const changeTheme = () => {
-  store.setTheme(dark.value ? "dark" : "light");
-};
+  store.setTheme(dark.value ? 'dark' : 'light')
+}
 
 router.afterEach((to) => {
-  initBreadCrumb(to.path);
-});
+  initBreadCrumb(to.path)
+})
 
 onMounted(() => {
-  initBreadCrumb(router.currentRoute.value.path);
-});
+  initBreadCrumb(router.currentRoute.value.path)
+})
 
 // 初始化面包屑导航
 const initBreadCrumb = (path) => {
-  breadcrumb.value = [{ title: "首页" }];
-  const items = getMenuItems();
+  breadcrumb.value = [{ title: '首页' }]
+  const items = getMenuItems()
   if (items) {
-    let bk = false;
+    let bk = false
     for (let i = 0; i < items.length; i++) {
       if (items[i].index === path) {
         breadcrumb.value.push({
           title: items[i].title,
           path: items[i].index,
-        });
-        break;
+        })
+        break
       }
       if (bk) {
-        break;
+        break
       }
 
-      if (items[i]["subs"]) {
-        const subs = items[i]["subs"];
+      if (items[i]['subs']) {
+        const subs = items[i]['subs']
         for (let j = 0; j < subs.length; j++) {
           if (subs[j].index === path) {
             breadcrumb.value.push({
               title: items[i].title,
               path: items[i].index,
-            });
+            })
             breadcrumb.value.push({
               title: subs[j].title,
               path: subs[j].index,
-            });
-            bk = true;
-            break;
+            })
+            bk = true
+            break
           }
         }
       }
     }
   }
-};
+}
 
 // 侧边栏折叠
 const collapseChange = () => {
-  sidebar.handleCollapse();
-};
+  sidebar.handleCollapse()
+}
 
 onMounted(() => {
   if (document.body.clientWidth < 1024) {
-    collapseChange();
+    collapseChange()
   }
-});
+})
 
 const logout = function () {
-  httpGet("/api/admin/logout")
+  httpGet('/api/admin/logout')
     .then(() => {
-      removeAdminToken();
-      router.replace("/admin/login");
+      removeAdminToken()
+      router.replace('/admin/login')
     })
     .catch((e) => {
-      ElMessage.error("注销失败: " + e.message);
-    });
-};
+      ElMessage.error('注销失败: ' + e.message)
+    })
+}
 </script>
 <style scoped lang="stylus">
 .admin-header {
diff --git a/web/src/store/session.js b/web/src/store/session.js
index 61ea482e..6559b02e 100644
--- a/web/src/store/session.js
+++ b/web/src/store/session.js
@@ -1,39 +1,39 @@
-import {randString} from "@/utils/libs";
-import Storage from "good-storage";
-import {removeAdminInfo} from "@/store/cache";
+import { removeAdminInfo } from '@/store/cache'
+import { randString } from '@/utils/libs'
+import Storage from 'good-storage'
 
 /**
  * storage handler
  */
 
-const UserTokenKey = process.env.VUE_APP_KEY_PREFIX + "Authorization";
-const AdminTokenKey = process.env.VUE_APP_KEY_PREFIX + "Admin-Authorization"
+const UserTokenKey = import.meta.env.VITE_KEY_PREFIX + 'Authorization'
+const AdminTokenKey = import.meta.env.VITE_KEY_PREFIX + 'Admin-Authorization'
 
 export function getSessionId() {
-    return randString(42)
+  return randString(42)
 }
 
 export function getUserToken() {
-    return Storage.get(UserTokenKey) ?? ""
+  return Storage.get(UserTokenKey) ?? ''
 }
 export function setUserToken(token) {
-    // 刷新 session 缓存
-    Storage.set(UserTokenKey, token)
+  // 刷新 session 缓存
+  Storage.set(UserTokenKey, token)
 }
 
 export function removeUserToken() {
-    Storage.remove(UserTokenKey)
+  Storage.remove(UserTokenKey)
 }
 
 export function getAdminToken() {
-    return Storage.get(AdminTokenKey) ?? ""
+  return Storage.get(AdminTokenKey) ?? ''
 }
 
 export function setAdminToken(token) {
-    Storage.set(AdminTokenKey, token)
+  Storage.set(AdminTokenKey, token)
 }
 
 export function removeAdminToken() {
-    Storage.remove(AdminTokenKey)
-    removeAdminInfo()
+  Storage.remove(AdminTokenKey)
+  removeAdminInfo()
 }
diff --git a/web/src/store/system.js b/web/src/store/system.js
index d9523657..adf9e53e 100644
--- a/web/src/store/system.js
+++ b/web/src/store/system.js
@@ -5,50 +5,50 @@
 // * @Author yangjian102621@163.com
 // * +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 
-import Storage from "good-storage";
+import Storage from 'good-storage'
 
 export function GetFileIcon(ext) {
-    const files = {
-        ".docx": "doc.png",
-        ".doc": "doc.png",
-        ".xls": "xls.png",
-        ".xlsx": "xls.png",
-        ".csv": "xls.png",
-        ".ppt": "ppt.png",
-        ".pptx": "ppt.png",
-        ".md": "md.png",
-        ".pdf": "pdf.png",
-        ".sql": "sql.png",
-        ".mp3": "mp3.png",
-        ".wav": "mp3.png",
-        ".mp4": "mp4.png",
-        ".avi": "mp4.png",
-    }
-    if (files[ext]) {
-        return '/images/ext/' + files[ext]
-    }
+  const files = {
+    '.docx': 'doc.png',
+    '.doc': 'doc.png',
+    '.xls': 'xls.png',
+    '.xlsx': 'xls.png',
+    '.csv': 'xls.png',
+    '.ppt': 'ppt.png',
+    '.pptx': 'ppt.png',
+    '.md': 'md.png',
+    '.pdf': 'pdf.png',
+    '.sql': 'sql.png',
+    '.mp3': 'mp3.png',
+    '.wav': 'mp3.png',
+    '.mp4': 'mp4.png',
+    '.avi': 'mp4.png',
+  }
+  if (files[ext]) {
+    return '/images/ext/' + files[ext]
+  }
 
-    return '/images/ext/file.png'
+  return '/images/ext/file.png'
 }
 
 // 获取文件类型
-export function GetFileType (ext) {
-    return ext.replace(".", "").toUpperCase()
+export function GetFileType(ext) {
+  return ext.replace('.', '').toUpperCase()
 }
 
 // 将文件大小转成字符
 export function FormatFileSize(bytes) {
-    if (bytes === 0) return '0 Bytes';
-    const k = 1024;
-    const sizes = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  if (bytes === 0) return '0 Bytes'
+  const k = 1024
+  const sizes = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
 }
 
 export function setRoute(path) {
-    Storage.set(process.env.VUE_APP_KEY_PREFIX + 'ROUTE_',path)
+  Storage.set(import.meta.env.VITE_KEY_PREFIX + 'ROUTE_', path)
 }
 
 export function getRoute() {
-    return Storage.get(process.env.VUE_APP_KEY_PREFIX + 'ROUTE_')
+  return Storage.get(import.meta.env.VITE_KEY_PREFIX + 'ROUTE_')
 }
diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index 8e0f4516..277fd69b 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -168,7 +168,7 @@ const routerViewKey = ref(0)
 const showConfigDialog = ref(false)
 const license = ref({ de_copy: true })
 const showLoginDialog = ref(false)
-const githubURL = ref(process.env.VUE_APP_GITHUB_URL)
+const githubURL = ref(import.meta.env.VITE_GITHUB_URL)
 
 /**
  * 从路径名中提取第一个路径段
diff --git a/web/src/views/Index.vue b/web/src/views/Index.vue
index 8572442a..6eecab88 100644
--- a/web/src/views/Index.vue
+++ b/web/src/views/Index.vue
@@ -102,9 +102,9 @@ 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 docsURL = ref(import.meta.env.VITE_DOCS_URL)
+const githubURL = ref(import.meta.env.VITE_GITHUB_URL)
+const giteeURL = ref(import.meta.env.VITE_GITEE_URL)
 const navs = ref([])
 
 const iconMap = ref({
diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
index f9207e75..78041cab 100644
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@@ -92,8 +92,8 @@ const enableVerify = ref(false)
 const captchaRef = ref(null)
 const ruleFormRef = ref(null)
 const ruleForm = reactive({
-  username: process.env.VUE_APP_USER,
-  password: process.env.VUE_APP_PASS,
+  username: import.meta.env.VITE_USER,
+  password: import.meta.env.VITE_PASS,
   agreement: false,
 })
 const rules = {
diff --git a/web/src/views/Luma.vue b/web/src/views/Luma.vue
index 6ea9910c..20ac8700 100644
--- a/web/src/views/Luma.vue
+++ b/web/src/views/Luma.vue
@@ -15,11 +15,25 @@
       <div class="prompt-container">
         <div class="input-container">
           <div class="upload-icon" v-if="images.length < 2">
-            <el-upload class="avatar-uploader" :auto-upload="true" :show-file-list="false" :http-request="upload" accept=".jpg,.png,.jpeg">
+            <el-upload
+              class="avatar-uploader"
+              :auto-upload="true"
+              :show-file-list="false"
+              :http-request="upload"
+              accept=".jpg,.png,.jpeg"
+            >
               <i class="iconfont icon-image"></i>
             </el-upload>
           </div>
-          <textarea class="prompt-input" :rows="row" v-model="formData.prompt" maxlength="2000" placeholder="请输入提示词或者上传图片" autofocus> </textarea>
+          <textarea
+            class="prompt-input"
+            :rows="row"
+            v-model="formData.prompt"
+            maxlength="2000"
+            placeholder="请输入提示词或者上传图片"
+            autofocus
+          >
+          </textarea>
           <div class="send-icon" @click="create">
             <i class="iconfont icon-send"></i>
           </div>
@@ -44,7 +58,11 @@
       </div>
     </div>
 
-    <el-container class="video-container" v-loading="loading" element-loading-background="rgba(100,100,100,0.3)">
+    <el-container
+      class="video-container"
+      v-loading="loading"
+      element-loading-background="rgba(100,100,100,0.3)"
+    >
       <h2 class="h-title text-2xl mb-5 mt-2">你的作品</h2>
 
       <div class="list-box" v-if="!noData">
@@ -53,7 +71,15 @@
             <div class="left">
               <div class="container">
                 <div v-if="item.progress === 100">
-                  <video class="video" :src="replaceImg(item.video_url)" preload="auto" loop="loop" muted="muted">您的浏览器不支持视频播放</video>
+                  <video
+                    class="video"
+                    :src="replaceImg(item.video_url)"
+                    preload="auto"
+                    loop="loop"
+                    muted="muted"
+                  >
+                    您的浏览器不支持视频播放
+                  </video>
                   <button class="play flex justify-center items-center" @click="play(item)">
                     <img src="/images/play.svg" alt="" />
                   </button>
@@ -63,7 +89,9 @@
               </div>
             </div>
             <div class="center">
-              <div class="failed" v-if="item.progress === 101">任务执行失败：{{ item.err_msg }}，任务提示词：{{ item.prompt }}</div>
+              <div class="failed" v-if="item.progress === 101">
+                任务执行失败：{{ item.err_msg }}，任务提示词：{{ item.prompt }}
+              </div>
               <div class="prompt" v-else>{{ item.prompt }}</div>
             </div>
             <div class="right" v-if="item.progress === 100">
@@ -100,7 +128,12 @@
           </div>
         </div>
       </div>
-      <el-empty :image-size="100" :image="nodata" description="没有任何作品，赶紧去创作吧！" v-else />
+      <el-empty
+        :image-size="100"
+        :image="nodata"
+        description="没有任何作品，赶紧去创作吧！"
+        v-else
+      />
 
       <div class="pagination">
         <el-pagination
@@ -116,8 +149,22 @@
         />
       </div>
     </el-container>
-    <black-dialog v-model:show="showDialog" title="预览视频" hide-footer @cancal="showDialog = false" width="auto">
-      <video style="max-width: 90vw; max-height: 90vh" :src="currentVideoUrl" preload="auto" :autoplay="true" loop="loop" muted="muted" v-show="showDialog">
+    <black-dialog
+      v-model:show="showDialog"
+      title="预览视频"
+      hide-footer
+      @cancal="showDialog = false"
+      width="auto"
+    >
+      <video
+        style="max-width: 90vw; max-height: 90vh"
+        :src="currentVideoUrl"
+        preload="auto"
+        :autoplay="true"
+        loop="loop"
+        muted="muted"
+        v-show="showDialog"
+      >
         您的浏览器不支持视频播放
       </video>
     </black-dialog>
@@ -125,215 +172,214 @@
 </template>
 
 <script setup>
-import nodata from "@/assets/img/no-data.png";
+import nodata from '@/assets/img/no-data.png'
 
-import { onMounted, onUnmounted, reactive, ref } from "vue";
-import { CircleCloseFilled } from "@element-plus/icons-vue";
-import { httpDownload, httpPost, httpGet } from "@/utils/http";
-import { checkSession } from "@/store/cache";
-import { closeLoading, showLoading, showMessageError, showMessageOK } from "@/utils/dialog";
-import { replaceImg } from "@/utils/libs";
-import { ElMessage, ElMessageBox } from "element-plus";
-import BlackSwitch from "@/components/ui/BlackSwitch.vue";
-import Generating from "@/components/ui/Generating.vue";
-import BlackDialog from "@/components/ui/BlackDialog.vue";
-import Clipboard from "clipboard";
-const showDialog = ref(false);
-const currentVideoUrl = ref("");
-const row = ref(1);
-const images = ref([]);
+import BlackDialog from '@/components/ui/BlackDialog.vue'
+import Generating from '@/components/ui/Generating.vue'
+import { checkSession } from '@/store/cache'
+import { closeLoading, showLoading, showMessageError, showMessageOK } from '@/utils/dialog'
+import { httpDownload, httpGet, httpPost } from '@/utils/http'
+import { replaceImg } from '@/utils/libs'
+import { CircleCloseFilled } from '@element-plus/icons-vue'
+import Clipboard from 'clipboard'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { onMounted, onUnmounted, reactive, ref } from 'vue'
+const showDialog = ref(false)
+const currentVideoUrl = ref('')
+const row = ref(1)
+const images = ref([])
 
 const formData = reactive({
-  prompt: "",
+  prompt: '',
   expand_prompt: false,
   loop: false,
-  first_frame_img: "",
-  end_frame_img: "",
-});
+  first_frame_img: '',
+  end_frame_img: '',
+})
 
-const loading = ref(false);
-const list = ref([]);
-const noData = ref(true);
-const page = ref(1);
-const pageSize = ref(10);
-const total = ref(0);
-const taskPulling = ref(true);
-const clipboard = ref(null);
-const pullHandler = ref(null);
+const loading = ref(false)
+const list = ref([])
+const noData = ref(true)
+const page = ref(1)
+const pageSize = ref(10)
+const total = ref(0)
+const taskPulling = ref(true)
+const clipboard = ref(null)
+const pullHandler = ref(null)
 
 onMounted(() => {
   checkSession().then(() => {
-    fetchData(1);
+    fetchData(1)
     // 设置轮询
     pullHandler.value = setInterval(() => {
       if (taskPulling.value) {
-        fetchData(1);
+        fetchData(1)
       }
-    }, 5000);
-  });
+    }, 5000)
+  })
 
-  clipboard.value = new Clipboard(".copy-prompt");
-  clipboard.value.on("success", () => {
-    ElMessage.success("复制成功！");
-  });
-});
+  clipboard.value = new Clipboard('.copy-prompt')
+  clipboard.value.on('success', () => {
+    ElMessage.success('复制成功！')
+  })
+})
 
 onUnmounted(() => {
-  clipboard.value.destroy();
+  clipboard.value.destroy()
   if (pullHandler.value) {
-    clearInterval(pullHandler.value);
+    clearInterval(pullHandler.value)
   }
-});
+})
 
 const download = (item) => {
-  const url = replaceImg(item.video_url);
-  const downloadURL = `${process.env.VUE_APP_API_HOST}/api/download?url=${url}`;
-  const urlObj = new URL(url);
-  const fileName = urlObj.pathname.split("/").pop();
-  item.downloading = true;
+  const url = replaceImg(item.video_url)
+  const downloadURL = `${import.meta.env.VITE_API_HOST}/api/download?url=${url}`
+  const urlObj = new URL(url)
+  const fileName = urlObj.pathname.split('/').pop()
+  item.downloading = true
   httpDownload(downloadURL)
     .then((response) => {
-      const blob = new Blob([response.data]);
-      const link = document.createElement("a");
-      link.href = URL.createObjectURL(blob);
-      link.download = fileName;
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      URL.revokeObjectURL(link.href);
-      item.downloading = false;
+      const blob = new Blob([response.data])
+      const link = document.createElement('a')
+      link.href = URL.createObjectURL(blob)
+      link.download = fileName
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+      URL.revokeObjectURL(link.href)
+      item.downloading = false
     })
     .catch(() => {
-      showMessageError("下载失败");
-      item.downloading = false;
-    });
-};
+      showMessageError('下载失败')
+      item.downloading = false
+    })
+}
 
 const play = (item) => {
-  currentVideoUrl.value = replaceImg(item.video_url);
-  showDialog.value = true;
-};
+  currentVideoUrl.value = replaceImg(item.video_url)
+  showDialog.value = true
+}
 
 const removeJob = (item) => {
-  ElMessageBox.confirm("此操作将会删除任务相关文件，继续操作码?", "删除提示", {
-    confirmButtonText: "确认",
-    cancelButtonText: "取消",
-    type: "warning",
+  ElMessageBox.confirm('此操作将会删除任务相关文件，继续操作码?', '删除提示', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    type: 'warning',
   })
     .then(() => {
-      httpGet("/api/video/remove", { id: item.id })
+      httpGet('/api/video/remove', { id: item.id })
         .then(() => {
-          ElMessage.success("任务删除成功");
-          fetchData();
+          ElMessage.success('任务删除成功')
+          fetchData()
         })
         .catch((e) => {
-          ElMessage.error("任务删除失败：" + e.message);
-        });
+          ElMessage.error('任务删除失败：' + e.message)
+        })
     })
-    .catch(() => {});
-};
+    .catch(() => {})
+}
 
 const publishJob = (item) => {
-  httpGet("/api/video/publish", { id: item.id, publish: item.publish })
+  httpGet('/api/video/publish', { id: item.id, publish: item.publish })
     .then(() => {
-      ElMessage.success("操作成功");
+      ElMessage.success('操作成功')
     })
     .catch((e) => {
-      ElMessage.error("操作失败：" + e.message);
-    });
-};
+      ElMessage.error('操作失败：' + e.message)
+    })
+}
 
 const upload = (file) => {
-  const formData = new FormData();
-  formData.append("file", file.file, file.name);
-  showLoading("正在上传文件...");
-  httpPost("/api/upload", formData)
+  const formData = new FormData()
+  formData.append('file', file.file, file.name)
+  showLoading('正在上传文件...')
+  httpPost('/api/upload', formData)
     .then((res) => {
-      images.value.push(res.data.url);
-      ElMessage.success({ message: "上传成功", duration: 500 });
-      closeLoading();
+      images.value.push(res.data.url)
+      ElMessage.success({ message: '上传成功', duration: 500 })
+      closeLoading()
     })
     .catch((e) => {
-      ElMessage.error("图片上传失败:" + e.message);
-      closeLoading();
-    });
-};
+      ElMessage.error('图片上传失败:' + e.message)
+      closeLoading()
+    })
+}
 
 const remove = (img) => {
-  images.value = images.value.filter((item) => item !== img);
-};
+  images.value = images.value.filter((item) => item !== img)
+}
 
 const switchReverse = () => {
-  images.value = images.value.reverse();
-};
+  images.value = images.value.reverse()
+}
 
 const fetchData = (_page) => {
   if (_page) {
-    page.value = _page;
+    page.value = _page
   }
-  httpGet("/api/video/list", {
+  httpGet('/api/video/list', {
     page: page.value,
     page_size: pageSize.value,
-    type: "luma",
+    type: 'luma',
   })
     .then((res) => {
-      total.value = res.data.total;
-      let needPull = false;
-      const items = [];
+      total.value = res.data.total
+      let needPull = false
+      const items = []
       for (let v of res.data.items) {
         if (v.progress === 0 || v.progress === 102) {
-          needPull = true;
+          needPull = true
         }
-        items.push(v);
+        items.push(v)
       }
-      loading.value = false;
-      taskPulling.value = needPull;
+      loading.value = false
+      taskPulling.value = needPull
       if (JSON.stringify(list.value) !== JSON.stringify(items)) {
-        list.value = items;
+        list.value = items
       }
-      noData.value = list.value.length === 0;
+      noData.value = list.value.length === 0
     })
     .catch(() => {
-      loading.value = false;
-      noData.value = true;
-    });
-};
+      loading.value = false
+      noData.value = true
+    })
+}
 
 const create = () => {
-  const len = images.value.length;
+  const len = images.value.length
   if (len) {
-    formData.first_frame_img = replaceImg(images.value[0]);
+    formData.first_frame_img = replaceImg(images.value[0])
     if (len === 2) {
-      formData.end_frame_img = replaceImg(images.value[1]);
+      formData.end_frame_img = replaceImg(images.value[1])
     }
   }
 
-  httpPost("/api/video/luma/create", formData)
+  httpPost('/api/video/luma/create', formData)
     .then(() => {
-      fetchData(1);
-      taskPulling.value = true;
-      showMessageOK("创建任务成功");
+      fetchData(1)
+      taskPulling.value = true
+      showMessageOK('创建任务成功')
     })
     .catch((e) => {
-      showMessageError("创建任务失败：" + e.message);
-    });
-};
+      showMessageError('创建任务失败：' + e.message)
+    })
+}
 
 const generatePrompt = () => {
-  if (formData.prompt === "") {
-    return showMessageError("请输入原始提示词");
+  if (formData.prompt === '') {
+    return showMessageError('请输入原始提示词')
   }
-  showLoading("正在生成视频脚本...");
-  httpPost("/api/prompt/video", { prompt: formData.prompt })
+  showLoading('正在生成视频脚本...')
+  httpPost('/api/prompt/video', { prompt: formData.prompt })
     .then((res) => {
-      formData.prompt = res.data;
-      closeLoading();
+      formData.prompt = res.data
+      closeLoading()
     })
     .catch((e) => {
-      showMessageError("生成提示词失败：" + e.message);
-      closeLoading();
-    });
-};
+      showMessageError('生成提示词失败：' + e.message)
+      closeLoading()
+    })
+}
 </script>
 
 <style lang="stylus" scoped>
diff --git a/web/src/views/Member.vue b/web/src/views/Member.vue
index fd3d82fb..40a95b0b 100644
--- a/web/src/views/Member.vue
+++ b/web/src/views/Member.vue
@@ -1,6 +1,11 @@
 <template>
   <div>
-    <div class="member custom-scroll" v-loading="loading" element-loading-background="rgba(255,255,255,.3)" :element-loading-text="loadingText">
+    <div
+      class="member custom-scroll"
+      v-loading="loading"
+      element-loading-background="rgba(255,255,255,.3)"
+      :element-loading-text="loadingText"
+    >
       <div class="inner">
         <div class="user-profile">
           <user-profile :key="profileKey" />
@@ -26,7 +31,9 @@
 
         <div class="product-box">
           <div class="info" v-if="orderPayInfoText !== ''">
-            <el-alert type="success" show-icon :closable="false" effect="dark"> <strong>说明:</strong> {{ vipInfoText }} </el-alert>
+            <el-alert type="success" show-icon :closable="false" effect="dark">
+              <strong>说明:</strong> {{ vipInfoText }}
+            </el-alert>
           </div>
 
           <el-row v-if="list.length > 0" :gutter="20" class="list-box">
@@ -61,7 +68,12 @@
                   </div>
 
                   <div class="pay-way">
-                    <span type="primary" v-for="payWay in payWays" @click="pay(item, payWay)" :key="payWay">
+                    <span
+                      type="primary"
+                      v-for="payWay in payWays"
+                      @click="pay(item, payWay)"
+                      :key="payWay"
+                    >
                       <el-button v-if="payWay.pay_type === 'alipay'" color="#15A6E8" circle>
                         <i class="iconfont icon-alipay"></i>
                       </el-button>
@@ -97,14 +109,33 @@
         </div>
       </div>
 
-      <password-dialog v-if="isLogin" :show="showPasswordDialog" @hide="showPasswordDialog = false" />
-      <bind-mobile v-if="isLogin" :show="showBindMobileDialog" @hide="showBindMobileDialog = false" />
+      <password-dialog
+        v-if="isLogin"
+        :show="showPasswordDialog"
+        @hide="showPasswordDialog = false"
+      />
+      <bind-mobile
+        v-if="isLogin"
+        :show="showBindMobileDialog"
+        @hide="showBindMobileDialog = false"
+      />
       <bind-email v-if="isLogin" :show="showBindEmailDialog" @hide="showBindEmailDialog = false" />
-      <third-login v-if="isLogin" :show="showThirdLoginDialog" @hide="showThirdLoginDialog = false" />
+      <third-login
+        v-if="isLogin"
+        :show="showThirdLoginDialog"
+        @hide="showThirdLoginDialog = false"
+      />
       <redeem-verify v-if="isLogin" :show="showRedeemVerifyDialog" @hide="redeemCallback" />
     </div>
 
-    <el-dialog v-model="showDialog" :show-close="false" :close-on-click-modal="false" hide-footer width="auto" class="pay-dialog">
+    <el-dialog
+      v-model="showDialog"
+      :show-close="false"
+      :close-on-click-modal="false"
+      hide-footer
+      width="auto"
+      class="pay-dialog"
+    >
       <div v-if="qrImg !== ''">
         <div class="product-info">
           请使用微信扫码支付：<span class="price">￥{{ price }}</span>
@@ -120,145 +151,145 @@
 </template>
 
 <script setup>
-import nodata from "@/assets/img/no-data.png";
-import { onMounted, ref } from "vue";
-import { ElMessage } from "element-plus";
-import { httpGet, httpPost } from "@/utils/http";
-import { checkSession, getSystemInfo } from "@/store/cache";
-import UserProfile from "@/components/UserProfile.vue";
-import PasswordDialog from "@/components/PasswordDialog.vue";
-import BindMobile from "@/components/BindMobile.vue";
-import RedeemVerify from "@/components/RedeemVerify.vue";
-import UserOrder from "@/components/UserOrder.vue";
-import { useSharedStore } from "@/store/sharedata";
-import BindEmail from "@/components/BindEmail.vue";
-import ThirdLogin from "@/components/ThirdLogin.vue";
-import QRCode from "qrcode";
+import nodata from '@/assets/img/no-data.png'
+import BindEmail from '@/components/BindEmail.vue'
+import BindMobile from '@/components/BindMobile.vue'
+import PasswordDialog from '@/components/PasswordDialog.vue'
+import RedeemVerify from '@/components/RedeemVerify.vue'
+import ThirdLogin from '@/components/ThirdLogin.vue'
+import UserOrder from '@/components/UserOrder.vue'
+import UserProfile from '@/components/UserProfile.vue'
+import { checkSession, getSystemInfo } from '@/store/cache'
+import { useSharedStore } from '@/store/sharedata'
+import { httpGet, httpPost } from '@/utils/http'
+import { ElMessage } from 'element-plus'
+import QRCode from 'qrcode'
+import { onMounted, ref } from 'vue'
 
-const list = ref([]);
-const vipImg = ref("/images/menu/member.png");
-const enableReward = ref(false); // 是否启用众筹功能
-const rewardImg = ref("/images/reward.png");
-const showPasswordDialog = ref(false);
-const showBindMobileDialog = ref(false);
-const showBindEmailDialog = ref(false);
-const showRedeemVerifyDialog = ref(false);
-const showThirdLoginDialog = ref(false);
-const user = ref(null);
-const isLogin = ref(false);
-const orderTimeout = ref(1800);
-const loading = ref(true);
-const loadingText = ref("加载中...");
-const orderPayInfoText = ref("");
+const list = ref([])
+const vipImg = ref('/images/menu/member.png')
+const enableReward = ref(false) // 是否启用众筹功能
+const rewardImg = ref('/images/reward.png')
+const showPasswordDialog = ref(false)
+const showBindMobileDialog = ref(false)
+const showBindEmailDialog = ref(false)
+const showRedeemVerifyDialog = ref(false)
+const showThirdLoginDialog = ref(false)
+const user = ref(null)
+const isLogin = ref(false)
+const orderTimeout = ref(1800)
+const loading = ref(true)
+const loadingText = ref('加载中...')
+const orderPayInfoText = ref('')
 
-const payWays = ref([]);
-const vipInfoText = ref("");
-const store = useSharedStore();
-const profileKey = ref(0);
-const userOrderKey = ref(0);
-const showDialog = ref(false);
-const qrImg = ref("");
-const price = ref(0);
+const payWays = ref([])
+const vipInfoText = ref('')
+const store = useSharedStore()
+const profileKey = ref(0)
+const userOrderKey = ref(0)
+const showDialog = ref(false)
+const qrImg = ref('')
+const price = ref(0)
 
 onMounted(() => {
   checkSession()
     .then((_user) => {
-      user.value = _user;
-      isLogin.value = true;
+      user.value = _user
+      isLogin.value = true
     })
     .catch(() => {
-      store.setShowLoginDialog(true);
-    });
+      store.setShowLoginDialog(true)
+    })
 
-  httpGet("/api/product/list")
+  httpGet('/api/product/list')
     .then((res) => {
-      list.value = res.data;
-      loading.value = false;
+      list.value = res.data
+      loading.value = false
     })
     .catch((e) => {
-      ElMessage.error("获取产品套餐失败：" + e.message);
-    });
+      ElMessage.error('获取产品套餐失败：' + e.message)
+    })
 
   getSystemInfo()
     .then((res) => {
-      rewardImg.value = res.data["reward_img"];
-      enableReward.value = res.data["enabled_reward"];
-      orderPayInfoText.value = res.data["order_pay_info_text"];
-      if (res.data["order_pay_timeout"] > 0) {
-        orderTimeout.value = res.data["order_pay_timeout"];
+      rewardImg.value = res.data['reward_img']
+      enableReward.value = res.data['enabled_reward']
+      orderPayInfoText.value = res.data['order_pay_info_text']
+      if (res.data['order_pay_timeout'] > 0) {
+        orderTimeout.value = res.data['order_pay_timeout']
       }
-      vipInfoText.value = res.data["vip_info_text"];
+      vipInfoText.value = res.data['vip_info_text']
     })
     .catch((e) => {
-      ElMessage.error("获取系统配置失败：" + e.message);
-    });
+      ElMessage.error('获取系统配置失败：' + e.message)
+    })
 
-  httpGet("/api/payment/payWays")
+  httpGet('/api/payment/payWays')
     .then((res) => {
-      payWays.value = res.data;
+      payWays.value = res.data
     })
     .catch((e) => {
-      ElMessage.error("获取支付方式失败：" + e.message);
-    });
-});
+      ElMessage.error('获取支付方式失败：' + e.message)
+    })
+})
 
 const pay = (product, payWay) => {
   if (!isLogin.value) {
-    store.setShowLoginDialog(true);
-    return;
+    store.setShowLoginDialog(true)
+    return
   }
-  loading.value = true;
-  loadingText.value = "正在生成支付订单...";
-  let host = process.env.VUE_APP_API_HOST;
-  if (host === "") {
-    host = `${location.protocol}//${location.host}`;
+  loading.value = true
+  loadingText.value = '正在生成支付订单...'
+  let host = import.meta.env.VITE_API_HOST
+  if (host === '') {
+    host = `${location.protocol}//${location.host}`
   }
-  httpPost(`${process.env.VUE_APP_API_HOST}/api/payment/doPay`, {
+  httpPost(`${import.meta.env.VITE_API_HOST}/api/payment/doPay`, {
     product_id: product.id,
     pay_way: payWay.pay_way,
     pay_type: payWay.pay_type,
     user_id: user.value.id,
     host: host,
-    device: "jump",
+    device: 'jump',
   })
     .then((res) => {
-      showDialog.value = true;
-      loading.value = false;
-      if (payWay.pay_way === "wechat") {
-        price.value = Number(product.discount);
+      showDialog.value = true
+      loading.value = false
+      if (payWay.pay_way === 'wechat') {
+        price.value = Number(product.discount)
         QRCode.toDataURL(res.data, { width: 300, height: 300, margin: 2 }, (error, url) => {
           if (error) {
-            console.error(error);
+            console.error(error)
           } else {
-            qrImg.value = url;
+            qrImg.value = url
           }
-        });
+        })
       } else {
-        window.open(res.data, "_blank");
+        window.open(res.data, '_blank')
       }
     })
     .catch((e) => {
       setTimeout(() => {
-        ElMessage.error("生成支付订单失败：" + e.message);
-        loading.value = false;
-      }, 500);
-    });
-};
+        ElMessage.error('生成支付订单失败：' + e.message)
+        loading.value = false
+      }, 500)
+    })
+}
 
 const redeemCallback = (success) => {
-  showRedeemVerifyDialog.value = false;
+  showRedeemVerifyDialog.value = false
   if (success) {
-    profileKey.value += 1;
+    profileKey.value += 1
   }
-};
+}
 
 const payCallback = (success) => {
-  showDialog.value = false;
+  showDialog.value = false
   if (success) {
-    profileKey.value += 1;
-    userOrderKey.value += 1;
+    profileKey.value += 1
+    userOrderKey.value += 1
   }
-};
+}
 </script>
 
 <style lang="stylus">
diff --git a/web/src/views/Suno.vue b/web/src/views/Suno.vue
index 55d0a497..29f319bb 100644
--- a/web/src/views/Suno.vue
+++ b/web/src/views/Suno.vue
@@ -46,7 +46,7 @@
                 placement="right"
                 :width="200"
                 trigger="hover"
-                content="描述您想要的音乐风格（例如“原声流行音乐”）。Sunos 模特无法识别艺术家的名字，但能够理解音乐流派和氛围。"
+                content="描述您想要的音乐风格（例如"原声流行音乐"）。Sunos 模特无法识别艺术家的名字，但能够理解音乐流派和氛围。"
               >
                 <template #reference>
                   <el-icon>
@@ -270,23 +270,23 @@
 <script setup>
 import nodata from "@/assets/img/no-data.png";
 
-import { nextTick, onMounted, onUnmounted, ref, watch } from "vue";
-import { Delete, InfoFilled } from "@element-plus/icons-vue";
+import MusicPlayer from "@/components/MusicPlayer.vue";
+import BlackDialog from "@/components/ui/BlackDialog.vue";
+import BlackInput from "@/components/ui/BlackInput.vue";
 import BlackSelect from "@/components/ui/BlackSelect.vue";
 import BlackSwitch from "@/components/ui/BlackSwitch.vue";
-import BlackInput from "@/components/ui/BlackInput.vue";
-import MusicPlayer from "@/components/MusicPlayer.vue";
-import { compact } from "lodash";
-import { httpDownload, httpGet, httpPost } from "@/utils/http";
-import { closeLoading, showLoading, showMessageError, showMessageOK } from "@/utils/dialog";
-import { checkSession } from "@/store/cache";
-import { ElMessage, ElMessageBox } from "element-plus";
-import { formatTime, replaceImg } from "@/utils/libs";
-import Clipboard from "clipboard";
-import BlackDialog from "@/components/ui/BlackDialog.vue";
-import Compressor from "compressorjs";
 import Generating from "@/components/ui/Generating.vue";
+import { checkSession } from "@/store/cache";
 import { useSharedStore } from "@/store/sharedata";
+import { closeLoading, showLoading, showMessageError, showMessageOK } from "@/utils/dialog";
+import { httpDownload, httpGet, httpPost } from "@/utils/http";
+import { formatTime, replaceImg } from "@/utils/libs";
+import { Delete, InfoFilled } from "@element-plus/icons-vue";
+import Clipboard from "clipboard";
+import Compressor from "compressorjs";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { compact } from "lodash";
+import { nextTick, onMounted, onUnmounted, ref, watch } from "vue";
 
 const custom = ref(false);
 const models = ref([
@@ -455,7 +455,7 @@ const merge = (item) => {
 // 下载歌曲
 const download = (item) => {
   const url = replaceImg(item.audio_url);
-  const downloadURL = `${process.env.VUE_APP_API_HOST}/api/download?url=${url}`;
+  const downloadURL = `${import.meta.env.VITE_API_HOST}/api/download?url=${url}`;
   // parse filename
   const urlObj = new URL(url);
   const fileName = urlObj.pathname.split("/").pop();
diff --git a/web/src/views/admin/Login.vue b/web/src/views/admin/Login.vue
index f7b868a5..62d26324 100644
--- a/web/src/views/admin/Login.vue
+++ b/web/src/views/admin/Login.vue
@@ -68,8 +68,8 @@ 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 username = ref(import.meta.env.VITE_ADMIN_USER)
+const password = ref(import.meta.env.VITE_ADMIN_PASS)
 const logo = ref('')
 const enableVerify = ref(false)
 const captchaRef = ref(null)
diff --git a/web/src/views/mobile/Index.vue b/web/src/views/mobile/Index.vue
index 5ff2ed21..f2a09780 100644
--- a/web/src/views/mobile/Index.vue
+++ b/web/src/views/mobile/Index.vue
@@ -93,7 +93,7 @@ import { showNotify } from 'vant'
 import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
-const title = ref(process.env.VUE_APP_TITLE)
+const title = ref(import.meta.env.VITE_TITLE)
 const router = useRouter()
 const isLogin = ref(false)
 const apps = ref([])
diff --git a/web/vite.config.js b/web/vite.config.js
index 93b35c3e..8af0822f 100644
--- a/web/vite.config.js
+++ b/web/vite.config.js
@@ -1,27 +1,46 @@
-import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
-import path from 'path';
+import vue from '@vitejs/plugin-vue'
+import path from 'path'
+import { defineConfig, loadEnv } from 'vite'
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [vue()],
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, 'src'),
-    },
-  },
-  server: {
-    port: 8888,
-    proxy: {
-      '/api': {
-        target: process.env.VUE_APP_API_HOST || 'http://localhost:8080', // Fallback if env var is not set
-        changeOrigin: true,
-        ws: true,
-      },
-      '/static/upload/': {
-        target: process.env.VUE_APP_API_HOST || 'http://localhost:8080', // Fallback if env var is not set
-        changeOrigin: true,
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd())
+  const apiHost = env.VITE_API_HOST || 'http://localhost:5678'
+
+  return {
+    plugins: [vue()],
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, './src'),
       },
     },
-  },
-});
+    css: {
+      preprocessorOptions: {
+        stylus: {
+          additionalData: `@import "@/assets/css/index.styl";`,
+        },
+      },
+    },
+    optimizeDeps: {
+      include: ['stylus'],
+    },
+    server: {
+      port: 8888,
+      ...(process.env.NODE_ENV === 'development'
+        ? {
+            proxy: {
+              '/api': {
+                target: apiHost,
+                changeOrigin: true,
+                ws: true,
+              },
+              '/static/upload/': {
+                target: apiHost,
+                changeOrigin: true,
+              },
+            },
+          }
+        : {}),
+    },
+  }
+})