引入tailwind css，调整样式

web/src/components/ThemeChange.vue

@@ -1,27 +1,22 @@
 <template>
   <div class="theme-box" @click="toggleTheme">
-    <span class="iconfont icon-yueliang">{{
-      themePage === "light" ? "&#xe679;" : "&#xe60b;"
-    }}</span>
+    <span class="iconfont icon-yueliang">{{ themePage === "light" ? "&#xe679;" : "&#xe60b;" }}</span>
   </div>
 </template>
 
 <script setup>
 import { onMounted, ref } from "vue";
+import { useSharedStore } from "@/store/sharedata";
 
 // 定义主题状态，初始值从 localStorage 获取
-const themePage = ref(localStorage.getItem("theme") || "light");
+const store = useSharedStore();
+const themePage = ref(store.theme || "light");
 
 // 切换主题函数
 const toggleTheme = () => {
   themePage.value = themePage.value === "light" ? "dark" : "light";
-  document.documentElement.setAttribute("data-theme", themePage.value); // 设置 HTML 的 data-theme 属性
-  localStorage.setItem("theme", themePage.value); // 保存主题到 localStorage
+  store.setTheme(themePage.value); // 保存主题
 };
-
-onMounted(() => {
-  document.documentElement.setAttribute("data-theme", themePage.value);
-});
 </script>
 
 <style lang="stylus" scoped>
@@ -30,7 +25,7 @@ onMounted(() => {
   z-index :111
   position: fixed;
   right: 40px;
-  bottom: 262px;
+  bottom: 150px;
   cursor: pointer;
   border: 1px solid #ccc;
   border-radius: 50%;

web/src/components/UserOrder.vue

@@ -1,23 +1,11 @@
 <template>
-  <div
-    class="user-bill"
-    v-loading="loading"
-    element-loading-background="rgba(255,255,255,.3)"
-  >
+  <div class="user-bill" v-loading="loading" element-loading-background="rgba(255,255,255,.3)">
     <el-row v-if="items.length > 0">
-      <el-table
-        :data="items"
-        :row-key="(row) => row.id"
-        table-layout="auto"
-        border
-      >
+      <el-table :data="items" :row-key="(row) => row.id" table-layout="auto" border>
         <el-table-column prop="order_no" label="订单号">
           <template #default="scope">
             <span>{{ scope.row.order_no }}</span>
-            <el-icon
-              class="copy-order-no"
-              :data-clipboard-text="scope.row.order_no"
-            >
+            <el-icon class="copy-order-no" :data-clipboard-text="scope.row.order_no">
               <DocumentCopy />
             </el-icon>
           </template>
@@ -33,16 +21,14 @@
         <el-table-column prop="pay_name" label="支付名称" />
         <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>
     </el-row>
     <el-empty :image-size="100" v-else :image="nodata" description="暂无数据" />
-    <div class="pagination">
+    <div class="pagination pb-5">
       <el-pagination
         v-if="total > 0"
         background

web/src/components/admin/AdminHeader.vue

@@ -12,22 +12,14 @@
 
     <div class="breadcrumb">
       <el-breadcrumb :separator-icon="ArrowRight">
-        <el-breadcrumb-item v-for="item in breadcrumb">{{
-          item.title
-        }}</el-breadcrumb-item>
+        <el-breadcrumb-item v-for="item in breadcrumb" :key="item.title">{{ item.title }}</el-breadcrumb-item>
       </el-breadcrumb>
     </div>
     <div class="header-right">
       <div class="header-user-con">
         <!-- 切换主题 -->
-        <el-switch
-          style="margin-right: 10px"
-          v-model="dark"
-          inline-prompt
-          :active-action-icon="Moon"
-          :inactive-action-icon="Sunny"
-          @change="changeTheme"
-        />
+        <el-switch style="margin-right: 10px" v-model="dark" inline-prompt :active-action-icon="Moon"
+                   :inactive-action-icon="Sunny" @change="changeTheme"/>
         <!-- 用户名下拉菜单 -->
         <el-dropdown class="user-name" :hide-on-click="true" trigger="click">
           <span class="el-dropdown-link">
@@ -38,9 +30,7 @@
           </span>
           <template #dropdown>
             <el-dropdown-menu>
-              <el-dropdown-item>
-                <i class="iconfont icon-version"></i> 当前版本：{{ version }}
-              </el-dropdown-item>
+              <el-dropdown-item><i class="iconfont icon-version"></i> 当前版本：{{ version }}</el-dropdown-item>
               <el-dropdown-item divided @click="logout">
                 <i class="iconfont icon-logout"></i>
                 <span>退出登录</span>
@@ -53,21 +43,14 @@
   </div>
 </template>
 <script setup>
-import { onMounted, ref, watch } from "vue";
-import { getMenuItems, useSidebarStore } from "@/store/sidebar";
-import { useRouter } from "vue-router";
-import {
-  ArrowDown,
-  ArrowRight,
-  Expand,
-  Fold,
-  Moon,
-  Sunny
-} from "@element-plus/icons-vue";
-import { httpGet } from "@/utils/http";
-import { ElMessage } from "element-plus";
-import { removeAdminToken } from "@/store/session";
-import { useSharedStore } from "@/store/sharedata";
+import {onMounted, ref, watch} from "vue";
+import {getMenuItems, useSidebarStore} from "@/store/sidebar";
+import {useRouter} from "vue-router";
+import {ArrowDown, ArrowRight, Expand, Fold, Moon, Sunny} from "@element-plus/icons-vue";
+import {httpGet} from "@/utils/http";
+import {ElMessage} from "element-plus";
+import {removeAdminToken} from "@/store/session";
+import {useSharedStore} from "@/store/sharedata";
 
 const version = ref(process.env.VUE_APP_VERSION);
 const avatar = ref("/images/user-info.jpg");
@@ -76,17 +59,17 @@ const router = useRouter();
 const breadcrumb = ref([]);
 
 const store = useSharedStore();
-const dark = ref(store.adminTheme === "dark");
-const theme = ref(store.adminTheme);
+const dark = ref(store.theme === "dark");
+const theme = ref(store.theme);
 watch(
-  () => store.adminTheme,
+    () => store.theme,
   (val) => {
     theme.value = val;
   }
 );
 
 const changeTheme = () => {
-  store.setAdminTheme(dark.value ? "dark" : "light");
+  store.setTheme(dark.value ? "dark" : "light");
 };
 
 router.afterEach((to) => {
@@ -107,7 +90,7 @@ const initBreadCrumb = (path) => {
       if (items[i].index === path) {
         breadcrumb.value.push({
           title: items[i].title,
-          path: items[i].index
+          path: items[i].index,
         });
         break;
       }
@@ -121,11 +104,11 @@ const initBreadCrumb = (path) => {
           if (subs[j].index === path) {
             breadcrumb.value.push({
               title: items[i].title,
-              path: items[i].index
+              path: items[i].index,
             });
             breadcrumb.value.push({
               title: subs[j].title,
-              path: subs[j].index
+              path: subs[j].index,
             });
             bk = true;
             break;

web/src/components/admin/AdminSidebar.vue

@@ -70,8 +70,8 @@ httpGet('/api/admin/config/get?key=system').then(res => {
   ElMessage.error("加载系统配置失败: " + e.message)
 })
 const store = useSharedStore()
-const theme = ref(store.adminTheme)
-watch(() => store.adminTheme, (val) => {
+const theme = ref(store.theme)
+watch(() => store.theme, (val) => {
   theme.value = val
 })
 const items = [

web/src/components/admin/AdminTags.vue

@@ -42,8 +42,8 @@ import {useSharedStore} from "@/store/sharedata";
 import {ref, watch} from "vue";
 
 const store = useSharedStore()
-const theme = ref(store.adminTheme)
-watch(() => store.adminTheme, (val) => {
+const theme = ref(store.theme)
+watch(() => store.theme, (val) => {
   theme.value = val
 })
 const router = useRouter();