From cbf06eea2499ecfd8b84bde1ee82a9e909dbdcd3 Mon Sep 17 00:00:00 2001
From: RockYang <yangjian102621@gmail.com>
Date: Wed, 25 Dec 2024 11:10:23 +0800
Subject: [PATCH] fine-tune page styles, use iframe to load external page in
 navigation bar

---
 web/src/assets/css/luma.styl      |   2 +-
 web/src/assets/css/main.styl      |   3 +-
 web/src/assets/css/suno.styl      |   2 +-
 web/src/views/ExternalPage.vue    |  35 +--
 web/src/views/Home.vue            |  23 +-
 web/src/views/Invitation.vue      |  31 +--
 web/src/views/Luma.vue            |   2 +-
 web/src/views/PowerLog.vue        |   2 +-
 web/src/views/admin/ApiKey.vue    | 266 +++++++++----------
 web/src/views/admin/ChatList.vue  | 129 ++-------
 web/src/views/admin/ImageList.vue | 424 ++++++++++++++----------------
 web/src/views/admin/Login.vue     | 111 ++++----
 web/src/views/admin/LoginLog.vue  |  83 +++---
 web/src/views/admin/Medias.vue    | 332 +++++++++++------------
 web/src/views/admin/Order.vue     | 171 ++++++------
 web/src/views/admin/PowerLog.vue  | 154 +++++------
 web/src/views/admin/Redeem.vue    | 277 ++++++++++---------
 web/src/views/admin/Users.vue     |   2 +-
 18 files changed, 959 insertions(+), 1090 deletions(-)

diff --git a/web/src/assets/css/luma.styl b/web/src/assets/css/luma.styl
index adb2d0f5..aebc0a25 100644
--- a/web/src/assets/css/luma.styl
+++ b/web/src/assets/css/luma.styl
@@ -277,7 +277,7 @@
     }
 
     .pagination {
-      padding 10px 20px
+      margin-top 20px
       display flex
       justify-content center
     }
diff --git a/web/src/assets/css/main.styl b/web/src/assets/css/main.styl
index 9abf3c22..5510d7ca 100644
--- a/web/src/assets/css/main.styl
+++ b/web/src/assets/css/main.styl
@@ -58,7 +58,8 @@ body {
       .container {
         padding: 15px 20px 30px 20px;
         background: #ffffff;
-        margin-bottom 80px
+        margin-bottom 20px
+        max-width 100%
       }
 
       .crumbs {
diff --git a/web/src/assets/css/suno.styl b/web/src/assets/css/suno.styl
index a2dc045b..7166c73e 100644
--- a/web/src/assets/css/suno.styl
+++ b/web/src/assets/css/suno.styl
@@ -382,7 +382,7 @@
     }
 
     .pagination {
-      padding 10px 20px
+      margin-top 20px
       display flex
       justify-content center
     }
diff --git a/web/src/views/ExternalPage.vue b/web/src/views/ExternalPage.vue
index 134386df..72e13f98 100644
--- a/web/src/views/ExternalPage.vue
+++ b/web/src/views/ExternalPage.vue
@@ -1,32 +1,37 @@
 <template>
-  <div class="page-iframe" v-loading="loading"
-       style="--el-color-primary:#47fff1"
-       element-loading-text="页面正在加载中..."
-       element-loading-background="rgba(122, 122, 122, 0.8)">
+  <div
+    class="page-iframe"
+    v-loading="loading"
+    style="--el-color-primary: #47fff1"
+    element-loading-text="页面正在加载中..."
+    element-loading-background="rgba(122, 122, 122, 0.8)"
+  >
     <iframe :src="externalUrl" class="iframe" @load="onIframeLoad"></iframe>
-
   </div>
 </template>
 <script setup>
-import {useRouter} from "vue-router";
-import {computed, ref} from "vue";
+import { useRouter } from "vue-router";
+import { computed, ref, onMounted } from "vue";
 
-const loading = ref(true)
-const router = useRouter()
+const loading = ref(true);
+const router = useRouter();
 const externalUrl = computed(() => {
-  loading.value = true
-  return router.currentRoute.value.query.url || 'about:blank'
-})
+  loading.value = true;
+  return router.currentRoute.value.query.url || "about:blank";
+});
+
+// 设置标题
+document.title = router.currentRoute.value.query.title;
 
 const onIframeLoad = () => {
-  loading.value = false
-}
+  loading.value = false;
+};
 </script>
 
 <style scoped lang="stylus">
 .page-iframe {
   width 100%
-  height 100%
+  height 100vh
   overflow hidden
 
   .iframe {
diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index 65dc79d1..9752c2a3 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -61,7 +61,7 @@
                     }"
                   >
                     <a @click="changeNav(item)">
-                      <span v-if="item.icon.startsWith('icon')">
+                      <span v-if="item.icon.startsWith('icon')" class="mr-2">
                         <i class="iconfont" :class="item.icon"></i>
                       </span>
                       <el-image :src="item.icon" style="width: 20px; height: 20px" v-else />
@@ -143,18 +143,18 @@
 </template>
 
 <script setup>
-import {CirclePlus, Setting, UserFilled} from "@element-plus/icons-vue";
+import { CirclePlus, Setting, UserFilled } from "@element-plus/icons-vue";
 import ThemeChange from "@/components/ThemeChange.vue";
 import avatarImg from "@/assets/img/avatar.jpg";
-import {useRouter} from "vue-router";
-import {onMounted, ref, watch} from "vue";
-import {httpGet} from "@/utils/http";
-import {ElMessage} from "element-plus";
-import {checkSession, getLicenseInfo, getSystemInfo} from "@/store/cache";
-import {removeUserToken} from "@/store/session";
-import {useSharedStore} from "@/store/sharedata";
+import { useRouter } from "vue-router";
+import { onMounted, ref, watch } from "vue";
+import { httpGet } from "@/utils/http";
+import { ElMessage } from "element-plus";
+import { checkSession, getLicenseInfo, getSystemInfo } from "@/store/cache";
+import { removeUserToken } from "@/store/session";
+import { useSharedStore } from "@/store/sharedata";
 import ConfigDialog from "@/components/UserInfoDialog.vue";
-import {showMessageError} from "@/utils/dialog";
+import { showMessageError } from "@/utils/dialog";
 
 const isCollapse = ref(true);
 const router = useRouter();
@@ -216,9 +216,10 @@ if (curPath.value === "/external") {
 }
 const changeNav = (item) => {
   curPath.value = item.url;
+  console.log(item.url);
   if (item.url.indexOf("http") !== -1) {
     // 外部链接
-    window.open(item.url, "_blank");
+    router.push({ path: "/external", query: { url: item.url, title: item.name } });
   } else {
     // 路由切换，确保路径变化
     if (router.currentRoute.value.path !== item.url) {
diff --git a/web/src/views/Invitation.vue b/web/src/views/Invitation.vue
index b3adeab5..18c20e61 100644
--- a/web/src/views/Invitation.vue
+++ b/web/src/views/Invitation.vue
@@ -2,13 +2,12 @@
   <div class="custom-scroll">
     <div class="page-invitation">
       <div class="inner">
-        <h2>会员推广计划</h2>
+        <h2 class="text-2xl p-4 font-bold">会员推广计划</h2>
         <div class="share-box">
           <div class="info">
             我们非常欢迎您把此应用分享给您身边的朋友，分享成功注册后您和被邀请人都将获得
             <strong>{{ invitePower }}</strong>
-            算力额度作为奖励。
-            你可以保存下面的二维码或者直接复制分享您的专属推广链接发送给微信好友。
+            算力额度作为奖励。 你可以保存下面的二维码或者直接复制分享您的专属推广链接发送给微信好友。
           </div>
 
           <div class="invite-qrcode">
@@ -17,13 +16,7 @@
 
           <div class="invite-url">
             <span>{{ inviteURL }}</span>
-            <el-button
-              type="primary"
-              plain
-              class="copy-link"
-              :data-clipboard-text="inviteURL"
-              >复制链接</el-button
-            >
+            <el-button type="primary" plain class="copy-link" :data-clipboard-text="inviteURL">复制链接</el-button>
           </div>
         </div>
 
@@ -83,7 +76,7 @@
           </el-row>
         </div>
         <div class="box-card">
-          <h2>您推荐的用户</h2>
+          <h2 class="text-xl pb-4">您推荐的用户</h2>
 
           <div class="invite-logs">
             <invite-list v-if="isLogin" />
@@ -139,17 +132,13 @@ const initData = () => {
           if (hits.value > 0) {
             rate.value = ((regNum.value / hits.value) * 100).toFixed(2);
           }
-          QRCode.toDataURL(
-            text,
-            { width: 400, height: 400, margin: 2 },
-            (error, url) => {
-              if (error) {
-                console.error(error);
-              } else {
-                qrImg.value = url;
-              }
+          QRCode.toDataURL(text, { width: 400, height: 400, margin: 2 }, (error, url) => {
+            if (error) {
+              console.error(error);
+            } else {
+              qrImg.value = url;
             }
-          );
+          });
           inviteURL.value = text;
         })
         .catch((e) => {
diff --git a/web/src/views/Luma.vue b/web/src/views/Luma.vue
index 47656d4c..462fcdab 100644
--- a/web/src/views/Luma.vue
+++ b/web/src/views/Luma.vue
@@ -54,7 +54,7 @@
               <div class="container">
                 <div v-if="item.progress === 100">
                   <video class="video" :src="replaceImg(item.video_url)" preload="auto" loop="loop" muted="muted">您的浏览器不支持视频播放</video>
-                  <button class="play" @click="play(item)">
+                  <button class="play flex justify-center items-center" @click="play(item)">
                     <img src="/images/play.svg" alt="" />
                   </button>
                 </div>
diff --git a/web/src/views/PowerLog.vue b/web/src/views/PowerLog.vue
index f9072252..9e6b728e 100644
--- a/web/src/views/PowerLog.vue
+++ b/web/src/views/PowerLog.vue
@@ -158,7 +158,7 @@ const fetchData = () => {
         display flex
         justify-content center
         width 100%
-        padding 20px
+        margin-top 20px
       }
     }
   }
diff --git a/web/src/views/admin/ApiKey.vue b/web/src/views/admin/ApiKey.vue
index f0b0f81b..d5b5be14 100644
--- a/web/src/views/admin/ApiKey.vue
+++ b/web/src/views/admin/ApiKey.vue
@@ -1,14 +1,8 @@
 <template>
   <div class="container list" v-loading="loading">
-
     <div class="handle-box">
       <el-select v-model="query.type" placeholder="类型" class="handle-input">
-        <el-option
-            v-for="item in types"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-        />
+        <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value" />
       </el-select>
 
       <el-button :icon="Search" @click="fetchData">搜索</el-button>
@@ -19,13 +13,13 @@
     </div>
 
     <el-row>
-      <el-table :data="items" :row-key="row => row.id" table-layout="auto">
-        <el-table-column prop="name" label="名称"/>
+      <el-table :data="items" :row-key="(row) => row.id" table-layout="auto">
+        <el-table-column prop="name" label="名称" />
         <el-table-column prop="value" label="API KEY">
           <template #default="scope">
             <span>{{ substr(scope.row.value, 20) }}</span>
             <el-icon class="copy-key" :data-clipboard-text="scope.row.value">
-              <DocumentCopy/>
+              <DocumentCopy />
             </el-icon>
           </template>
         </el-table-column>
@@ -33,26 +27,26 @@
           <template #default="scope">
             <span>{{ substr(scope.row.api_url, 30) }}</span>
             <el-icon class="copy-key" :data-clipboard-text="scope.row.api_url">
-              <DocumentCopy/>
+              <DocumentCopy />
             </el-icon>
           </template>
         </el-table-column>
         <el-table-column prop="type" label="类型">
           <template #default="scope">
-            {{getTypeName(scope.row.type)}}
+            {{ getTypeName(scope.row.type) }}
           </template>
         </el-table-column>
-        <el-table-column prop="proxy_url" label="代理地址"/>
+        <el-table-column prop="proxy_url" label="代理地址" />
 
         <el-table-column label="最后使用时间">
           <template #default="scope">
-            <span v-if="scope.row['last_used_at']">{{ scope.row['last_used_at'] }}</span>
+            <span v-if="scope.row['last_used_at']">{{ scope.row["last_used_at"] }}</span>
             <el-tag v-else>未使用</el-tag>
           </template>
         </el-table-column>
         <el-table-column prop="enabled" label="启用状态">
           <template #default="scope">
-            <el-switch v-model="scope.row['enabled']" @change="set('enabled',scope.row)"/>
+            <el-switch v-model="scope.row['enabled']" @change="set('enabled', scope.row)" />
           </template>
         </el-table-column>
 
@@ -69,194 +63,194 @@
       </el-table>
     </el-row>
 
-    <el-dialog
-        v-model="showDialog"
-        :close-on-click-modal="false"
-        :title="title"
-    >
+    <el-dialog v-model="showDialog" :close-on-click-modal="false" :title="title">
       <el-form :model="item" label-width="120px" ref="formRef" :rules="rules">
         <el-form-item label="名称：" prop="name">
-          <el-input v-model="item.name" autocomplete="off"/>
+          <el-input v-model="item.name" autocomplete="off" />
         </el-form-item>
         <el-form-item label="类型：" prop="type">
           <el-select v-model="item.type" placeholder="请选择类型" @change="changeType">
-            <el-option v-for="item in types" :value="item.value" :label="item.label" :key="item.value">{{
-                item.label
-              }}
-            </el-option>
+            <el-option v-for="item in types" :value="item.value" :label="item.label" :key="item.value">{{ item.label }} </el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="API KEY：" prop="value">
-          <el-input v-model="item.value" autocomplete="off"/>
+          <el-input v-model="item.value" autocomplete="off" />
         </el-form-item>
         <el-form-item label="API URL：" prop="api_url">
-          <el-input v-model="item.api_url" autocomplete="off"
-                    placeholder="只填 BASE URL 即可，如：https://api.openai.com 或者 wss://api.openai.com"/>
+          <el-input v-model="item.api_url" autocomplete="off" placeholder="只填 BASE URL 即可，如：https://api.openai.com 或者 wss://api.openai.com" />
         </el-form-item>
 
-<!--        <el-form-item label="代理地址：" prop="proxy_url">-->
-<!--          <el-input v-model="item.proxy_url" autocomplete="off"/>-->
-<!--          <div class="info">如果想要通过代理来访问 API，请填写代理地址，如：http://127.0.0.1:7890</div>-->
-<!--        </el-form-item>-->
+        <!--        <el-form-item label="代理地址：" prop="proxy_url">-->
+        <!--          <el-input v-model="item.proxy_url" autocomplete="off"/>-->
+        <!--          <div class="info">如果想要通过代理来访问 API，请填写代理地址，如：http://127.0.0.1:7890</div>-->
+        <!--        </el-form-item>-->
 
         <el-form-item label="启用状态：" prop="enable">
-          <el-switch v-model="item.enabled"/>
+          <el-switch v-model="item.enabled" />
         </el-form-item>
       </el-form>
 
       <template #footer>
-            <span class="dialog-footer">
-              <el-button @click="showDialog = false">取消</el-button>
-              <el-button type="primary" @click="save">提交</el-button>
-            </span>
+        <span class="dialog-footer">
+          <el-button @click="showDialog = false">取消</el-button>
+          <el-button type="primary" @click="save">提交</el-button>
+        </span>
       </template>
     </el-dialog>
   </div>
 </template>
 
 <script setup>
-import {onMounted, onUnmounted, reactive, ref} from "vue";
-import {httpGet, httpPost} from "@/utils/http";
-import {ElMessage} from "element-plus";
-import {dateFormat, removeArrayItem, substr} from "@/utils/libs";
-import {DocumentCopy, Plus, ShoppingCart, Search} from "@element-plus/icons-vue";
+import { onMounted, onUnmounted, reactive, ref } from "vue";
+import { httpGet, httpPost } from "@/utils/http";
+import { ElMessage } from "element-plus";
+import { dateFormat, removeArrayItem, substr } from "@/utils/libs";
+import { DocumentCopy, Plus, ShoppingCart, Search } from "@element-plus/icons-vue";
 import ClipboardJS from "clipboard";
 
 // 变量定义
-const items = ref([])
-const query = ref({type: ''})
+const items = ref([]);
+const query = ref({ type: "" });
 const item = ref({
-  enabled: true, api_url: ""
-})
-const showDialog = ref(false)
+  enabled: true,
+  api_url: "",
+});
+const showDialog = ref(false);
 const rules = reactive({
-  name: [{required: true, message: '请输入名称', trigger: 'change',}],
-  type: [{required: true, message: '请选择用途', trigger: 'change',}],
-  value: [{required: true, message: '请输入 API KEY 值', trigger: 'change',}]
-})
+  name: [{ required: true, message: "请输入名称", trigger: "change" }],
+  type: [{ required: true, message: "请选择用途", trigger: "change" }],
+  value: [{ required: true, message: "请输入 API KEY 值", trigger: "change" }],
+});
 
-const loading = ref(true)
-const formRef = ref(null)
-const title = ref("")
+const loading = ref(true);
+const formRef = ref(null);
+const title = ref("");
 const types = ref([
-  {label: "对话", value:"chat"},
-  {label: "Midjourney", value:"mj"},
-  {label: "Stable-Diffusion", value:"sd"},
-  {label: "DALL-E", value:"dalle"},
-  {label: "Suno文生歌", value:"suno"},
-  {label: "Luma视频", value:"luma"},
-  {label: "Realtime API", value:"realtime"},
-])
-const isEdit = ref(false)
-const clipboard = ref(null)
+  { label: "对话", value: "chat" },
+  { label: "Midjourney", value: "mj" },
+  { label: "Stable-Diffusion", value: "sd" },
+  { label: "DALL-E", value: "dalle" },
+  { label: "Suno文生歌", value: "suno" },
+  { label: "Luma视频", value: "luma" },
+  { label: "Realtime API", value: "realtime" },
+]);
+const isEdit = ref(false);
+const clipboard = ref(null);
 onMounted(() => {
-  clipboard.value = new ClipboardJS('.copy-key');
-  clipboard.value.on('success', () => {
-    ElMessage.success('复制成功！');
-  })
+  clipboard.value = new ClipboardJS(".copy-key");
+  clipboard.value.on("success", () => {
+    ElMessage.success("复制成功！");
+  });
 
-  clipboard.value.on('error', () => {
-    ElMessage.error('复制失败！');
-  })
+  clipboard.value.on("error", () => {
+    ElMessage.error("复制失败！");
+  });
 
-  fetchData()
-})
+  fetchData();
+});
 
 onUnmounted(() => {
-  clipboard.value.destroy()
-})
+  clipboard.value.destroy();
+});
 
 const changeType = (event) => {
   if (isEdit.value) {
-    return
+    return;
   }
-  
-  if (event === 'realtime') {
-    item.value.api_url = "wss://api.geekai.pro"
+
+  if (event === "realtime") {
+    item.value.api_url = "wss://api.geekai.pro";
   } else {
-    item.value.api_url = "https://api.geekai.pro"
+    item.value.api_url = "https://api.geekai.pro";
   }
-}
+};
 
 const getTypeName = (type) => {
   for (let v of types.value) {
     if (v.value === type) {
-      return v.label
+      return v.label;
     }
   }
-  return ""
-}
+  return "";
+};
 
 // 获取数据
 
 const fetchData = () => {
-  httpGet('/api/admin/apikey/list', query.value).then((res) => {
-    if (res.data) {
-      // 初始化数据
-      const arr = res.data;
-      for (let i = 0; i < arr.length; i++) {
-        arr[i].last_used_at = dateFormat(arr[i].last_used_at)
+  httpGet("/api/admin/apikey/list", query.value)
+    .then((res) => {
+      if (res.data) {
+        // 初始化数据
+        const arr = res.data;
+        for (let i = 0; i < arr.length; i++) {
+          arr[i].last_used_at = dateFormat(arr[i].last_used_at);
+        }
+        items.value = arr;
       }
-      items.value = arr
-    }
-    loading.value = false
-  }).catch(() => {
-    ElMessage.error("获取数据失败");
-  })
-}
+      loading.value = false;
+    })
+    .catch(() => {
+      ElMessage.error("获取数据失败");
+    });
+};
 
 const add = function () {
-  showDialog.value = true
-  title.value = "新增 API KEY"
-  isEdit.value = false
-}
+  showDialog.value = true;
+  title.value = "新增 API KEY";
+  isEdit.value = false;
+};
 
 const edit = function (row) {
-  showDialog.value = true
-  title.value = "修改 API KEY"
-  item.value = row
-  isEdit.value = true
-}
+  showDialog.value = true;
+  title.value = "修改 API KEY";
+  item.value = row;
+  isEdit.value = true;
+};
 
 const save = function () {
   formRef.value.validate((valid) => {
     if (valid) {
-      showDialog.value = false
-      httpPost('/api/admin/apikey/save', item.value).then((res) => {
-        ElMessage.success('操作成功！')
-        if (!item.value['id']) {
-          const newItem = res.data
-          newItem.last_used_at = dateFormat(newItem.last_used_at)
-          items.value.push(newItem)
-        }
-      }).catch((e) => {
-        ElMessage.error('操作失败，' + e.message)
-      })
+      showDialog.value = false;
+      httpPost("/api/admin/apikey/save", item.value)
+        .then((res) => {
+          ElMessage.success("操作成功！");
+          if (!item.value["id"]) {
+            const newItem = res.data;
+            newItem.last_used_at = dateFormat(newItem.last_used_at);
+            items.value.push(newItem);
+          }
+        })
+        .catch((e) => {
+          ElMessage.error("操作失败，" + e.message);
+        });
     } else {
-      return false
+      return false;
     }
-  })
-}
+  });
+};
 
 const remove = function (row) {
-  httpGet('/api/admin/apikey/remove?id=' + row.id).then(() => {
-    ElMessage.success("删除成功！")
-    items.value = removeArrayItem(items.value, row, (v1, v2) => {
-      return v1.id === v2.id
+  httpGet("/api/admin/apikey/remove?id=" + row.id)
+    .then(() => {
+      ElMessage.success("删除成功！");
+      items.value = removeArrayItem(items.value, row, (v1, v2) => {
+        return v1.id === v2.id;
+      });
     })
-  }).catch((e) => {
-    ElMessage.error("删除失败：" + e.message)
-  })
-}
+    .catch((e) => {
+      ElMessage.error("删除失败：" + e.message);
+    });
+};
 
 const set = (filed, row) => {
-  httpPost('/api/admin/apikey/set', {id: row.id, filed: filed, value: row[filed]}).then(() => {
-    ElMessage.success("操作成功！")
-  }).catch(e => {
-    ElMessage.error("操作失败：" + e.message)
-  })
-}
-
+  httpPost("/api/admin/apikey/set", { id: row.id, filed: filed, value: row[filed] })
+    .then(() => {
+      ElMessage.success("操作成功！");
+    })
+    .catch((e) => {
+      ElMessage.error("操作失败：" + e.message);
+    });
+};
 </script>
 
 <style lang="stylus" scoped>
@@ -295,4 +289,4 @@ const set = (filed, row) => {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/web/src/views/admin/ChatList.vue b/web/src/views/admin/ChatList.vue
index f3e630da..a88752d0 100644
--- a/web/src/views/admin/ChatList.vue
+++ b/web/src/views/admin/ChatList.vue
@@ -3,18 +3,8 @@
     <el-tabs v-model="activeName" @tab-change="handleChange">
       <el-tab-pane label="对话列表" name="chat" v-loading="data.chat.loading">
         <div class="handle-box">
-          <el-input
-            v-model.number="data.chat.query.user_id"
-            placeholder="账户ID"
-            class="handle-input mr10"
-            @keyup="searchChat($event)"
-          ></el-input>
-          <el-input
-            v-model="data.chat.query.title"
-            placeholder="对话标题"
-            class="handle-input mr10"
-            @keyup="searchChat($event)"
-          ></el-input>
+          <el-input v-model.number="data.chat.query.user_id" placeholder="账户ID" class="handle-input mr10" @keyup="searchChat($event)"></el-input>
+          <el-input v-model="data.chat.query.title" placeholder="对话标题" class="handle-input mr10" @keyup="searchChat($event)"></el-input>
           <el-date-picker
             v-model="data.chat.query.created_at"
             type="daterange"
@@ -22,24 +12,13 @@
             end-placeholder="结束日期"
             format="YYYY-MM-DD"
             value-format="YYYY-MM-DD"
-            style="
-              margin-right: 10px;
-              width: 200px;
-              position: relative;
-              top: 3px;
-            "
+            style="margin-right: 10px; width: 200px; position: relative; top: 3px"
           />
-          <el-button type="primary" :icon="Search" @click="fetchChatData"
-            >搜索</el-button
-          >
+          <el-button type="primary" :icon="Search" @click="fetchChatData">搜索</el-button>
         </div>
 
         <el-row>
-          <el-table
-            :data="data.chat.items"
-            :row-key="(row) => row.id"
-            table-layout="auto"
-          >
+          <el-table :data="data.chat.items" :row-key="(row) => row.id" table-layout="auto">
             <el-table-column prop="user_id" label="账户ID" />
             <el-table-column prop="username" label="账户" />
             <el-table-column label="图标">
@@ -65,16 +44,8 @@
 
             <el-table-column label="操作" width="180">
               <template #default="scope">
-                <el-button
-                  size="small"
-                  type="primary"
-                  @click="showMessages(scope.row)"
-                  >查看</el-button
-                >
-                <el-popconfirm
-                  title="确定要删除当前记录吗?"
-                  @confirm="removeChat(scope.row)"
-                >
+                <el-button size="small" type="primary" @click="showMessages(scope.row)">查看</el-button>
+                <el-popconfirm title="确定要删除当前记录吗?" @confirm="removeChat(scope.row)">
                   <template #reference>
                     <el-button size="small" type="danger">删除</el-button>
                   </template>
@@ -99,24 +70,9 @@
       </el-tab-pane>
       <el-tab-pane label="消息记录" name="message">
         <div class="handle-box">
-          <el-input
-            v-model.number="data.message.query.user_id"
-            placeholder="账户ID"
-            class="handle-input mr10"
-            @keyup="searchMessage($event)"
-          ></el-input>
-          <el-input
-            v-model="data.message.query.content"
-            placeholder="消息内容"
-            class="handle-input mr10"
-            @keyup="searchMessage($event)"
-          ></el-input>
-          <el-input
-            v-model="data.message.query.model"
-            placeholder="模型"
-            class="handle-input mr10"
-            @keyup="searchMessage($event)"
-          ></el-input>
+          <el-input v-model.number="data.message.query.user_id" placeholder="账户ID" class="handle-input mr10" @keyup="searchMessage($event)"></el-input>
+          <el-input v-model="data.message.query.content" placeholder="消息内容" class="handle-input mr10" @keyup="searchMessage($event)"></el-input>
+          <el-input v-model="data.message.query.model" placeholder="模型" class="handle-input mr10" @keyup="searchMessage($event)"></el-input>
           <el-date-picker
             v-model="data.message.query.created_at"
             type="daterange"
@@ -124,24 +80,13 @@
             end-placeholder="结束日期"
             format="YYYY-MM-DD"
             value-format="YYYY-MM-DD"
-            style="
-              margin-right: 10px;
-              width: 200px;
-              position: relative;
-              top: 3px;
-            "
+            style="margin-right: 10px; width: 200px; position: relative; top: 3px"
           />
-          <el-button type="primary" :icon="Search" @click="fetchMessageData"
-            >搜索</el-button
-          >
+          <el-button type="primary" :icon="Search" @click="fetchMessageData">搜索</el-button>
         </div>
 
         <el-row>
-          <el-table
-            :data="data.message.items"
-            :row-key="(row) => row.id"
-            table-layout="auto"
-          >
+          <el-table :data="data.message.items" :row-key="(row) => row.id" table-layout="auto">
             <el-table-column prop="user_id" label="账户ID" />
             <el-table-column prop="username" label="账户" />
             <el-table-column label="角色">
@@ -153,11 +98,7 @@
 
             <el-table-column label="消息内容">
               <template #default="scope">
-                <el-text
-                  style="width: 200px"
-                  truncated
-                  @click="showContent(scope.row.content)"
-                >
+                <el-text style="width: 200px" truncated @click="showContent(scope.row.content)">
                   {{ scope.row.content }}
                 </el-text>
               </template>
@@ -173,16 +114,8 @@
 
             <el-table-column label="操作" width="180">
               <template #default="scope">
-                <el-button
-                  size="small"
-                  type="primary"
-                  @click="showContent(scope.row.content)"
-                  >查看</el-button
-                >
-                <el-popconfirm
-                  title="确定要删除当前记录吗?"
-                  @confirm="removeMessage(scope.row)"
-                >
+                <el-button size="small" type="primary" @click="showContent(scope.row.content)">查看</el-button>
+                <el-popconfirm title="确定要删除当前记录吗?" @confirm="removeMessage(scope.row)">
                   <template #reference>
                     <el-button size="small" type="danger">删除</el-button>
                   </template>
@@ -207,31 +140,17 @@
       </el-tab-pane>
     </el-tabs>
 
-    <el-dialog
-      v-model="showContentDialog"
-      title="消息详情"
-      class="chat-dialog"
-      style="--el-dialog-width: 60%"
-    >
+    <el-dialog v-model="showContentDialog" title="消息详情" class="chat-dialog" style="--el-dialog-width: 60%">
       <div class="chat-detail">
         <div class="chat-line" v-html="dialogContent"></div>
       </div>
     </el-dialog>
 
-    <el-dialog
-      v-model="showChatItemDialog"
-      title="对话详情"
-      class="chat-dialog"
-      style="--el-dialog-width: 60%"
-    >
+    <el-dialog v-model="showChatItemDialog" title="对话详情" class="chat-dialog" style="--el-dialog-width: 60%">
       <div class="chat-box chat-page">
         <div v-for="item in messages" :key="item.id">
           <chat-prompt v-if="item.type === 'prompt'" :data="item" />
-          <chat-reply
-            v-else-if="item.type === 'reply'"
-            :read-only="true"
-            :data="item"
-          />
+          <chat-reply v-else-if="item.type === 'reply'" :read-only="true" :data="item" />
         </div>
       </div>
       <!-- end chat box -->
@@ -258,7 +177,7 @@ const data = ref({
     total: 0,
     page: 1,
     pageSize: 15,
-    loading: true
+    loading: true,
   },
   message: {
     items: [],
@@ -266,8 +185,8 @@ const data = ref({
     total: 0,
     page: 1,
     pageSize: 15,
-    loading: true
-  }
+    loading: true,
+  },
 });
 const activeName = ref("chat");
 
@@ -376,7 +295,7 @@ const md = require("markdown-it")({
     const preCode = md.utils.escapeHtml(str);
     // 将代码包裹在 pre 中
     return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code></pre>`;
-  }
+  },
 });
 md.use(mathjaxPlugin);
 
@@ -431,7 +350,7 @@ const showMessages = (row) => {
   }
 
   .pagination {
-    padding 20px 0
+    margin-top 20px
     display flex
     justify-content right
   }
diff --git a/web/src/views/admin/ImageList.vue b/web/src/views/admin/ImageList.vue
index 857bf420..47c66b33 100644
--- a/web/src/views/admin/ImageList.vue
+++ b/web/src/views/admin/ImageList.vue
@@ -3,38 +3,36 @@
     <el-tabs v-model="activeName" @tab-change="handleChange">
       <el-tab-pane label="Midjourney" name="mj" v-loading="data.mj.loading">
         <div class="handle-box">
-          <el-input v-model="data.mj.query.username" placeholder="用户名" class="handle-input mr10"
-                    @keyup="search($event,'mj')" clearable />
-          <el-input v-model="data.mj.query.prompt" placeholder="提示词" class="handle-input mr10"
-                    @keyup="search($event,'mj')" clearable />
+          <el-input v-model="data.mj.query.username" placeholder="用户名" class="handle-input mr10" @keyup="search($event, 'mj')" clearable />
+          <el-input v-model="data.mj.query.prompt" placeholder="提示词" class="handle-input mr10" @keyup="search($event, 'mj')" clearable />
           <el-date-picker
-              v-model="data.mj.query.created_at"
-              type="daterange"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              format="YYYY-MM-DD"
-              value-format="YYYY-MM-DD"
-              style="margin-right: 10px;width: 200px; position: relative;top:3px;"
+            v-model="data.mj.query.created_at"
+            type="daterange"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+            style="margin-right: 10px; width: 200px; position: relative; top: 3px"
           />
           <el-button type="primary" :icon="Search" @click="fetchMjData">搜索</el-button>
         </div>
 
         <div v-if="data.mj.items.length > 0">
           <el-row>
-            <el-table :data="data.mj.items" :row-key="row => row.id" table-layout="auto">
-              <el-table-column prop="user_id" label="用户ID"/>
+            <el-table :data="data.mj.items" :row-key="(row) => row.id" table-layout="auto">
+              <el-table-column prop="user_id" label="用户ID" />
               <el-table-column label="任务类型">
                 <template #default="scope">
-                  <el-button :color="taskTypeTheme[scope.row.type].color" size="small" plain>{{taskTypeTheme[scope.row.type].text}}</el-button>
+                  <el-button :color="taskTypeTheme[scope.row.type].color" size="small" plain>{{ taskTypeTheme[scope.row.type].text }}</el-button>
                 </template>
               </el-table-column>
               <el-table-column prop="progress" label="任务进度">
                 <template #default="scope">
-                  <span v-if="scope.row.progress <= 100">{{scope.row.progress}}%</span>
+                  <span v-if="scope.row.progress <= 100">{{ scope.row.progress }}%</span>
                   <el-tag v-else type="danger">已失败</el-tag>
                 </template>
               </el-table-column>
-              <el-table-column prop="power" label="消耗算力"/>
+              <el-table-column prop="power" label="消耗算力" />
               <el-table-column label="结果图片">
                 <template #default="scope">
                   <el-button size="small" type="success" @click="showImage(scope.row.img_url)" v-if="scope.row.img_url !== ''" plain>预览图片</el-button>
@@ -42,13 +40,7 @@
               </el-table-column>
               <el-table-column label="提示词">
                 <template #default="scope">
-                  <el-popover
-                      placement="top-start"
-                      title="绘画提示词"
-                      :width="300"
-                      trigger="hover"
-                      :content="scope.row.prompt"
-                  >
+                  <el-popover placement="top-start" title="绘画提示词" :width="300" trigger="hover" :content="scope.row.prompt">
                     <template #reference>
                       <span>{{ substr(scope.row.prompt, 20) }}</span>
                     </template>
@@ -57,18 +49,18 @@
               </el-table-column>
               <el-table-column label="创建时间">
                 <template #default="scope">
-                  <span>{{ dateFormat(scope.row['created_at']) }}</span>
+                  <span>{{ dateFormat(scope.row["created_at"]) }}</span>
                 </template>
               </el-table-column>
               <el-table-column label="失败原因">
                 <template #default="scope">
                   <el-popover
-                      placement="top-start"
-                      title="失败原因"
-                      :width="300"
-                      trigger="hover"
-                      :content="scope.row.err_msg"
-                      v-if="scope.row.progress === 101"
+                    placement="top-start"
+                    title="失败原因"
+                    :width="300"
+                    trigger="hover"
+                    :content="scope.row.err_msg"
+                    v-if="scope.row.progress === 101"
                   >
                     <template #reference>
                       <el-text type="danger">{{ substr(scope.row.err_msg, 20) }}</el-text>
@@ -90,48 +82,47 @@
           </el-row>
 
           <div class="pagination">
-            <el-pagination v-if="data.mj.total > 0" background
-                           layout="total,prev, pager, next"
-                           :hide-on-single-page="true"
-                           
-                           v-model:current-page="data.mj.page"
-                           v-model:page-size="data.mj.pageSize"
-                           @current-change="fetchMjData()"
-                           :total="data.mj.total"/>
-
+            <el-pagination
+              v-if="data.mj.total > 0"
+              background
+              layout="total,prev, pager, next"
+              :hide-on-single-page="true"
+              v-model:current-page="data.mj.page"
+              v-model:page-size="data.mj.pageSize"
+              @current-change="fetchMjData()"
+              :total="data.mj.total"
+            />
           </div>
         </div>
         <el-empty v-else />
       </el-tab-pane>
       <el-tab-pane label="Stable-Diffusion" name="sd" v-loading="data.sd.loading">
         <div class="handle-box">
-          <el-input v-model="data.sd.query.username" placeholder="用户名" class="handle-input mr10"
-                    @keyup="search($event, 'sd')" clearable />
-          <el-input v-model="data.sd.query.prompt" placeholder="提示词" class="handle-input mr10"
-                    @keyup="search($event, 'sd')" clearable />
+          <el-input v-model="data.sd.query.username" placeholder="用户名" class="handle-input mr10" @keyup="search($event, 'sd')" clearable />
+          <el-input v-model="data.sd.query.prompt" placeholder="提示词" class="handle-input mr10" @keyup="search($event, 'sd')" clearable />
           <el-date-picker
-              v-model="data.sd.query.created_at"
-              type="daterange"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              format="YYYY-MM-DD"
-              value-format="YYYY-MM-DD"
-              style="margin-right: 10px;width: 200px; position: relative;top:3px;"
+            v-model="data.sd.query.created_at"
+            type="daterange"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+            style="margin-right: 10px; width: 200px; position: relative; top: 3px"
           />
           <el-button type="primary" :icon="Search" @click="fetchSdData">搜索</el-button>
         </div>
 
         <div v-if="data.sd.items.length > 0">
           <el-row>
-            <el-table :data="data.sd.items" :row-key="row => row.id" table-layout="auto">
-              <el-table-column prop="user_id" label="用户ID"/>
+            <el-table :data="data.sd.items" :row-key="(row) => row.id" table-layout="auto">
+              <el-table-column prop="user_id" label="用户ID" />
               <el-table-column prop="progress" label="任务进度">
                 <template #default="scope">
-                  <span v-if="scope.row.progress <= 100">{{scope.row.progress}}%</span>
+                  <span v-if="scope.row.progress <= 100">{{ scope.row.progress }}%</span>
                   <el-tag v-else type="danger">已失败</el-tag>
                 </template>
               </el-table-column>
-              <el-table-column prop="power" label="消耗算力"/>
+              <el-table-column prop="power" label="消耗算力" />
               <el-table-column label="结果图片">
                 <template #default="scope">
                   <el-button size="small" type="success" @click="showImage(scope.row.img_url)" v-if="scope.row.img_url !== ''" plain>预览图片</el-button>
@@ -139,13 +130,7 @@
               </el-table-column>
               <el-table-column label="提示词">
                 <template #default="scope">
-                  <el-popover
-                      placement="top-start"
-                      title="绘画提示词"
-                      :width="300"
-                      trigger="hover"
-                      :content="scope.row.prompt"
-                  >
+                  <el-popover placement="top-start" title="绘画提示词" :width="300" trigger="hover" :content="scope.row.prompt">
                     <template #reference>
                       <span>{{ substr(scope.row.prompt, 20) }}</span>
                     </template>
@@ -154,18 +139,18 @@
               </el-table-column>
               <el-table-column label="创建时间">
                 <template #default="scope">
-                  <span>{{ dateFormat(scope.row['created_at']) }}</span>
+                  <span>{{ dateFormat(scope.row["created_at"]) }}</span>
                 </template>
               </el-table-column>
               <el-table-column label="失败原因">
                 <template #default="scope">
                   <el-popover
-                      placement="top-start"
-                      title="失败原因"
-                      :width="300"
-                      trigger="hover"
-                      :content="scope.row.err_msg"
-                      v-if="scope.row.progress === 101"
+                    placement="top-start"
+                    title="失败原因"
+                    :width="300"
+                    trigger="hover"
+                    :content="scope.row.err_msg"
+                    v-if="scope.row.progress === 101"
                   >
                     <template #reference>
                       <el-text type="danger">{{ substr(scope.row.err_msg, 20) }}</el-text>
@@ -187,47 +172,47 @@
           </el-row>
 
           <div class="pagination">
-            <el-pagination v-if="data.sd.total > 0" background
-                           layout="total,prev, pager, next"
-                           :hide-on-single-page="true"
-                           v-model:current-page="data.sd.page"
-                           v-model:page-size="data.sd.pageSize"
-                           @current-change="fetchSdData()"
-                           :total="data.sd.total"/>
-
+            <el-pagination
+              v-if="data.sd.total > 0"
+              background
+              layout="total,prev, pager, next"
+              :hide-on-single-page="true"
+              v-model:current-page="data.sd.page"
+              v-model:page-size="data.sd.pageSize"
+              @current-change="fetchSdData()"
+              :total="data.sd.total"
+            />
           </div>
         </div>
         <el-empty v-else />
       </el-tab-pane>
       <el-tab-pane label="DALL-E" name="dall">
         <div class="handle-box">
-          <el-input v-model="data.dall.query.username" placeholder="用户名" class="handle-input mr10"
-                    @keyup="search($event,'dall')" clearable />
-          <el-input v-model="data.dall.query.prompt" placeholder="提示词" class="handle-input mr10"
-                    @keyup="search($event, 'dall')" clearable />
+          <el-input v-model="data.dall.query.username" placeholder="用户名" class="handle-input mr10" @keyup="search($event, 'dall')" clearable />
+          <el-input v-model="data.dall.query.prompt" placeholder="提示词" class="handle-input mr10" @keyup="search($event, 'dall')" clearable />
           <el-date-picker
-              v-model="data.dall.query.created_at"
-              type="daterange"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              format="YYYY-MM-DD"
-              value-format="YYYY-MM-DD"
-              style="margin-right: 10px;width: 200px; position: relative;top:3px;"
+            v-model="data.dall.query.created_at"
+            type="daterange"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+            style="margin-right: 10px; width: 200px; position: relative; top: 3px"
           />
           <el-button type="primary" :icon="Search" @click="fetchDallData">搜索</el-button>
         </div>
 
         <div v-if="data.dall.items.length > 0">
           <el-row>
-            <el-table :data="data.dall.items" :row-key="row => row.id" table-layout="auto">
-              <el-table-column prop="user_id" label="用户ID"/>
+            <el-table :data="data.dall.items" :row-key="(row) => row.id" table-layout="auto">
+              <el-table-column prop="user_id" label="用户ID" />
               <el-table-column prop="progress" label="任务进度">
                 <template #default="scope">
-                  <span v-if="scope.row.progress <= 100">{{scope.row.progress}}%</span>
+                  <span v-if="scope.row.progress <= 100">{{ scope.row.progress }}%</span>
                   <el-tag v-else type="danger">已失败</el-tag>
                 </template>
               </el-table-column>
-              <el-table-column prop="power" label="消耗算力"/>
+              <el-table-column prop="power" label="消耗算力" />
               <el-table-column label="结果图片">
                 <template #default="scope">
                   <el-button size="small" type="success" @click="showImage(scope.row.img_url)" v-if="scope.row.img_url !== ''" plain>预览图片</el-button>
@@ -235,13 +220,7 @@
               </el-table-column>
               <el-table-column label="提示词">
                 <template #default="scope">
-                  <el-popover
-                      placement="top-start"
-                      title="绘画提示词"
-                      :width="300"
-                      trigger="hover"
-                      :content="scope.row.prompt"
-                  >
+                  <el-popover placement="top-start" title="绘画提示词" :width="300" trigger="hover" :content="scope.row.prompt">
                     <template #reference>
                       <span>{{ substr(scope.row.prompt, 20) }}</span>
                     </template>
@@ -250,18 +229,18 @@
               </el-table-column>
               <el-table-column label="创建时间">
                 <template #default="scope">
-                  <span>{{ dateFormat(scope.row['created_at']) }}</span>
+                  <span>{{ dateFormat(scope.row["created_at"]) }}</span>
                 </template>
               </el-table-column>
               <el-table-column label="失败原因">
                 <template #default="scope">
                   <el-popover
-                      placement="top-start"
-                      title="失败原因"
-                      :width="300"
-                      trigger="hover"
-                      :content="scope.row.err_msg"
-                      v-if="scope.row.progress === 101"
+                    placement="top-start"
+                    title="失败原因"
+                    :width="300"
+                    trigger="hover"
+                    :content="scope.row.err_msg"
+                    v-if="scope.row.progress === 101"
                   >
                     <template #reference>
                       <el-text type="danger">{{ substr(scope.row.err_msg, 20) }}</el-text>
@@ -283,174 +262,171 @@
           </el-row>
 
           <div class="pagination">
-            <el-pagination v-if="data.dall.total > 0" background
-                           layout="total,prev, pager, next"
-                           :hide-on-single-page="true"
-                           v-model:current-page="data.dall.page"
-                           v-model:page-size="data.dall.pageSize"
-                           @current-change="fetchDallData()"
-                           :total="data.dall.total"/>
-
+            <el-pagination
+              v-if="data.dall.total > 0"
+              background
+              layout="total,prev, pager, next"
+              :hide-on-single-page="true"
+              v-model:current-page="data.dall.page"
+              v-model:page-size="data.dall.pageSize"
+              @current-change="fetchDallData()"
+              :total="data.dall.total"
+            />
           </div>
         </div>
         <el-empty v-else />
       </el-tab-pane>
     </el-tabs>
 
-
-    <el-dialog
-        v-model="showImageDialog"
-        title="图片预览"
-    >
-      <el-image
-          :src="imgURL"
-          :zoom-rate="1.2"
-          :max-scale="7"
-          :min-scale="0.2"
-          :preview-src-list="[imgURL]"
-          :initial-index="0"
-          fit="cover"
-      />
+    <el-dialog v-model="showImageDialog" title="图片预览">
+      <el-image :src="imgURL" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="[imgURL]" :initial-index="0" fit="cover" />
     </el-dialog>
-
   </div>
 </template>
 
 <script setup>
-import {onMounted, ref} from "vue";
-import {httpGet, httpPost} from "@/utils/http";
-import {ElMessage} from "element-plus";
-import {dateFormat, substr} from "@/utils/libs";
-import {Search} from "@element-plus/icons-vue";
+import { onMounted, ref } from "vue";
+import { httpGet, httpPost } from "@/utils/http";
+import { ElMessage } from "element-plus";
+import { dateFormat, substr } from "@/utils/libs";
+import { Search } from "@element-plus/icons-vue";
 
 // 变量定义
 const data = ref({
-  "mj": {
+  mj: {
     items: [],
-    query: {prompt: "", username: "", created_at: [], page: 1, page_size: 15},
+    query: { prompt: "", username: "", created_at: [], page: 1, page_size: 15 },
     total: 0,
     page: 1,
     pageSize: 15,
-    loading: true
+    loading: true,
   },
-  "sd": {
+  sd: {
     items: [],
-    query: {prompt: "", username: "", created_at: [], page: 1, page_size: 15},
+    query: { prompt: "", username: "", created_at: [], page: 1, page_size: 15 },
     total: 0,
     page: 1,
     pageSize: 15,
-    loading: true
+    loading: true,
   },
-  "dall": {
+  dall: {
     items: [],
-    query: {prompt: "", username: "", created_at: [], page: 1, page_size: 15},
+    query: { prompt: "", username: "", created_at: [], page: 1, page_size: 15 },
     total: 0,
     page: 1,
     pageSize: 15,
-    loading: true
-  }
-})
-const activeName = ref("mj")
+    loading: true,
+  },
+});
+const activeName = ref("mj");
 const taskTypeTheme = {
-  image: {text: "绘图", color: "#2185d0"},
-  upscale: {text: "放大", color: "#f2711c" },
-  variation: {text: "变换", color: "#00b5ad"},
-  blend: {text: "融图", color: "#21ba45"},
-  swapFace: {text: "换脸", color: "#a333c8"}
-}
+  image: { text: "绘图", color: "#2185d0" },
+  upscale: { text: "放大", color: "#f2711c" },
+  variation: { text: "变换", color: "#00b5ad" },
+  blend: { text: "融图", color: "#21ba45" },
+  swapFace: { text: "换脸", color: "#a333c8" },
+};
 
 onMounted(() => {
-  fetchMjData()
-})
+  fetchMjData();
+});
 
 const handleChange = (tab) => {
   switch (tab) {
     case "mj":
-      fetchMjData()
-      break
+      fetchMjData();
+      break;
     case "sd":
-      fetchSdData()
-      break
+      fetchSdData();
+      break;
     case "dall":
-      fetchDallData()
-      break
+      fetchDallData();
+      break;
   }
-}
+};
 
 // 搜索对话
-const search = (evt,tab) => {
+const search = (evt, tab) => {
   if (evt.keyCode === 13) {
-    handleChange(tab)
+    handleChange(tab);
   }
-}
+};
 
 // 获取数据
 const fetchMjData = () => {
-  const d = data.value.mj
-  d.query.page = d.page
-  d.query.page_size = d.pageSize
-  httpPost('/api/admin/image/list/mj', d.query).then((res) => {
-    if (res.data) {
-      d.items = res.data.items
-      d.total = res.data.total
-      d.page = res.data.page
-      d.pageSize = res.data.page_size
-    }
-    d.loading = false
-  }).catch(e => {
-    ElMessage.error("获取数据失败：" + e.message);
-  })
-}
+  const d = data.value.mj;
+  d.query.page = d.page;
+  d.query.page_size = d.pageSize;
+  httpPost("/api/admin/image/list/mj", d.query)
+    .then((res) => {
+      if (res.data) {
+        d.items = res.data.items;
+        d.total = res.data.total;
+        d.page = res.data.page;
+        d.pageSize = res.data.page_size;
+      }
+      d.loading = false;
+    })
+    .catch((e) => {
+      ElMessage.error("获取数据失败：" + e.message);
+    });
+};
 
 const fetchSdData = () => {
-  const d = data.value.sd
-  d.query.page = d.page
-  d.query.page_size = d.pageSize
-  httpPost('/api/admin/image/list/sd', d.query).then((res) => {
-    if (res.data) {
-      d.items = res.data.items
-      d.total = res.data.total
-      d.page = res.data.page
-      d.pageSize = res.data.page_size
-    }
-    d.loading = false
-  }).catch(e => {
-    ElMessage.error("获取数据失败：" + e.message);
-  })
-}
+  const d = data.value.sd;
+  d.query.page = d.page;
+  d.query.page_size = d.pageSize;
+  httpPost("/api/admin/image/list/sd", d.query)
+    .then((res) => {
+      if (res.data) {
+        d.items = res.data.items;
+        d.total = res.data.total;
+        d.page = res.data.page;
+        d.pageSize = res.data.page_size;
+      }
+      d.loading = false;
+    })
+    .catch((e) => {
+      ElMessage.error("获取数据失败：" + e.message);
+    });
+};
 
 const fetchDallData = () => {
-  const d = data.value.dall
-  d.query.page = d.page
-  d.query.page_size = d.pageSize
-  httpPost('/api/admin/image/list/dall', d.query).then((res) => {
-    if (res.data) {
-      d.items = res.data.items
-      d.total = res.data.total
-      d.page = res.data.page
-      d.pageSize = res.data.page_size
-    }
-    d.loading = false
-  }).catch(e => {
-    ElMessage.error("获取数据失败：" + e.message);
-  })
-}
+  const d = data.value.dall;
+  d.query.page = d.page;
+  d.query.page_size = d.pageSize;
+  httpPost("/api/admin/image/list/dall", d.query)
+    .then((res) => {
+      if (res.data) {
+        d.items = res.data.items;
+        d.total = res.data.total;
+        d.page = res.data.page;
+        d.pageSize = res.data.page_size;
+      }
+      d.loading = false;
+    })
+    .catch((e) => {
+      ElMessage.error("获取数据失败：" + e.message);
+    });
+};
 
-const remove = function (row,tab) {
-  httpGet(`/api/admin/image/remove?id=${row.id}&tab=${tab}`).then(() => {
-    ElMessage.success("删除成功！")
-    handleChange(tab)
-  }).catch((e) => {
-    ElMessage.error("删除失败：" + e.message)
-  })
-}
+const remove = function (row, tab) {
+  httpGet(`/api/admin/image/remove?id=${row.id}&tab=${tab}`)
+    .then(() => {
+      ElMessage.success("删除成功！");
+      handleChange(tab);
+    })
+    .catch((e) => {
+      ElMessage.error("删除失败：" + e.message);
+    });
+};
 
-const showImageDialog = ref(false)
-const imgURL = ref('')
+const showImageDialog = ref(false);
+const imgURL = ref("");
 const showImage = (url) => {
-  showImageDialog.value = true
-  imgURL.value = url
-}
+  showImageDialog.value = true;
+  imgURL.value = url;
+};
 </script>
 
 <style lang="stylus" scoped>
@@ -478,9 +454,9 @@ const showImage = (url) => {
   }
 
   .pagination {
-    padding 20px 0
+    margin-top 20px
     display flex
-    justify-content right
+    justify-content center
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/web/src/views/admin/Login.vue b/web/src/views/admin/Login.vue
index eff9fcbc..2396f661 100644
--- a/web/src/views/admin/Login.vue
+++ b/web/src/views/admin/Login.vue
@@ -5,25 +5,23 @@
       <div class="main">
         <div class="contain">
           <div class="logo" @click="router.push('/')">
-            <el-image :src="logo" fit="cover"/>
+            <el-image :src="logo" fit="cover" />
           </div>
 
           <h1 class="header">登录 {{ title }}</h1>
           <div class="content">
-            <el-input v-model="username" placeholder="请输入用户名" size="large"
-                      autocomplete="off" autofocus @keyup.enter="login">
+            <el-input v-model="username" placeholder="请输入用户名" size="large" autocomplete="off" autofocus @keyup.enter="login">
               <template #prefix>
                 <el-icon>
-                  <UserFilled/>
+                  <UserFilled />
                 </el-icon>
               </template>
             </el-input>
 
-            <el-input v-model="password" placeholder="请输入密码" size="large"
-                      show-password autocomplete="off" @keyup.enter="login">
+            <el-input v-model="password" placeholder="请输入密码" size="large" show-password autocomplete="off" @keyup.enter="login">
               <template #prefix>
                 <el-icon>
-                  <Lock/>
+                  <Lock />
                 </el-icon>
               </template>
             </el-input>
@@ -34,77 +32,79 @@
           </div>
         </div>
 
-        <captcha v-if="enableVerify" @success="doLogin" ref="captchaRef"/>
-        <footer-bar class="footer"/>
+        <captcha v-if="enableVerify" @success="doLogin" ref="captchaRef" />
+        <footer-bar class="footer" />
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-
-import {ref} from "vue";
-import {Lock, UserFilled} from "@element-plus/icons-vue";
-import {httpPost} from "@/utils/http";
-import {ElMessage} from "element-plus";
-import {useRouter} from "vue-router";
+import { ref } from "vue";
+import { Lock, UserFilled } from "@element-plus/icons-vue";
+import { httpPost } from "@/utils/http";
+import { ElMessage } from "element-plus";
+import { useRouter } from "vue-router";
 import FooterBar from "@/components/FooterBar.vue";
-import {setAdminToken} from "@/store/session";
-import {checkAdminSession, getSystemInfo} from "@/store/cache";
+import { setAdminToken } from "@/store/session";
+import { checkAdminSession, getSystemInfo } from "@/store/cache";
 import Captcha from "@/components/Captcha.vue";
 
 const router = useRouter();
-const title = ref('Geek-AI Console');
+const title = ref("Geek-AI Console");
 const username = ref(process.env.VUE_APP_ADMIN_USER);
 const password = ref(process.env.VUE_APP_ADMIN_PASS);
-const logo = ref("")
-const enableVerify = ref(false)
-const captchaRef = ref(null)
+const logo = ref("");
+const enableVerify = ref(false);
+const captchaRef = ref(null);
 
-checkAdminSession().then(() => {
-  router.push("/admin")
-}).catch(() => {
-})
+checkAdminSession()
+  .then(() => {
+    router.push("/admin");
+  })
+  .catch(() => {});
 
 // 加载系统配置
-getSystemInfo().then(res => {
-  title.value = res.data.admin_title
-  logo.value = res.data.logo
-  enableVerify.value = res.data['enabled_verify']
-}).catch(e => {
-  ElMessage.error("加载系统配置失败: " + e.message)
-})
+getSystemInfo()
+  .then((res) => {
+    title.value = res.data.admin_title;
+    logo.value = res.data.logo;
+    enableVerify.value = res.data["enabled_verify"];
+  })
+  .catch((e) => {
+    ElMessage.error("加载系统配置失败: " + e.message);
+  });
 
 const login = function () {
-  if (username.value === '') {
-    return ElMessage.error('请输入用户名');
+  if (username.value === "") {
+    return ElMessage.error("请输入用户名");
   }
-  if (password.value === '') {
-    return ElMessage.error('请输入密码');
+  if (password.value === "") {
+    return ElMessage.error("请输入密码");
   }
   if (enableVerify.value) {
-    captchaRef.value.loadCaptcha()
+    captchaRef.value.loadCaptcha();
   } else {
-    doLogin({})
+    doLogin({});
   }
-}
+};
 
 const doLogin = function (verifyData) {
-  httpPost('/api/admin/login', {
+  httpPost("/api/admin/login", {
     username: username.value.trim(),
     password: password.value.trim(),
     key: verifyData.key,
     dots: verifyData.dots,
-    x: verifyData.x
-  }).then(res => {
-    setAdminToken(res.data.token)
-    router.push("/admin")
-  }).catch((e) => {
-    ElMessage.error('登录失败，' + e.message)
+    x: verifyData.x,
   })
-}
-
-
+    .then((res) => {
+      setAdminToken(res.data.token);
+      router.push("/admin");
+    })
+    .catch((e) => {
+      ElMessage.error("登录失败，" + e.message);
+    });
+};
 </script>
 
 <style lang="stylus" scoped>
@@ -204,15 +204,10 @@ const doLogin = function (verifyData) {
       }
     }
 
-
-    .footer {
-      color #ffffff;
-
-      .container {
-        padding 20px;
-      }
+    .foot-container {
+      background rgba(0, 0, 0, 0.3);
+      --text-color: #ffffff;
     }
   }
 }
-
-</style>
\ No newline at end of file
+</style>
diff --git a/web/src/views/admin/LoginLog.vue b/web/src/views/admin/LoginLog.vue
index 802e46cf..e7629be8 100644
--- a/web/src/views/admin/LoginLog.vue
+++ b/web/src/views/admin/LoginLog.vue
@@ -1,63 +1,66 @@
 <template>
   <div class="container list" v-loading="loading">
     <el-row>
-      <el-table :data="items" border :row-key="row => row.id">
-        <el-table-column label="用户名" prop="username"/>
-        <el-table-column label="登录IP" prop="login_ip"/>
-        <el-table-column label="登录地址" prop="login_address"/>
+      <el-table :data="items" border :row-key="(row) => row.id">
+        <el-table-column label="用户名" prop="username" />
+        <el-table-column label="登录IP" prop="login_ip" />
+        <el-table-column label="登录地址" prop="login_address" />
         <el-table-column label="登录时间">
           <template #default="scope">
-            <span>{{ dateFormat(scope.row['created_at']) }}</span>
+            <span>{{ dateFormat(scope.row["created_at"]) }}</span>
           </template>
         </el-table-column>
       </el-table>
     </el-row>
 
     <div class="pagination">
-      <el-pagination v-if="total > 0" background
-                     layout="total,prev, pager, next"
-                     :hide-on-single-page="true"
-                     v-model:current-page="page"
-                     v-model:page-size="pageSize"
-                     @current-change="fetchList(page, pageSize)"
-                     :total="total"/>
-
+      <el-pagination
+        v-if="total > 0"
+        background
+        layout="total,prev, pager, next"
+        :hide-on-single-page="true"
+        v-model:current-page="page"
+        v-model:page-size="pageSize"
+        @current-change="fetchList(page, pageSize)"
+        :total="total"
+      />
     </div>
-
   </div>
 </template>
 
 <script setup>
-import {onMounted, ref} from "vue";
-import {httpGet} from "@/utils/http";
-import {ElMessage} from "element-plus";
-import {dateFormat} from "@/utils/libs";
+import { onMounted, ref } from "vue";
+import { httpGet } from "@/utils/http";
+import { ElMessage } from "element-plus";
+import { dateFormat } from "@/utils/libs";
 
 // 用户登录日志
-const items = ref([])
-const loading = ref(true)
-const total = ref(0)
-const page = ref(0)
-const pageSize = ref(0)
+const items = ref([]);
+const loading = ref(true);
+const total = ref(0);
+const page = ref(0);
+const pageSize = ref(0);
 
 onMounted(() => {
-  fetchList(1, 15)
-})
+  fetchList(1, 15);
+});
 
 // 获取数据
 const fetchList = function (_page, _pageSize) {
-  httpGet(`/api/admin/user/loginLog?page=${_page}&page_size=${_pageSize}`).then((res) => {
-    if (res.data) {
-      items.value = res.data.items
-      total.value = res.data.total
-      page.value = res.data.page
-      pageSize.value = res.data.page_size
-    }
-    loading.value = false
-  }).catch(() => {
-    ElMessage.error("获取数据失败");
-  })
-}
+  httpGet(`/api/admin/user/loginLog?page=${_page}&page_size=${_pageSize}`)
+    .then((res) => {
+      if (res.data) {
+        items.value = res.data.items;
+        total.value = res.data.total;
+        page.value = res.data.page;
+        pageSize.value = res.data.page_size;
+      }
+      loading.value = false;
+    })
+    .catch(() => {
+      ElMessage.error("获取数据失败");
+    });
+};
 </script>
 
 <style lang="stylus" scoped>
@@ -72,10 +75,10 @@ const fetchList = function (_page, _pageSize) {
   }
 
   .pagination {
-    padding 20px 0
+    margin-top 20px
     display flex
-    justify-content right
+    justify-content center
   }
 
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/web/src/views/admin/Medias.vue b/web/src/views/admin/Medias.vue
index 9f41202d..50cbca12 100644
--- a/web/src/views/admin/Medias.vue
+++ b/web/src/views/admin/Medias.vue
@@ -3,48 +3,46 @@
     <el-tabs v-model="activeName" @tab-change="handleChange">
       <el-tab-pane label="Suno音乐" name="suno" v-loading="data.suno.loading">
         <div class="handle-box">
-          <el-input v-model="data.suno.query.username" placeholder="用户名" class="handle-input mr10"
-                    @keyup="search($event,'suno')" clearable />
-          <el-input v-model="data.suno.query.prompt" placeholder="提示词" class="handle-input mr10"
-                    @keyup="search($event,'suno')" clearable />
+          <el-input v-model="data.suno.query.username" placeholder="用户名" class="handle-input mr10" @keyup="search($event, 'suno')" clearable />
+          <el-input v-model="data.suno.query.prompt" placeholder="提示词" class="handle-input mr10" @keyup="search($event, 'suno')" clearable />
           <el-date-picker
-              v-model="data.suno.query.created_at"
-              type="daterange"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              format="YYYY-MM-DD"
-              value-format="YYYY-MM-DD"
-              style="margin-right: 10px;width: 200px; position: relative;top:3px;"
+            v-model="data.suno.query.created_at"
+            type="daterange"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+            style="margin-right: 10px; width: 200px; position: relative; top: 3px"
           />
           <el-button type="primary" :icon="Search" @click="fetchSunoData">搜索</el-button>
         </div>
 
         <div v-if="data.suno.items.length > 0">
           <el-row>
-            <el-table :data="data.suno.items" :row-key="row => row.id" table-layout="auto">
-              <el-table-column prop="user_id" label="用户ID"/>
+            <el-table :data="data.suno.items" :row-key="(row) => row.id" table-layout="auto">
+              <el-table-column prop="user_id" label="用户ID" />
               <el-table-column label="歌曲预览">
                 <template #default="scope">
                   <div class="container" v-if="scope.row.cover_url">
                     <el-image :src="scope.row.cover_url" fit="cover" />
-                    <div class="duration">{{formatTime(scope.row.duration)}}</div>
+                    <div class="duration">{{ formatTime(scope.row.duration) }}</div>
                     <button class="play" @click="playMusic(scope.row)">
-                      <img src="/images/play.svg" alt=""/>
+                      <img src="/images/play.svg" alt="" />
                     </button>
                   </div>
                   <el-image v-else src="/images/failed.jpg" style="height: 90px" fit="cover" />
                 </template>
               </el-table-column>
-              <el-table-column prop="title" label="标题"/>
+              <el-table-column prop="title" label="标题" />
               <el-table-column prop="progress" label="任务进度">
                 <template #default="scope">
-                  <span v-if="scope.row.progress <= 100">{{scope.row.progress}}%</span>
+                  <span v-if="scope.row.progress <= 100">{{ scope.row.progress }}%</span>
                   <el-tag v-else type="danger">已失败</el-tag>
                 </template>
               </el-table-column>
-              <el-table-column prop="power" label="消耗算力"/>
-              <el-table-column prop="tags" label="风格"/>
-              <el-table-column prop="play_times" label="播放次数"/>
+              <el-table-column prop="power" label="消耗算力" />
+              <el-table-column prop="tags" label="风格" />
+              <el-table-column prop="play_times" label="播放次数" />
               <el-table-column label="歌词">
                 <template #default="scope">
                   <el-button size="small" type="primary" plain @click="showLyric(scope.row)">查看歌词</el-button>
@@ -52,18 +50,18 @@
               </el-table-column>
               <el-table-column label="创建时间">
                 <template #default="scope">
-                  <span>{{ dateFormat(scope.row['created_at']) }}</span>
+                  <span>{{ dateFormat(scope.row["created_at"]) }}</span>
                 </template>
               </el-table-column>
               <el-table-column label="失败原因">
                 <template #default="scope">
                   <el-popover
-                      placement="top-start"
-                      title="失败原因"
-                      :width="300"
-                      trigger="hover"
-                      :content="scope.row.err_msg"
-                      v-if="scope.row.progress === 101"
+                    placement="top-start"
+                    title="失败原因"
+                    :width="300"
+                    trigger="hover"
+                    :content="scope.row.err_msg"
+                    v-if="scope.row.progress === 101"
                   >
                     <template #reference>
                       <el-text type="danger">{{ substr(scope.row.err_msg, 20) }}</el-text>
@@ -85,73 +83,64 @@
           </el-row>
 
           <div class="pagination">
-            <el-pagination v-if="data.suno.total > 0" background
-                           layout="total,prev, pager, next"
-                           :hide-on-single-page="true"
-                           v-model:current-page="data.suno.page"
-                           v-model:page-size="data.suno.pageSize"
-                           @current-change="fetchSunoData()"
-                           :total="data.suno.total"/>
-
+            <el-pagination
+              v-if="data.suno.total > 0"
+              background
+              layout="total,prev, pager, next"
+              :hide-on-single-page="true"
+              v-model:current-page="data.suno.page"
+              v-model:page-size="data.suno.pageSize"
+              @current-change="fetchSunoData()"
+              :total="data.suno.total"
+            />
           </div>
         </div>
         <el-empty v-else />
       </el-tab-pane>
       <el-tab-pane label="Luma视频" name="luma" v-loading="data.luma.loading">
         <div class="handle-box">
-          <el-input v-model="data.luma.query.username" placeholder="用户名" class="handle-input mr10"
-                    @keyup="search($event, 'sd')" clearable />
-          <el-input v-model="data.luma.query.prompt" placeholder="提示词" class="handle-input mr10"
-                    @keyup="search($event, 'sd')" clearable />
+          <el-input v-model="data.luma.query.username" placeholder="用户名" class="handle-input mr10" @keyup="search($event, 'sd')" clearable />
+          <el-input v-model="data.luma.query.prompt" placeholder="提示词" class="handle-input mr10" @keyup="search($event, 'sd')" clearable />
           <el-date-picker
-              v-model="data.luma.query.created_at"
-              type="daterange"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              format="YYYY-MM-DD"
-              value-format="YYYY-MM-DD"
-              style="margin-right: 10px;width: 200px; position: relative;top:3px;"
+            v-model="data.luma.query.created_at"
+            type="daterange"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+            style="margin-right: 10px; width: 200px; position: relative; top: 3px"
           />
           <el-button type="primary" :icon="Search" @click="fetchLumaData">搜索</el-button>
         </div>
 
         <div v-if="data.luma.items.length > 0">
           <el-row>
-            <el-table :data="data.luma.items" :row-key="row => row.id" table-layout="auto">
-              <el-table-column prop="user_id" label="用户ID"/>
+            <el-table :data="data.luma.items" :row-key="(row) => row.id" table-layout="auto">
+              <el-table-column prop="user_id" label="用户ID" />
               <el-table-column label="视频预览">
                 <template #default="scope">
                   <div class="container">
                     <div v-if="scope.row.progress === 100">
-                      <video class="video" :src="replaceImg(scope.row.video_url)"  preload="auto" loop="loop" muted="muted">
-                        您的浏览器不支持视频播放
-                      </video>
+                      <video class="video" :src="replaceImg(scope.row.video_url)" preload="auto" loop="loop" muted="muted">您的浏览器不支持视频播放</video>
                       <button class="play" @click="playVideo(scope.row)">
-                        <img src="/images/play.svg" alt=""/>
+                        <img src="/images/play.svg" alt="" />
                       </button>
                     </div>
                     <el-image :src="scope.row.cover_url" fit="cover" v-else-if="scope.row.progress > 100" />
                     <generating message="正在生成视频" v-else />
-
                   </div>
                 </template>
               </el-table-column>
               <el-table-column prop="progress" label="任务进度">
                 <template #default="scope">
-                  <span v-if="scope.row.progress <= 100">{{scope.row.progress}}%</span>
+                  <span v-if="scope.row.progress <= 100">{{ scope.row.progress }}%</span>
                   <el-tag v-else type="danger">已失败</el-tag>
                 </template>
               </el-table-column>
-              <el-table-column prop="power" label="消耗算力"/>
+              <el-table-column prop="power" label="消耗算力" />
               <el-table-column label="提示词">
                 <template #default="scope">
-                  <el-popover
-                      placement="top-start"
-                      title="提示词"
-                      :width="300"
-                      trigger="hover"
-                      :content="scope.row.prompt"
-                  >
+                  <el-popover placement="top-start" title="提示词" :width="300" trigger="hover" :content="scope.row.prompt">
                     <template #reference>
                       <span>{{ substr(scope.row.prompt, 20) }}</span>
                     </template>
@@ -160,18 +149,18 @@
               </el-table-column>
               <el-table-column label="创建时间">
                 <template #default="scope">
-                  <span>{{ dateFormat(scope.row['created_at']) }}</span>
+                  <span>{{ dateFormat(scope.row["created_at"]) }}</span>
                 </template>
               </el-table-column>
               <el-table-column label="失败原因">
                 <template #default="scope">
                   <el-popover
-                      placement="top-start"
-                      title="失败原因"
-                      :width="300"
-                      trigger="hover"
-                      :content="scope.row.err_msg"
-                      v-if="scope.row.progress === 101"
+                    placement="top-start"
+                    title="失败原因"
+                    :width="300"
+                    trigger="hover"
+                    :content="scope.row.err_msg"
+                    v-if="scope.row.progress === 101"
                   >
                     <template #reference>
                       <el-text type="danger">{{ substr(scope.row.err_msg, 20) }}</el-text>
@@ -193,26 +182,24 @@
           </el-row>
 
           <div class="pagination">
-            <el-pagination v-if="data.luma.total > 0" background
-                           layout="total,prev, pager, next"
-                           :hide-on-single-page="true"
-                           v-model:current-page="data.luma.page"
-                           v-model:page-size="data.luma.pageSize"
-                           @current-change="fetchLumaData()"
-                           :total="data.luma.total"/>
-
+            <el-pagination
+              v-if="data.luma.total > 0"
+              background
+              layout="total,prev, pager, next"
+              :hide-on-single-page="true"
+              v-model:current-page="data.luma.page"
+              v-model:page-size="data.luma.pageSize"
+              @current-change="fetchLumaData()"
+              :total="data.luma.total"
+            />
           </div>
         </div>
         <el-empty v-else />
       </el-tab-pane>
     </el-tabs>
 
-
-    <el-dialog
-        v-model="showVideoDialog"
-        title="视频预览"
-    >
-      <video style="width: 100%; max-height: 90vh;" :src="currentVideoUrl"  preload="auto" :autoplay="true" loop="loop" muted="muted">
+    <el-dialog v-model="showVideoDialog" title="视频预览">
+      <video style="width: 100%; max-height: 90vh" :src="currentVideoUrl" preload="auto" :autoplay="true" loop="loop" muted="muted">
         您的浏览器不支持视频播放
       </video>
     </el-dialog>
@@ -221,141 +208,142 @@
       <music-player :songs="playList" ref="playerRef" :show-close="true" @close="showPlayer = false" />
     </div>
 
-    <el-dialog
-        v-model="showLyricDialog"
-        title="歌词"
-    >
+    <el-dialog v-model="showLyricDialog" title="歌词">
       <div class="chat-line" v-html="lyrics"></div>
     </el-dialog>
-
   </div>
 </template>
 
 <script setup>
-import {nextTick, onMounted, ref} from "vue";
-import {httpGet, httpPost} from "@/utils/http";
-import {ElMessage} from "element-plus";
-import {dateFormat, formatTime, replaceImg, substr} from "@/utils/libs";
-import {Search} from "@element-plus/icons-vue";
+import { nextTick, onMounted, ref } from "vue";
+import { httpGet, httpPost } from "@/utils/http";
+import { ElMessage } from "element-plus";
+import { dateFormat, formatTime, replaceImg, substr } from "@/utils/libs";
+import { Search } from "@element-plus/icons-vue";
 import MusicPlayer from "@/components/MusicPlayer.vue";
 import Generating from "@/components/ui/Generating.vue";
 
 // 变量定义
 const data = ref({
-  "suno": {
+  suno: {
     items: [],
-    query: {prompt: "", username: "", created_at: [], page: 1, page_size: 15},
+    query: { prompt: "", username: "", created_at: [], page: 1, page_size: 15 },
     total: 0,
     page: 1,
     pageSize: 10,
-    loading: true
+    loading: true,
   },
-  "luma": {
+  luma: {
     items: [],
-    query: {prompt: "", username: "", created_at: [], page: 1, page_size: 15},
+    query: { prompt: "", username: "", created_at: [], page: 1, page_size: 15 },
     total: 0,
     page: 1,
     pageSize: 10,
-    loading: true
-  }
-})
-const activeName = ref("suno")
-const playList = ref([])
-const playerRef = ref(null)
-const showPlayer = ref(false)
-const showLyricDialog = ref(false)
-const lyrics = ref("")
-const showVideoDialog = ref(false)
-const currentVideoUrl = ref('')
+    loading: true,
+  },
+});
+const activeName = ref("suno");
+const playList = ref([]);
+const playerRef = ref(null);
+const showPlayer = ref(false);
+const showLyricDialog = ref(false);
+const lyrics = ref("");
+const showVideoDialog = ref(false);
+const currentVideoUrl = ref("");
 
 onMounted(() => {
-  fetchSunoData()
-})
+  fetchSunoData();
+});
 
 const handleChange = (tab) => {
   switch (tab) {
     case "suno":
-      fetchSunoData()
-      break
+      fetchSunoData();
+      break;
     case "luma":
-      fetchLumaData()
-      break
+      fetchLumaData();
+      break;
   }
-}
+};
 
 // 搜索对话
-const search = (evt,tab) => {
+const search = (evt, tab) => {
   if (evt.keyCode === 13) {
-    handleChange(tab)
+    handleChange(tab);
   }
-}
+};
 
 // 获取数据
 const fetchSunoData = () => {
-  const d = data.value.suno
-  d.query.page = d.page
-  d.query.page_size = d.pageSize
-  httpPost('/api/admin/media/list/suno', d.query).then((res) => {
-    if (res.data) {
-      d.items = res.data.items
-      d.total = res.data.total
-      d.page = res.data.page
-      d.pageSize = res.data.page_size
-    }
-    d.loading = false
-  }).catch(e => {
-    ElMessage.error("获取数据失败：" + e.message);
-  })
-}
+  const d = data.value.suno;
+  d.query.page = d.page;
+  d.query.page_size = d.pageSize;
+  httpPost("/api/admin/media/list/suno", d.query)
+    .then((res) => {
+      if (res.data) {
+        d.items = res.data.items;
+        d.total = res.data.total;
+        d.page = res.data.page;
+        d.pageSize = res.data.page_size;
+      }
+      d.loading = false;
+    })
+    .catch((e) => {
+      ElMessage.error("获取数据失败：" + e.message);
+    });
+};
 
 const fetchLumaData = () => {
-  const d = data.value.luma
-  d.query.page = d.page
-  d.query.page_size = d.pageSize
-  httpPost('/api/admin/media/list/luma', d.query).then((res) => {
-    if (res.data) {
-      d.items = res.data.items
-      d.total = res.data.total
-      d.page = res.data.page
-      d.pageSize = res.data.page_size
-    }
-    d.loading = false
-  }).catch(e => {
-    ElMessage.error("获取数据失败：" + e.message);
-  })
-}
+  const d = data.value.luma;
+  d.query.page = d.page;
+  d.query.page_size = d.pageSize;
+  httpPost("/api/admin/media/list/luma", d.query)
+    .then((res) => {
+      if (res.data) {
+        d.items = res.data.items;
+        d.total = res.data.total;
+        d.page = res.data.page;
+        d.pageSize = res.data.page_size;
+      }
+      d.loading = false;
+    })
+    .catch((e) => {
+      ElMessage.error("获取数据失败：" + e.message);
+    });
+};
 
-const remove = function (row,tab) {
-  httpGet(`/api/admin/media/remove?id=${row.id}&tab=${tab}`).then(() => {
-    ElMessage.success("删除成功！")
-    handleChange(tab)
-  }).catch((e) => {
-    ElMessage.error("删除失败：" + e.message)
-  })
-}
+const remove = function (row, tab) {
+  httpGet(`/api/admin/media/remove?id=${row.id}&tab=${tab}`)
+    .then(() => {
+      ElMessage.success("删除成功！");
+      handleChange(tab);
+    })
+    .catch((e) => {
+      ElMessage.error("删除失败：" + e.message);
+    });
+};
 
 const playMusic = (item) => {
-  playList.value = [item]
-  showPlayer.value = true
-  nextTick(()=> playerRef.value.play())
-}
+  playList.value = [item];
+  showPlayer.value = true;
+  nextTick(() => playerRef.value.play());
+};
 
 const playVideo = (item) => {
-  currentVideoUrl.value = replaceImg(item.video_url)
-  showVideoDialog.value = true
-}
+  currentVideoUrl.value = replaceImg(item.video_url);
+  showVideoDialog.value = true;
+};
 
-const md = require('markdown-it')({
+const md = require("markdown-it")({
   breaks: true,
   html: true,
   linkify: true,
 });
 
 const showLyric = (item) => {
-  showLyricDialog.value = true
-  lyrics.value = md.render(item.prompt)
-}
-
+  showLyricDialog.value = true;
+  lyrics.value = md.render(item.prompt);
+};
 </script>
 
 <style lang="stylus" scoped>
@@ -383,9 +371,9 @@ const showLyric = (item) => {
   }
 
   .pagination {
-    padding 20px 0
+    margin-top 20px
     display flex
-    justify-content right
+    justify-content center
   }
 
   .container {
@@ -447,4 +435,4 @@ const showLyric = (item) => {
     width 100%
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/web/src/views/admin/Order.vue b/web/src/views/admin/Order.vue
index 48506674..699ce50e 100644
--- a/web/src/views/admin/Order.vue
+++ b/web/src/views/admin/Order.vue
@@ -3,33 +3,28 @@
     <div class="handle-box">
       <el-input v-model="query.order_no" placeholder="订单号" class="handle-input mr10"></el-input>
       <el-select v-model="query.status" placeholder="订单状态" style="width: 100px">
-        <el-option
-            v-for="item in orderStatus"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-        />
+        <el-option v-for="item in orderStatus" :key="item.value" :label="item.label" :value="item.value" />
       </el-select>
       <el-date-picker
-          v-model="query.pay_time"
-          type="daterange"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          format="YYYY-MM-DD"
-          value-format="YYYY-MM-DD"
-          style="margin: 0 10px;width: 200px; position: relative;top:3px;"
+        v-model="query.pay_time"
+        type="daterange"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        format="YYYY-MM-DD"
+        value-format="YYYY-MM-DD"
+        style="margin: 0 10px; width: 200px; position: relative; top: 3px"
       />
       <el-button type="primary" :icon="Search" @click="fetchData">搜索</el-button>
       <el-button type="danger" :icon="Delete" @click="clearOrders">清空未支付订单</el-button>
     </div>
 
     <el-row>
-      <el-table :data="items" :row-key="row => row.id" table-layout="auto">
-        <el-table-column prop="order_no" label="订单号"/>
-        <el-table-column prop="trade_no" label="交易号"/>
-        <el-table-column prop="username" label="下单用户"/>
-        <el-table-column prop="subject" label="产品名称"/>
-        <el-table-column prop="amount" label="订单金额"/>
+      <el-table :data="items" :row-key="(row) => row.id" table-layout="auto">
+        <el-table-column prop="order_no" label="订单号" />
+        <el-table-column prop="trade_no" label="交易号" />
+        <el-table-column prop="username" label="下单用户" />
+        <el-table-column prop="subject" label="产品名称" />
+        <el-table-column prop="amount" label="订单金额" />
         <el-table-column label="充值算力">
           <template #default="scope">
             <span>{{ scope.row.remark?.power }}</span>
@@ -38,18 +33,18 @@
 
         <el-table-column label="下单时间">
           <template #default="scope">
-            <span>{{ dateFormat(scope.row['created_at']) }}</span>
+            <span>{{ dateFormat(scope.row["created_at"]) }}</span>
           </template>
         </el-table-column>
 
         <el-table-column label="支付时间">
           <template #default="scope">
-            <span v-if="scope.row['pay_time']">{{ dateFormat(scope.row['pay_time']) }}</span>
+            <span v-if="scope.row['pay_time']">{{ dateFormat(scope.row["pay_time"]) }}</span>
             <el-tag v-else>未支付</el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="pay_method" label="支付渠道"/>
-        <el-table-column prop="pay_name" label="支付名称"/>
+        <el-table-column prop="pay_method" label="支付渠道" />
+        <el-table-column prop="pay_name" label="支付名称" />
 
         <el-table-column label="操作" width="180">
           <template #default="scope">
@@ -64,86 +59,88 @@
     </el-row>
 
     <div class="pagination">
-      <el-pagination v-if="total > 0" background
-                     layout="total,prev, pager, next"
-                     :hide-on-single-page="true"
-                     v-model:current-page="page"
-                     v-model:page-size="pageSize"
-                     @current-change="fetchData()"
-                     :total="total"/>
-
+      <el-pagination
+        v-if="total > 0"
+        background
+        layout="total,prev, pager, next"
+        :hide-on-single-page="true"
+        v-model:current-page="page"
+        v-model:page-size="pageSize"
+        @current-change="fetchData()"
+        :total="total"
+      />
     </div>
   </div>
 </template>
 
 <script setup>
-import {onMounted, ref} from "vue";
-import {httpGet, httpPost} from "@/utils/http";
-import {ElMessage, ElMessageBox} from "element-plus";
-import {dateFormat, removeArrayItem} from "@/utils/libs";
-import {Delete, Search} from "@element-plus/icons-vue";
+import { onMounted, ref } from "vue";
+import { httpGet, httpPost } from "@/utils/http";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { dateFormat, removeArrayItem } from "@/utils/libs";
+import { Delete, Search } from "@element-plus/icons-vue";
 
 // 变量定义
-const items = ref([])
-const query = ref({order_no: "", pay_time: [], status: -1})
-const total = ref(0)
-const page = ref(1)
-const pageSize = ref(15)
-const loading = ref(true)
+const items = ref([]);
+const query = ref({ order_no: "", pay_time: [], status: -1 });
+const total = ref(0);
+const page = ref(1);
+const pageSize = ref(15);
+const loading = ref(true);
 const orderStatus = ref([
-  {value: -1, label: "全部"},
-  {value: 0, label: "未支付"},
-  {value: 2, label: "已支付"},
-])
+  { value: -1, label: "全部" },
+  { value: 0, label: "未支付" },
+  { value: 2, label: "已支付" },
+]);
 
 onMounted(() => {
-  fetchData()
-})
+  fetchData();
+});
 // 获取数据
 const fetchData = () => {
-  query.value.page = page.value
-  query.value.page_size = pageSize.value
-  httpPost('/api/admin/order/list', query.value).then((res) => {
-    if (res.data) {
-      items.value = res.data.items
-      total.value = res.data.total
-      page.value = res.data.page
-      pageSize.value = res.data.page_size
-    }
-    loading.value = false
-  }).catch(e => {
-    ElMessage.error("获取数据失败：" + e.message);
-  })
-}
+  query.value.page = page.value;
+  query.value.page_size = pageSize.value;
+  httpPost("/api/admin/order/list", query.value)
+    .then((res) => {
+      if (res.data) {
+        items.value = res.data.items;
+        total.value = res.data.total;
+        page.value = res.data.page;
+        pageSize.value = res.data.page_size;
+      }
+      loading.value = false;
+    })
+    .catch((e) => {
+      ElMessage.error("获取数据失败：" + e.message);
+    });
+};
 
 const remove = function (row) {
-  httpGet('/api/admin/order/remove?id=' + row.id).then(() => {
-    ElMessage.success("删除成功！")
-    items.value = removeArrayItem(items.value, row, (v1, v2) => {
-      return v1.id === v2.id
+  httpGet("/api/admin/order/remove?id=" + row.id)
+    .then(() => {
+      ElMessage.success("删除成功！");
+      items.value = removeArrayItem(items.value, row, (v1, v2) => {
+        return v1.id === v2.id;
+      });
     })
-  }).catch((e) => {
-    ElMessage.error("删除失败：" + e.message)
-  })
-}
+    .catch((e) => {
+      ElMessage.error("删除失败：" + e.message);
+    });
+};
 
 const clearOrders = () => {
-  ElMessageBox.confirm(
-      '此操作将会删除所有未支付订单，继续操作吗?',
-      '删除提示',
-      {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning',
-      }
-  ).then(() => {
+  ElMessageBox.confirm("此操作将会删除所有未支付订单，继续操作吗?", "删除提示", {
+    confirmButtonText: "确认",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(() => {
     httpGet("/api/admin/order/clear").then(() => {
-      ElMessage.success("订单删除成功")
-      page.value = 0
-     fetchData()
-    })
-  })
-}
+      ElMessage.success("订单删除成功");
+      page.value = 0;
+      fetchData();
+    });
+  });
+};
 </script>
 
 <style lang="stylus" scoped>
@@ -172,10 +169,10 @@ const clearOrders = () => {
   }
 
   .pagination {
-    padding 20px 0
+    margin-top: 20px;
     display flex
     justify-content right
   }
 
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/web/src/views/admin/PowerLog.vue b/web/src/views/admin/PowerLog.vue
index c361b3ec..45753f89 100644
--- a/web/src/views/admin/PowerLog.vue
+++ b/web/src/views/admin/PowerLog.vue
@@ -3,21 +3,21 @@
     <div class="handle-box">
       <el-input v-model="query.model" placeholder="模型" class="handle-input mr10" clearable></el-input>
       <el-select v-model="query.type" placeholder="类别" style="width: 100px">
-        <el-option label="全部" :value="0"/>
-        <el-option label="充值" :value="1"/>
-        <el-option label="消费" :value="2"/>
-        <el-option label="退款" :value="3"/>
-        <el-option label="奖励" :value="4"/>
-        <el-option label="众筹" :value="5"/>
+        <el-option label="全部" :value="0" />
+        <el-option label="充值" :value="1" />
+        <el-option label="消费" :value="2" />
+        <el-option label="退款" :value="3" />
+        <el-option label="奖励" :value="4" />
+        <el-option label="众筹" :value="5" />
       </el-select>
       <el-date-picker
-          v-model="query.date"
-          type="daterange"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          format="YYYY-MM-DD"
-          value-format="YYYY-MM-DD"
-          style="margin: 0 10px;width: 200px; position: relative;top:3px;"
+        v-model="query.date"
+        type="daterange"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        format="YYYY-MM-DD"
+        value-format="YYYY-MM-DD"
+        style="margin: 0 10px; width: 200px; position: relative; top: 3px"
       />
       <el-button type="primary" :icon="Search" @click="search">搜索</el-button>
 
@@ -25,9 +25,9 @@
     </div>
 
     <el-row v-if="items.length > 0">
-      <el-table :data="items" :row-key="row => row.id" table-layout="auto" border>
-        <el-table-column prop="username" label="用户"/>
-        <el-table-column prop="model" label="模型"/>
+      <el-table :data="items" :row-key="(row) => row.id" table-layout="auto" border>
+        <el-table-column prop="username" label="用户" />
+        <el-table-column prop="model" label="模型" />
         <el-table-column prop="type" label="类型">
           <template #default="scope">
             <el-tag size="small" :type="tagColors[scope.row.type]">{{ scope.row.type_str }}</el-tag>
@@ -41,95 +41,98 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column prop="balance" label="余额"/>
+        <el-table-column prop="balance" label="余额" />
         <el-table-column label="发生时间">
           <template #default="scope">
-            <span>{{ dateFormat(scope.row['created_at']) }}</span>
+            <span>{{ dateFormat(scope.row["created_at"]) }}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="remark" label="备注"/>
+        <el-table-column prop="remark" label="备注" />
       </el-table>
 
       <div class="pagination">
-        <el-pagination v-if="total > 0" background
-                       layout="total,prev, pager, next"
-                       :hide-on-single-page="true"
-                       v-model:current-page="page"
-                       v-model:page-size="pageSize"
-                       @current-change="fetchData()"
-                       :total="total"/>
-
+        <el-pagination
+          v-if="total > 0"
+          background
+          layout="total,prev, pager, next"
+          :hide-on-single-page="true"
+          v-model:current-page="page"
+          v-model:page-size="pageSize"
+          @current-change="fetchData()"
+          :total="total"
+        />
       </div>
     </el-row>
-    <el-empty :image-size="100" v-else/>
-
+    <el-empty :image-size="100" v-else />
   </div>
 </template>
 
 <script setup>
-import {onMounted, ref} from "vue";
-import {httpPost} from "@/utils/http";
-import {ElMessage} from "element-plus";
-import {dateFormat} from "@/utils/libs";
-import {Search} from "@element-plus/icons-vue";
+import { onMounted, ref } from "vue";
+import { httpPost } from "@/utils/http";
+import { ElMessage } from "element-plus";
+import { dateFormat } from "@/utils/libs";
+import { Search } from "@element-plus/icons-vue";
 import Clipboard from "clipboard";
 
-const items = ref([])
-const total = ref(0)
-const page = ref(1)
-const pageSize = ref(20)
-const loading = ref(false)
+const items = ref([]);
+const total = ref(0);
+const page = ref(1);
+const pageSize = ref(20);
+const loading = ref(false);
 const query = ref({
   model: "",
   date: [],
-  type: 0
-})
-const totalPower = ref(0)
+  type: 0,
+});
+const totalPower = ref(0);
 
-const tagColors = ref(["", "success", "primary", "danger", "info", "warning"])
+const tagColors = ref(["", "success", "primary", "danger", "info", "warning"]);
 
 onMounted(() => {
-  fetchData()
-  const clipboard = new Clipboard('.copy-order-no');
-  clipboard.on('success', () => {
+  fetchData();
+  const clipboard = new Clipboard(".copy-order-no");
+  clipboard.on("success", () => {
     ElMessage.success("复制成功！");
-  })
+  });
 
-  clipboard.on('error', () => {
-    ElMessage.error('复制失败！');
-  })
-})
+  clipboard.on("error", () => {
+    ElMessage.error("复制失败！");
+  });
+});
 
 // 搜索
 const search = () => {
-  page.value = 1
-  fetchData()
-}
+  page.value = 1;
+  fetchData();
+};
 
 // 获取数据
 const fetchData = () => {
-  loading.value = true
-  httpPost('/api/admin/powerLog/list', {
+  loading.value = true;
+  httpPost("/api/admin/powerLog/list", {
     model: query.value.model,
     date: query.value.date,
     type: query.value.type,
     page: page.value,
-    page_size: pageSize.value
-  }).then((res) => {
-    const data = res.data.data
-    if (data) {
-      items.value = data.items
-      total.value = data.total
-      page.value = data.page
-      pageSize.value = data.page_size
-    }
-    totalPower.value = res.data.stat
-    loading.value = false
-  }).catch(e => {
-    loading.value = false
-    ElMessage.error("获取数据失败：" + e.message);
+    page_size: pageSize.value,
   })
-}
+    .then((res) => {
+      const data = res.data.data;
+      if (data) {
+        items.value = data.items;
+        total.value = data.total;
+        page.value = data.page;
+        pageSize.value = data.page_size;
+      }
+      totalPower.value = res.data.stat;
+      loading.value = false;
+    })
+    .catch((e) => {
+      loading.value = false;
+      ElMessage.error("获取数据失败：" + e.message);
+    });
+};
 </script>
 
 <style lang="stylus" scoped>
@@ -157,11 +160,10 @@ const fetchData = () => {
   }
 
   .pagination {
-    padding 20px 0
-    display flex
-    width 100%
-    justify-content right
+    margin-top: 20px;
+    display flex;
+    justify-content: right;
   }
 
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/web/src/views/admin/Redeem.vue b/web/src/views/admin/Redeem.vue
index 53349bc2..794ba937 100644
--- a/web/src/views/admin/Redeem.vue
+++ b/web/src/views/admin/Redeem.vue
@@ -3,57 +3,49 @@
     <div class="handle-box">
       <el-input v-model="query.code" placeholder="兑换码" class="handle-input mr10"></el-input>
       <el-select v-model="query.status" placeholder="核销状态" style="width: 100px" class="handle-input mr10">
-        <el-option
-            v-for="item in redeemStatus"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-        />
+        <el-option v-for="item in redeemStatus" :key="item.value" :label="item.label" :value="item.value" />
       </el-select>
       <el-button type="primary" :icon="Search" @click="fetchData">搜索</el-button>
       <el-button type="success" :icon="Plus" @click="add">添加兑换码</el-button>
-      <el-button type="primary" @click="exportItems" :loading="exporting"><i class="iconfont icon-export mr-1"></i> 导出
-      </el-button>
+      <el-button type="primary" @click="exportItems" :loading="exporting"><i class="iconfont icon-export mr-1"></i> 导出 </el-button>
     </div>
 
     <el-row>
-      <el-table :data="items" :row-key="row => row.id"
-                @selection-change="handleSelectionChange" table-layout="auto">
+      <el-table :data="items" :row-key="(row) => row.id" @selection-change="handleSelectionChange" table-layout="auto">
         <el-table-column type="selection" width="38"></el-table-column>
-        <el-table-column prop="name" label="名称"/>
+        <el-table-column prop="name" label="名称" />
         <el-table-column prop="code" label="兑换码">
           <template #default="scope">
             <span>{{ substr(scope.row.code, 24) }}</span>
             <el-icon class="copy-code" :data-clipboard-text="scope.row.code">
-              <DocumentCopy/>
+              <DocumentCopy />
             </el-icon>
           </template>
         </el-table-column>
         <el-table-column label="兑换人">
           <template #default="scope">
-            <span v-if="scope.row['username'] !== ''">{{ scope.row['username'] }}</span>
+            <span v-if="scope.row['username'] !== ''">{{ scope.row["username"] }}</span>
             <el-tag v-else>未兑换</el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="power" label="算力"/>
+        <el-table-column prop="power" label="算力" />
 
         <el-table-column label="生成时间">
           <template #default="scope">
-            <span>{{ dateFormat(scope.row['created_at']) }}</span>
+            <span>{{ dateFormat(scope.row["created_at"]) }}</span>
           </template>
         </el-table-column>
 
         <el-table-column label="兑换时间">
           <template #default="scope">
-            <span v-if="scope.row['redeemed_at'] > 0">{{ dateFormat(scope.row['redeemed_at']) }}</span>
+            <span v-if="scope.row['redeemed_at'] > 0">{{ dateFormat(scope.row["redeemed_at"]) }}</span>
             <el-tag v-else>未兑换</el-tag>
           </template>
         </el-table-column>
 
         <el-table-column prop="enabled" label="启用状态">
           <template #default="scope">
-            <el-switch v-model="scope.row['enabled']" @change="set('enabled',scope.row)"
-                       :disabled="scope.row['redeemed_at']>0"/>
+            <el-switch v-model="scope.row['enabled']" @change="set('enabled', scope.row)" :disabled="scope.row['redeemed_at'] > 0" />
           </template>
         </el-table-column>
 
@@ -66,180 +58,187 @@
             </el-popconfirm>
           </template>
         </el-table-column>
-
       </el-table>
     </el-row>
 
     <div class="pagination">
-      <el-pagination v-if="total > 0" background
-                     layout="total,prev, pager, next"
-                     :hide-on-single-page="true"
-                     v-model:current-page="page"
-                     v-model:page-size="pageSize"
-                     @current-change="fetchData()"
-                     :total="total"/>
-
+      <el-pagination
+        v-if="total > 0"
+        background
+        layout="total,prev, pager, next"
+        :hide-on-single-page="true"
+        v-model:current-page="page"
+        v-model:page-size="pageSize"
+        @current-change="fetchData()"
+        :total="total"
+      />
     </div>
 
-    <el-dialog
-        v-model="showDialog"
-        title="生成兑换码">
+    <el-dialog v-model="showDialog" title="生成兑换码">
       <template #default>
         <el-form :model="item" label-width="120px" v-loading="dialogLoading">
           <el-form-item label="名称：" prop="name">
-            <el-input v-model="item.name" autocomplete="off"/>
+            <el-input v-model="item.name" autocomplete="off" />
           </el-form-item>
 
           <el-form-item label="算力额度：" prop="power">
-            <el-input v-model.number="item.power" autocomplete="off"/>
+            <el-input v-model.number="item.power" autocomplete="off" />
           </el-form-item>
 
           <el-form-item label="生成数量：" prop="num">
-            <el-input v-model.number="item.num"/>
+            <el-input v-model.number="item.num" />
           </el-form-item>
         </el-form>
       </template>
 
       <template #footer>
-            <span class="dialog-footer">
-              <el-button @click="showDialog = false">取消</el-button>
-              <el-button type="primary" @click="save">提交</el-button>
-            </span>
+        <span class="dialog-footer">
+          <el-button @click="showDialog = false">取消</el-button>
+          <el-button type="primary" @click="save">提交</el-button>
+        </span>
       </template>
     </el-dialog>
   </div>
 </template>
 
 <script setup>
-import {onMounted, onUnmounted, ref} from "vue";
-import {httpGet, httpPost, httpPostDownload} from "@/utils/http";
-import {ElMessage} from "element-plus";
-import {dateFormat, substr, UUID} from "@/utils/libs";
-import {DocumentCopy, Plus, Search} from "@element-plus/icons-vue";
-import {showMessageError} from "@/utils/dialog";
+import { onMounted, onUnmounted, ref } from "vue";
+import { httpGet, httpPost, httpPostDownload } from "@/utils/http";
+import { ElMessage } from "element-plus";
+import { dateFormat, substr, UUID } from "@/utils/libs";
+import { DocumentCopy, Plus, Search } from "@element-plus/icons-vue";
+import { showMessageError } from "@/utils/dialog";
 import ClipboardJS from "clipboard";
 
 // 变量定义
-const items = ref([])
-const loading = ref(true)
-const query = ref({code: "", status: -1})
+const items = ref([]);
+const loading = ref(true);
+const query = ref({ code: "", status: -1 });
 const redeemStatus = ref([
-  {value: -1, label: "全部"},
-  {value: 0, label: "未核销"},
-  {value: 1, label: "已核销"},
-])
-const showDialog = ref(false)
-const dialogLoading = ref(false)
-const item = ref({name: "", power: 0, num: 1})
-const itemIds = ref([])
-const exporting = ref(false)
+  { value: -1, label: "全部" },
+  { value: 0, label: "未核销" },
+  { value: 1, label: "已核销" },
+]);
+const showDialog = ref(false);
+const dialogLoading = ref(false);
+const item = ref({ name: "", power: 0, num: 1 });
+const itemIds = ref([]);
+const exporting = ref(false);
 
-const clipboard = ref(null)
+const clipboard = ref(null);
 onMounted(() => {
-  clipboard.value = new ClipboardJS('.copy-code');
-  clipboard.value.on('success', () => {
-    ElMessage.success('复制成功！');
-  })
+  clipboard.value = new ClipboardJS(".copy-code");
+  clipboard.value.on("success", () => {
+    ElMessage.success("复制成功！");
+  });
 
-  clipboard.value.on('error', () => {
-    ElMessage.error('复制失败！');
-  })
+  clipboard.value.on("error", () => {
+    ElMessage.error("复制失败！");
+  });
 
-  fetchData()
-})
+  fetchData();
+});
 
 onUnmounted(() => {
-  clipboard.value.destroy()
-})
+  clipboard.value.destroy();
+});
 
 const add = () => {
-  item.value = {name: "100算力点卡", power: 100, num: 1}
-  showDialog.value = true
-  dialogLoading.value = false
-}
+  item.value = { name: "100算力点卡", power: 100, num: 1 };
+  showDialog.value = true;
+  dialogLoading.value = false;
+};
 
 const save = () => {
   if (item.value.name === "") {
-    return showMessageError("请输入兑换码名称")
+    return showMessageError("请输入兑换码名称");
   }
   if (item.value.power === 0) {
-    return showMessageError("请输入算力额度")
+    return showMessageError("请输入算力额度");
   }
   if (item.value.num <= 0) {
-    return showMessageError("请输入生成数量")
+    return showMessageError("请输入生成数量");
   }
-  dialogLoading.value = true
-  httpPost('/api/admin/redeem/create', item.value).then((res) => {
-    ElMessage.success(`成功生成了${res.data.counter}个兑换码`)
-    showDialog.value = false
-    fetchData()
-  }).catch((e) => {
-    ElMessage.error("生成失败：" + e.message)
-  })
-}
+  dialogLoading.value = true;
+  httpPost("/api/admin/redeem/create", item.value)
+    .then((res) => {
+      ElMessage.success(`成功生成了${res.data.counter}个兑换码`);
+      showDialog.value = false;
+      fetchData();
+    })
+    .catch((e) => {
+      ElMessage.error("生成失败：" + e.message);
+    });
+};
 
 const set = (filed, row) => {
-  httpPost('/api/admin/redeem/set', {id: row.id, filed: filed, value: row[filed]}).then(() => {
-    ElMessage.success("操作成功！")
-  }).catch(e => {
-    ElMessage.error("操作失败：" + e.message)
-  })
-}
+  httpPost("/api/admin/redeem/set", { id: row.id, filed: filed, value: row[filed] })
+    .then(() => {
+      ElMessage.success("操作成功！");
+    })
+    .catch((e) => {
+      ElMessage.error("操作失败：" + e.message);
+    });
+};
 
-
-const page = ref(1)
-const pageSize = ref(12)
-const total = ref(0)
+const page = ref(1);
+const pageSize = ref(12);
+const total = ref(0);
 const fetchData = () => {
-  query.value.page = page.value
-  query.value.page_size = pageSize.value
-  httpGet('/api/admin/redeem/list', query.value).then((res) => {
-    if (res.data) {
-      items.value = res.data.items
-      total.value = res.data.total
-      page.value = res.data.page
-      pageSize.value = res.data.page_size
-    }
-    loading.value = false
-  }).catch(e => {
-    ElMessage.error("获取数据失败：" + e.message);
-  })
-}
+  query.value.page = page.value;
+  query.value.page_size = pageSize.value;
+  httpGet("/api/admin/redeem/list", query.value)
+    .then((res) => {
+      if (res.data) {
+        items.value = res.data.items;
+        total.value = res.data.total;
+        page.value = res.data.page;
+        pageSize.value = res.data.page_size;
+      }
+      loading.value = false;
+    })
+    .catch((e) => {
+      ElMessage.error("获取数据失败：" + e.message);
+    });
+};
 
 const remove = function (row) {
-  httpGet('/api/admin/redeem/remove?id=' + row.id).then(() => {
-    ElMessage.success("删除成功！")
-    fetchData()
-  }).catch((e) => {
-    ElMessage.error("删除失败：" + e.message)
-  })
-}
+  httpGet("/api/admin/redeem/remove?id=" + row.id)
+    .then(() => {
+      ElMessage.success("删除成功！");
+      fetchData();
+    })
+    .catch((e) => {
+      ElMessage.error("删除失败：" + e.message);
+    });
+};
 
 const handleSelectionChange = (items) => {
-  itemIds.value = items.map(item => item.id)
-}
+  itemIds.value = items.map((item) => item.id);
+};
 
 const exportItems = () => {
-  query.value.ids = itemIds.value
-  exporting.value = true
-  httpPostDownload("/api/admin/redeem/export", query.value).then(response => {
-    const url = window.URL.createObjectURL(new Blob([response.data]));
-    const link = document.createElement('a');
-    link.href = url;
-    link.setAttribute('download', UUID() + ".csv"); // 设置下载文件的名称
-    document.body.appendChild(link);
-    link.click();
-
-    // 移除 <a> 标签
-    document.body.removeChild(link);
-    window.URL.revokeObjectURL(url);
-    exporting.value = false
-  }).catch(() => {
-    exporting.value = false
-    showMessageError("下载失败")
-  })
-}
+  query.value.ids = itemIds.value;
+  exporting.value = true;
+  httpPostDownload("/api/admin/redeem/export", query.value)
+    .then((response) => {
+      const url = window.URL.createObjectURL(new Blob([response.data]));
+      const link = document.createElement("a");
+      link.href = url;
+      link.setAttribute("download", UUID() + ".csv"); // 设置下载文件的名称
+      document.body.appendChild(link);
+      link.click();
 
+      // 移除 <a> 标签
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(url);
+      exporting.value = false;
+    })
+    .catch(() => {
+      exporting.value = false;
+      showMessageError("下载失败");
+    });
+};
 </script>
 
 <style lang="stylus" scoped>
@@ -276,10 +275,10 @@ const exportItems = () => {
   }
 
   .pagination {
-    padding 20px 0
-    display flex
-    justify-content right
+    margin-top: 20px;
+    display flex;
+    justify-content: right;
   }
 
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/web/src/views/admin/Users.vue b/web/src/views/admin/Users.vue
index e98fbbb2..3d3f2f95 100644
--- a/web/src/views/admin/Users.vue
+++ b/web/src/views/admin/Users.vue
@@ -363,7 +363,7 @@ const doResetPass = () => {
   }
 
   .pagination {
-    padding 20px 0
+    margin-top: 20px;
     display flex
     justify-content right
     width 100%