替换 vite 架构

2026-04-23 03:24:34 +08:00 · 2025-05-26 14:14:29 +08:00
parent 94a5187e75
commit b1ddcef593
20 changed files with 937 additions and 782 deletions
--- 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)

 /**
 * 从路径名中提取第一个路径段
--- 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({
--- 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 = {
--- 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>
--- 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">
--- 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();
--- 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)
--- 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([])