refactor: ♻️ 添加工作台页面和样式优化

pages.config.ts

@@ -31,6 +31,9 @@ export default defineUniPages({
       {
         pagePath: "pages/index/index",
       },
+      {
+        pagePath: "pages/work/index",
+      },
       {
         pagePath: "pages/mine/index",
       },

src/composables/useTabbar.ts

@@ -8,6 +8,7 @@ export interface TabbarItem {
 
 const tabbarItems = ref<TabbarItem[]>([
   { name: "home", value: null, active: true, title: "首页", icon: "home" },
+  { name: "work", value: null, active: false, title: "工作台", icon: "apps" },
   { name: "mine", value: null, active: false, title: "我的", icon: "user" },
 ]);
 

src/layouts/default.vue

@@ -4,6 +4,13 @@ import { storeToRefs } from "pinia";
 
 const themeStore = useThemeStore();
 const { theme, themeVars } = storeToRefs(themeStore);
+
+// 获取系统状态栏高度
+const statusBarHeight = ref(0);
+onMounted(() => {
+  const systemInfo = uni.getSystemInfoSync();
+  statusBarHeight.value = systemInfo.statusBarHeight || 0;
+});
 </script>
 
 <script lang="ts">
@@ -17,7 +24,14 @@ export default {
 </script>
 
 <template>
-  <wd-config-provider :theme-vars="themeVars" :theme="theme" :custom-class="`page-wraper ${theme}`">
+  <wd-config-provider
+    :theme-vars="themeVars"
+    :theme="theme"
+    :custom-class="`page-wraper ${theme}`"
+    :style="{
+      '--status-bar-height': statusBarHeight + 'px',
+    }"
+  >
     <slot />
     <wd-notify />
     <wd-toast />

src/layouts/tabbar.vue

@@ -1,5 +1,12 @@
 <template>
-  <wd-config-provider :theme-vars="themeVars" :custom-class="`page-wraper ${theme}`" :theme="theme">
+  <wd-config-provider
+    :theme-vars="themeVars"
+    :custom-class="`page-wraper ${theme}`"
+    :theme="theme"
+    :style="{
+      '--status-bar-height': statusBarHeight + 'px',
+    }"
+  >
     <slot />
     <wd-tabbar
       :model-value="activeTabbar.name"
@@ -36,12 +43,18 @@ const themeStore = useThemeStore();
 const { themeVars, theme } = storeToRefs(themeStore);
 const { activeTabbar, getTabbarItemValue, setTabbarItemActive, tabbarList } = useTabbar();
 
+// 获取系统状态栏高度
+const statusBarHeight = ref(0);
+
 function handleTabbarChange({ value }: { value: string }) {
   setTabbarItemActive(value);
   router.pushTab({ name: value });
 }
 
 onMounted(() => {
+  const systemInfo = uni.getSystemInfoSync();
+  statusBarHeight.value = systemInfo.statusBarHeight || 0;
+
   // #ifdef APP-PLUS
   uni.hideTabBar();
   // #endif

src/pages/index/index.vue

@@ -1,10 +1,12 @@
 <template>
   <view
-    class="app-container dark:text-[var(--wot-color-text)]"
-    :style="{ paddingTop: statusBarHeight + navBarHeight + 'px' }"
+    class="page-container dark:text-[var(--wot-color-text)]"
+    :style="{
+      paddingTop: 'calc(var(--status-bar-height) + ' + navBarHeight + 'px)',
+    }"
   >
     <!-- 自定义导航栏 -->
-    <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
+    <view class="custom-navbar" :style="{ paddingTop: 'var(--status-bar-height)' }">
       <!-- 导航栏内容 -->
       <view class="navbar-content">
         <wd-search
@@ -128,31 +130,26 @@ const current = ref<number>(0);
 // 搜索相关
 const searchValue = ref("");
 
-// 导航栏相关数据
-const statusBarHeight = ref(0); // 状态栏高度（px）
 const navBarHeight = ref(44); // 导航栏高度（px，默认44px ≈ 88rpx）
 const searchWidth = ref("100%"); // 搜索框宽度
 
 // 初始化导航栏信息
 onMounted(() => {
   // #ifdef MP-WEIXIN
-  // 微信小程序：使用新的 API 获取窗口信息
+  // 微信小程序：获取胶囊按钮信息计算导航栏高度
   const windowInfo = uni.getWindowInfo();
-  statusBarHeight.value = windowInfo.statusBarHeight || 0;
+  const statusBarHeight = windowInfo.statusBarHeight || 0; // 临时获取，仅用于计算
 
-  // 获取胶囊按钮信息
   const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
   // 计算导航栏高度：(胶囊底部 - 状态栏高度) + (胶囊顶部 - 状态栏高度)
   navBarHeight.value =
-    menuButtonInfo.bottom - statusBarHeight.value + (menuButtonInfo.top - statusBarHeight.value);
+    menuButtonInfo.bottom - statusBarHeight + (menuButtonInfo.top - statusBarHeight);
   // 搜索框宽度：胶囊左侧位置 - 左右边距
   searchWidth.value = `${menuButtonInfo.left - 30}px`;
   // #endif
 
   // #ifdef H5 || APP-PLUS
-  // H5 和 App：使用 getSystemInfoSync（非小程序环境仍然可用）
-  const systemInfo = uni.getSystemInfoSync();
-  statusBarHeight.value = systemInfo.statusBarHeight || 0;
+  // H5 和 App：使用固定导航栏高度
   navBarHeight.value = 44;
   searchWidth.value = "100%";
   // #endif
@@ -202,25 +199,25 @@ const navList = reactive([
   {
     icon: "/static/icons/user.png",
     title: "用户管理",
-    url: "/pages/work/index",
+    url: "/pages/work/user/index",
     prem: "sys:user:query",
   },
   {
     icon: "/static/icons/role.png",
     title: "角色管理",
-    url: "/pages/work/index",
+    url: "/pages/work/role/index",
     prem: "sys:role:query",
   },
   {
     icon: "/static/icons/notice.png",
     title: "通知公告",
-    url: "/pages/work/index",
+    url: "/pages/work/notice/index",
     prem: "sys:notice:query",
   },
   {
     icon: "/static/icons/setting.png",
     title: "系统配置",
-    url: "/pages/work/index",
+    url: "/pages/work/config/index",
     prem: "sys:config:query",
   },
 ]);

src/pages/mine/about/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="app-container dark:text-[var(--wot-color-text)]">
+  <view class="page-container dark:text-[var(--wot-color-text)]">
     <wd-card>
       <view class="about-header">
         <wd-img

src/pages/mine/faq/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="app-container dark:text-[var(--wot-color-text)]">
+  <view class="page-container dark:text-[var(--wot-color-text)]">
     <view>
       <view class="text-center font-600">
         <text>长按关注「有来技术」公众号，获取交流群二维码。</text>

src/pages/mine/feedback/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="app-container dark:text-[var(--wot-color-text)]">
+  <view class="page-container dark:text-[var(--wot-color-text)]">
     <wd-text size="small">选填，最多上传3张图片</wd-text>
     <wd-form ref="formRef" :model="formData" :rules="rules">
       <wd-form-item label="问题类型" prop="feedbackType">

src/pages/mine/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="app-container dark:text-[var(--wot-color-text)]">
+  <view class="page-container dark:text-[var(--wot-color-text)]">
     <!-- 用户信息卡片 -->
     <view class="user-profile">
       <view class="blur-bg"></view>

src/pages/mine/profile/complete-profile.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="app-container dark:text-[var(--wot-color-text)]">
+  <view class="page-container dark:text-[var(--wot-color-text)]">
     <!-- 头部标题 -->
     <view class="header">
       <view class="title">完善个人信息</view>

src/pages/mine/profile/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="app-container dark:text-[var(--wot-color-text)]">
+  <view class="page-container dark:text-[var(--wot-color-text)]">
     <wd-card v-if="userProfile" custom-style="margin-top: 20rpx">
       <wd-cell-group border>
         <wd-cell class="avatar-cell" title="头像" center is-link>

src/pages/mine/settings/account/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="app-container dark:text-[var(--wot-color-text)]">
+  <view class="page-container dark:text-[var(--wot-color-text)]">
     <wd-card>
       <wd-cell-group border>
         <wd-cell

src/pages/mine/settings/agreement/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="app-container dark:text-[var(--wot-color-text)]">
+  <view class="page-container dark:text-[var(--wot-color-text)]">
     <wd-collapse v-model="activeNames" accordion>
       <wd-collapse-item
         v-for="(section, index) in agreementContent"

src/pages/mine/settings/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="app-container dark:text-[var(--wot-color-text)]">
+  <view class="page-container dark:text-[var(--wot-color-text)]">
     <wd-cell-group>
       <wd-cell v-if="isLogin" title="个人资料" icon="user" is-link @click="navigateToProfile" />
       <wd-cell

src/pages/mine/settings/network/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="app-container dark:text-[var(--wot-color-text)]">
+  <view class="page-container dark:text-[var(--wot-color-text)]">
     <!-- 网络状态展示 -->
     <wd-card>
       <wd-cell-group border>

src/pages/mine/settings/theme/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="app-container dark:text-[var(--wot-color-text)]">
+  <view class="page-container dark:text-[var(--wot-color-text)]">
     <!-- 暗黑模式设置 -->
     <wd-card custom-class="mx-30rpx my-20rpx">
       <template #header>

src/pages/work/config/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <view class="page-container dark:text-[var(--wot-color-text)]">
+    <wd-status-tip type="search" tip="系统配置功能建设中..." />
+  </view>
+</template>
+
+<script setup lang="ts"></script>
+
+<route lang="json">
+{
+  "name": "config",
+  "style": {
+    "navigationBarTitleText": "系统配置"
+  }
+}
+</route>
+
+<style lang="scss" scoped></style>

src/pages/work/index.vue

@@ -1,10 +1,80 @@
 <template>
-  <view class="app-container dark:text-[var(--wot-color-text)]">
-    <wd-status-tip type="search" tip="建设中..." />
+  <view class="page-container work">
+    <template v-for="(item, index) in gridList" :key="index">
+      <wd-card :title="item.title">
+        <wd-grid clickable :column="4">
+          <wd-grid-item
+            v-for="(child, index) in item.children"
+            :key="index"
+            :v-has-perm="child.prem"
+            use-slot
+            @click="handleNavClick(child)"
+          >
+            <view class="p-2">
+              <image class="w-72rpx h-72rpx rounded-8rpx" :src="child.icon" />
+            </view>
+            <view class="text">{{ child.title }}</view>
+          </wd-grid-item>
+        </wd-grid>
+      </wd-card>
+    </template>
   </view>
 </template>
 
-<script setup lang="ts"></script>
+<script lang="ts" setup>
+import { useRouter } from "uni-mini-router";
+
+const router = useRouter();
+
+const gridList = reactive([
+  {
+    title: "系统管理",
+    children: [
+      {
+        icon: "/static/icons/user.png",
+        title: "用户管理",
+        url: "/pages/work/user/index",
+        prem: "sys:user:query",
+      },
+      {
+        icon: "/static/icons/role.png",
+        title: "角色管理",
+        url: "/pages/work/role/index",
+        prem: "sys:role:query",
+      },
+
+      {
+        icon: "/static/icons/notice.png",
+        title: "通知公告",
+        url: "/pages/work/notice/index",
+        prem: "sys:notice:query",
+      },
+      {
+        icon: "/static/icons/setting.png",
+        title: "系统配置",
+        url: "/pages/work/config/index",
+        prem: "sys:config:query",
+      },
+    ],
+  },
+  {
+    title: "系统监控",
+    children: [
+      {
+        icon: "/static/icons/log.png",
+        title: "系统日志",
+        url: "/pages/work/log/index",
+        prem: "sys:log:query",
+      },
+    ],
+  },
+]);
+
+// 处理导航点击
+function handleNavClick(item: any) {
+  router.push({ path: item.url });
+}
+</script>
 
 <route lang="json">
 {
@@ -12,10 +82,18 @@
   "style": {
     "navigationBarTitleText": "工作台"
   },
-  "meta": {
-    "requireAuth": true
-  }
+  "layout": "tabbar"
 }
 </route>
 
-<style lang="scss"></style>
+<style lang="scss" scoped>
+/* stylelint-disable selector-type-no-unknown */
+page {
+  background: #f8f8f8;
+}
+/* stylelint-enable selector-type-no-unknown */
+
+.work {
+  padding: 40rpx 0;
+}
+</style>

src/pages/work/log/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <view class="page-container dark:text-[var(--wot-color-text)]">
+    <wd-status-tip type="search" tip="系统日志功能建设中..." />
+  </view>
+</template>
+
+<script setup lang="ts"></script>
+
+<route lang="json">
+{
+  "name": "log",
+  "style": {
+    "navigationBarTitleText": "系统日志"
+  }
+}
+</route>
+
+<style lang="scss" scoped></style>

src/pages/work/notice/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <view class="page-container dark:text-[var(--wot-color-text)]">
+    <wd-status-tip type="search" tip="通知公告功能建设中..." />
+  </view>
+</template>
+
+<script setup lang="ts"></script>
+
+<route lang="json">
+{
+  "name": "notice",
+  "style": {
+    "navigationBarTitleText": "通知公告"
+  }
+}
+</route>
+
+<style lang="scss" scoped></style>

src/pages/work/role/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <view class="page-container dark:text-[var(--wot-color-text)]">
+    <wd-status-tip type="search" tip="角色管理功能建设中..." />
+  </view>
+</template>
+
+<script setup lang="ts"></script>
+
+<route lang="json">
+{
+  "name": "role",
+  "style": {
+    "navigationBarTitleText": "角色管理"
+  }
+}
+</route>
+
+<style lang="scss" scoped></style>

src/pages/work/user/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <view class="page-container dark:text-[var(--wot-color-text)]">
+    <wd-status-tip type="search" tip="用户管理功能建设中..." />
+  </view>
+</template>
+
+<script setup lang="ts"></script>
+
+<route lang="json">
+{
+  "name": "user",
+  "style": {
+    "navigationBarTitleText": "用户管理"
+  }
+}
+</route>
+
+<style lang="scss" scoped></style>

src/styles/index.scss

@@ -8,6 +8,7 @@ body,
   margin: 0;
 }
 
-.app-container {
-  padding: 10rpx;
+.page-container {
+  min-height: 100%;
+  background-color: var(--wot-color-bg);
 }