shanxia2.0/miniprogram/pages/workbench/workbench.vue

<script setup>
import { computed, ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { useUserStore } from '@/stores/user'
import { WORKBENCH_MODULES } from '@/config/workbench-menus'
import { PAGE_PATHS, WORKBENCH_ROUTE_MAP } from '@/config/api'
import { filterWorkbenchModules } from '@/utils/workbenchMenuFilter'
import { getSafeAreaStyle } from '@/utils/safeArea'
import { DEFAULT_PLACEHOLDER_IMAGE_URL } from '@/utils/staticAsset'

const safeAreaStyle = getSafeAreaStyle()
const logoUrl = DEFAULT_PLACEHOLDER_IMAGE_URL
const userStore = useUserStore()
const modules = computed(() =>
  filterWorkbenchModules(WORKBENCH_MODULES, {
    menuAll: userStore.menuAll,
    menuCodes: userStore.menuCodes
  })
)
const loggingOut = ref(false)

const displayName = computed(() => {
  const info = userStore.userInfo
  if (!info) return '未登录'
  return info.realName || info.username || '用户'
})

/** 三列宫格补齐空白格，避免末行空位露出网格底色 */
const menuPadCount = (len) => {
  const rem = Number(len) % 3
  return rem === 0 ? 0 : 3 - rem
}

onShow(async () => {
  userStore.checkLoginStatus()
  if (!userStore.isLoggedIn) {
    uni.reLaunch({ url: PAGE_PATHS.login })
    return
  }
  await userStore.fetchMenuCodes()
})

const openMenu = (module, menu) => {
  if (!menu.enabled) {
    uni.showToast({ title: '本期暂未开放', icon: 'none' })
    return
  }
  const route = WORKBENCH_ROUTE_MAP[menu.code]
  if (route) {
    uni.navigateTo({ url: route })
    return
  }
  const title = encodeURIComponent(menu.name || '')
  const moduleTitle = encodeURIComponent(module.title || '')
  const code = encodeURIComponent(menu.code || '')
  uni.navigateTo({
    url: `${PAGE_PATHS.bizPlaceholder}?title=${title}&module=${moduleTitle}&code=${code}`
  })
}

const handleLogout = async () => {
  if (loggingOut.value) return
  loggingOut.value = true
  try {
    await userStore.logout()
  } finally {
    loggingOut.value = false
  }
}
</script>

<template>
  <view class="mp-page mp-page--tab">
    <view class="mp-header mp-header--workbench" :style="safeAreaStyle">
      <!-- 标题行：左侧 logo + 文案，右侧避开胶囊 -->
      <view class="mp-header__title-row">
        <image class="mp-header__logo" :src="logoUrl" mode="aspectFit" />
        <view class="mp-header__titles">
          <text class="mp-header__title">工作台</text>
          <text class="mp-header__meta">选择业务模块，进入对应功能办理</text>
        </view>
      </view>
      <!-- 用户行：独立全宽右对齐；欢迎语 / 姓名在上，退出在下 -->
      <view class="mp-header__user-row">
        <view class="mp-header__user-stack">
          <text class="mp-header__welcome">欢迎您</text>
          <text class="mp-header__user-name">{{ displayName }}</text>
          <text
            class="mp-header__logout"
            :class="{ 'mp-header__logout--disabled': loggingOut }"
            @click="handleLogout"
          >
            {{ loggingOut ? '退出中…' : '退出登录' }}
          </text>
        </view>
      </view>
    </view>

    <view class="mp-section">
      <view
        v-for="mod in modules"
        :key="mod.key"
        class="mp-module-block"
        :class="'mp-module-block--' + mod.key"
      >
        <view class="mp-module-block__head">
          <text class="mp-module-block__icon">{{ mod.iconText }}</text>
          <view class="mp-module-block__title-wrap">
            <text class="mp-module-block__title">{{ mod.title }}</text>
            <text class="mp-module-block__desc">{{ mod.desc }}</text>
          </view>
        </view>
        <view class="mp-menu-grid">
          <view
            v-for="(menu, idx) in mod.menus"
            :key="menu.code || menu.name + idx"
            class="mp-menu-card"
            :class="{ 'mp-menu-card--disabled': !menu.enabled }"
            @click="openMenu(mod, menu)"
          >
            <view class="mp-menu-card__icon">{{ menu.icon || '' }}</view>
            <text class="mp-menu-card__name">{{ menu.name }}</text>
          </view>
          <view
            v-for="i in menuPadCount(mod.menus.length)"
            :key="'pad-' + mod.key + '-' + i"
            class="mp-menu-card mp-menu-card--pad"
          />
        </view>
      </view>
    </view>
  </view>
</template>