feat: 接入旧站管理端并完整迁移后台能力

2026-11-12 22:03:01 +08:00
parent e5f923706b
commit a4441bba9a
509 changed files with 140714 additions and 1068 deletions
@@ -0,0 +1,617 @@
+<script setup lang="ts">
+import {
+  Bell,
+  Briefcase,
+  ChatDotRound,
+  Coin,
+  DataLine,
+  Document,
+  DocumentChecked,
+  EditPen,
+  Expand,
+  Fold,
+  House,
+  Lock,
+  Message,
+  Money,
+  Operation,
+  Picture,
+  Present,
+  Promotion,
+  Link,
+  ScaleToOriginal,
+  Service,
+  Shop,
+  Setting,
+  Switch,
+  SwitchButton,
+  Tickets,
+  Tools,
+  User,
+  UserFilled,
+  Wallet,
+  CreditCard,
+  Share,
+} from '@element-plus/icons-vue'
+import { ElMessage, ElSubMenu } from 'element-plus'
+import type { Component } from 'vue'
+import { computed, reactive, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import { changeAdminPassword, logoutAdmin, updateSupportStatus } from '@/features/admin'
+import { useAdminNotificationUnreadCount } from '@/features/admin/composables/useAdminNotificationUnreadCount'
+import { usePendingRefundCount } from '@/features/admin/composables/usePendingRefundCount'
+import { useAdminSessionStore } from '@/stores/adminSession'
+import { adminPath, ADMIN_DASHBOARD_PATH, ADMIN_LOGIN_PATH } from '@/shared/utils/adminPath'
+import { readError } from '@/shared/utils/error'
+
+const router = useRouter()
+const route = useRoute()
+const adminSession = useAdminSessionStore()
+const isCollapsed = ref(false)
+const updatingStatus = ref(false)
+const passwordSubmitting = ref(false)
+const passwordForm = reactive({
+  old_password: '',
+  new_password: '',
+  confirm_password: '',
+})
+const shouldForcePasswordChange = computed(
+  () => adminSession.passwordMustChange && adminSession.isSuperAdmin
+)
+
+interface NavItem {
+  label: string
+  to: string
+  icon: Component
+  permission?: string
+}
+
+interface NavGroup {
+  label: string
+  index: string
+  icon: Component
+  children: NavItem[]
+}
+
+const allNavGroups: NavGroup[] = [
+  {
+    label: '工作台',
+    index: 'workspace',
+    icon: House,
+    children: [
+      { label: '仪表盘', to: ADMIN_DASHBOARD_PATH, icon: DataLine, permission: 'dashboard:view' },
+    ],
+  },
+  {
+    label: '业务管理',
+    index: 'business',
+    icon: Briefcase,
+    children: [
+      { label: '用户管理', to: adminPath('users'), icon: User, permission: 'user:view' },
+      {
+        label: '积分商城',
+        to: adminPath('points-mall'),
+        icon: Present,
+        permission: 'points_mall:view',
+      },
+      { label: '订单管理', to: adminPath('orders'), icon: Tickets, permission: 'order:view' },
+      {
+        label: '退款审核',
+        to: adminPath('orders/refund-review'),
+        icon: Money,
+        permission: 'order:close',
+      },
+      {
+        label: '线下提号',
+        to: adminPath('pickup'),
+        icon: Switch,
+        permission: 'order:pickup',
+      },
+      { label: '商品管理', to: adminPath('listings'), icon: Shop, permission: 'listing:view' },
+      {
+        label: '商品审核',
+        to: adminPath('listings/review'),
+        icon: DocumentChecked,
+        permission: 'listing:approve',
+      },
+      {
+        label: '撞车分类',
+        to: adminPath('crash/categories'),
+        icon: Present,
+        permission: 'mohong:category',
+      },
+      {
+        label: '撞车商品',
+        to: adminPath('crash/products'),
+        icon: Present,
+        permission: 'mohong:product_view',
+      },
+      {
+        label: '撞车订单',
+        to: adminPath('crash/orders'),
+        icon: Tickets,
+        permission: 'mohong:order_view',
+      },
+      {
+        label: '撞车配置',
+        to: adminPath('crash/config'),
+        icon: Setting,
+        permission: 'mohong:config',
+      },
+    ],
+  },
+  {
+    label: '分销管理',
+    index: 'distribution',
+    icon: Share,
+    children: [
+      {
+        label: '分销站点管理',
+        to: adminPath('distribution/sites'),
+        icon: Shop,
+        permission: 'distribution:site_view',
+      },
+      {
+        label: '分站二维码池',
+        to: adminPath('distribution/qrcode-pool'),
+        icon: Picture,
+        permission: 'qrcode:view',
+      },
+      {
+        label: '分销规则',
+        to: adminPath('distribution/rules'),
+        icon: Setting,
+        permission: 'distribution:rule_view',
+      },
+      {
+        label: '分销订单',
+        to: adminPath('distribution/orders'),
+        icon: Tickets,
+        permission: 'distribution:order_view',
+      },
+      {
+        label: '结算对账',
+        to: adminPath('distribution/settlements'),
+        icon: Coin,
+        permission: 'distribution:settlement_view',
+      },
+      {
+        label: '邀请返利管理',
+        to: adminPath('invitations'),
+        icon: Present,
+        permission: 'distribution:site_view',
+      },
+    ],
+  },
+  {
+    label: '推广追踪',
+    index: 'ad-tracking',
+    icon: Promotion,
+    children: [
+      {
+        label: '推广链接管理',
+        to: adminPath('tracking-links'),
+        icon: Link,
+        permission: 'ad_tracking:manage',
+      },
+    ],
+  },
+  {
+    label: '客服与风控',
+    index: 'support-risk',
+    icon: Service,
+    children: [
+      {
+        label: '仲裁中心',
+        to: adminPath('disputes'),
+        icon: ScaleToOriginal,
+        permission: 'dispute:view',
+      },
+      { label: '客服群聊', to: adminPath('chats'), icon: ChatDotRound, permission: 'chat:view' },
+      { label: '二维码池', to: adminPath('qrcode-pool'), icon: Picture, permission: 'qrcode:view' },
+      { label: '客服分组', to: adminPath('support-groups'), icon: User, permission: 'chat:manage' },
+      {
+        label: '手动录单',
+        to: adminPath('manual-entries'),
+        icon: EditPen,
+        permission: 'cs_manual_entry:view',
+      },
+    ],
+  },
+  {
+    label: '财务管理',
+    index: 'finance',
+    icon: Coin,
+    children: [
+      {
+        label: '财务仪表盘',
+        to: adminPath('finance/dashboard'),
+        icon: DataLine,
+        permission: 'wallet:view',
+      },
+      {
+        label: '财务明细',
+        to: adminPath('finance/details'),
+        icon: Document,
+        permission: 'wallet:view',
+      },
+      {
+        label: '资金出款',
+        to: adminPath('finance/disbursements'),
+        icon: Money,
+        permission: 'wallet:view',
+      },
+      {
+        label: '运营开支',
+        to: adminPath('finance/operating-expenses'),
+        icon: Money,
+        permission: 'finance:operating_expense',
+      },
+      {
+        label: '资金流水',
+        to: adminPath('wallet-ledger'),
+        icon: Wallet,
+        permission: 'wallet:view',
+      },
+      { label: '支付流水', to: adminPath('payments'), icon: CreditCard, permission: 'wallet:view' },
+      {
+        label: '提现审核',
+        to: adminPath('withdrawals'),
+        icon: Money,
+        permission: 'withdrawal:list',
+      },
+      {
+        label: '支付配置',
+        to: adminPath('payment-configs'),
+        icon: CreditCard,
+        permission: 'payment_config:list',
+      },
+    ],
+  },
+  {
+    label: '内容与配置',
+    index: 'content-config',
+    icon: Tools,
+    children: [
+      {
+        label: '公告管理',
+        to: adminPath('announcements'),
+        icon: Bell,
+        permission: 'announcement:view',
+      },
+      {
+        label: '通知中心',
+        to: adminPath('notifications'),
+        icon: Message,
+        permission: 'notification:view',
+      },
+      {
+        label: '推送通知',
+        to: adminPath('push'),
+        icon: Bell,
+        permission: 'system_config:view',
+      },
+      {
+        label: '系统配置',
+        to: adminPath('system-configs'),
+        icon: Operation,
+        permission: 'system_config:view',
+      },
+      {
+        label: '数据备份',
+        to: adminPath('backups'),
+        icon: DocumentChecked,
+        permission: 'backup:view',
+      },
+    ],
+  },
+  {
+    label: '系统权限',
+    index: 'system-auth',
+    icon: Lock,
+    children: [
+      {
+        label: '审计日志',
+        to: adminPath('audit-logs'),
+        icon: Document,
+        permission: 'audit_log:view',
+      },
+      {
+        label: '管理员管理',
+        to: adminPath('admin-users'),
+        icon: UserFilled,
+        permission: 'admin_user:manage',
+      },
+      { label: '角色管理', to: adminPath('roles'), icon: Setting, permission: 'role:manage' },
+    ],
+  },
+]
+
+const allNavItems = allNavGroups.flatMap(group => group.children)
+
+function canAccessNavItem(item: NavItem) {
+  if (adminSession.isSuperAdmin) return true
+  if (!item.permission) return true
+  return adminSession.hasPermission(item.permission)
+}
+
+const navGroups = computed(() => {
+  return allNavGroups
+    .map(group => ({
+      ...group,
+      children: group.children.filter(item => canAccessNavItem(item)),
+    }))
+    .filter(group => group.children.length > 0)
+})
+
+const activeMenu = computed(() => {
+  const currentPath = route.path
+  const matchedItem = allNavItems
+    .slice()
+    .sort((a, b) => b.to.length - a.to.length)
+    .find(item => currentPath === item.to || currentPath.startsWith(`${item.to}/`))
+
+  return matchedItem?.to || currentPath
+})
+
+const defaultOpeneds = computed(() => {
+  const activeGroup = allNavGroups.find(group =>
+    group.children.some(item => item.to === activeMenu.value)
+  )
+
+  return activeGroup ? [activeGroup.index] : []
+})
+
+const adminName = computed(() => adminSession.nickname || adminSession.username || '管理员')
+const adminRoleText = computed(() => {
+  if (adminSession.isSuperAdmin) return '超级管理员'
+  const names = adminSession.roles.map(role => role.name).filter(Boolean)
+  return names.join(' / ') || '管理员'
+})
+const supportStatus = computed(() => adminSession.supportStatus || 'offline')
+const hasChatPermission = computed(() => adminSession.hasPermission('chat:view'))
+const hasNotificationPermission = computed(
+  () => adminSession.isSuperAdmin || adminSession.hasPermission('notification:view')
+)
+const { unreadCount: adminNotificationUnreadCount, unreadLabel: adminNotificationUnreadLabel } =
+  useAdminNotificationUnreadCount(route)
+const { pendingRefundCount, pendingRefundLabel } = usePendingRefundCount(route)
+const refundReviewPath = adminPath('orders/refund-review')
+
+const statusLabels: Record<string, string> = {
+  online: '在线',
+  offline: '离线',
+  busy: '忙碌',
+}
+
+const statusColors: Record<string, string> = {
+  online: '#10b981',
+  offline: '#9ca3af',
+  busy: '#f59e0b',
+}
+
+async function handleStatusChange(status: 'online' | 'offline' | 'busy') {
+  if (updatingStatus.value) return
+  updatingStatus.value = true
+  try {
+    await updateSupportStatus(status)
+    adminSession.setSupportStatus(status)
+    ElMessage.success(`已切换为${statusLabels[status]}`)
+  } catch {
+    ElMessage.error('状态更新失败')
+  } finally {
+    updatingStatus.value = false
+  }
+}
+
+async function handleLogout() {
+  try {
+    await logoutAdmin()
+  } catch {
+    // Local logout should still happen if the development API is unavailable.
+  }
+  adminSession.logout()
+  ElMessage.success('已退出后台')
+  await router.push(ADMIN_LOGIN_PATH)
+}
+
+function passwordStrongEnough(value: string) {
+  return value.length >= 8 && /[A-Za-z]/.test(value) && /\d/.test(value)
+}
+
+async function handleForcedPasswordChange() {
+  if (!passwordForm.old_password || !passwordForm.new_password) {
+    ElMessage.error('请输入原密码和新密码')
+    return
+  }
+  if (!passwordStrongEnough(passwordForm.new_password)) {
+    ElMessage.error('新密码至少 8 位且需包含字母和数字')
+    return
+  }
+  if (passwordForm.new_password !== passwordForm.confirm_password) {
+    ElMessage.error('两次输入的新密码不一致')
+    return
+  }
+  passwordSubmitting.value = true
+  try {
+    await changeAdminPassword({
+      old_password: passwordForm.old_password,
+      new_password: passwordForm.new_password,
+    })
+    ElMessage.success('密码已修改，请重新登录')
+    adminSession.logout()
+    await router.replace(ADMIN_LOGIN_PATH)
+  } catch (error) {
+    ElMessage.error(readError(error, '密码修改失败'))
+  } finally {
+    passwordSubmitting.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="admin-shell" :class="{ 'admin-shell--collapsed': isCollapsed }">
+    <aside class="admin-sidebar">
+      <div class="admin-sidebar-header">
+        <RouterLink class="admin-brand" :to="ADMIN_DASHBOARD_PATH">
+          <span class="brand-mark">H</span>
+          <span class="brand-text" v-show="!isCollapsed">哈夫币后台</span>
+        </RouterLink>
+        <el-icon class="collapse-btn" @click="isCollapsed = !isCollapsed">
+          <Fold v-if="!isCollapsed" />
+          <Expand v-else />
+        </el-icon>
+      </div>
+
+      <el-menu
+        :default-active="activeMenu"
+        :default-openeds="defaultOpeneds"
+        :collapse="isCollapsed"
+        :collapse-transition="false"
+        unique-opened
+        router
+        class="admin-menu"
+      >
+        <el-sub-menu
+          v-for="group in navGroups"
+          :key="group.index"
+          :index="group.index"
+          popper-class="admin-menu-popper"
+        >
+          <template #title>
+            <el-icon><component :is="group.icon" /></el-icon>
+            <span>{{ group.label }}</span>
+          </template>
+          <el-menu-item v-for="item in group.children" :key="item.to" :index="item.to">
+            <el-icon><component :is="item.icon" /></el-icon>
+            <template #title>
+              <span class="menu-item-label">{{ item.label }}</span>
+              <em
+                v-if="item.to === refundReviewPath && pendingRefundCount > 0"
+                class="menu-item-badge"
+              >
+                {{ pendingRefundLabel }}
+              </em>
+            </template>
+          </el-menu-item>
+        </el-sub-menu>
+      </el-menu>
+
+      <div class="admin-sidebar-footer">
+        <RouterLink
+          v-if="hasNotificationPermission"
+          class="sidebar-notification"
+          :to="adminPath('notifications')"
+        >
+          <span class="sidebar-notification-icon">
+            <el-icon><Message /></el-icon>
+            <em v-if="adminNotificationUnreadCount > 0" class="sidebar-badge">
+              {{ adminNotificationUnreadLabel }}
+            </em>
+          </span>
+          <span v-show="!isCollapsed" class="sidebar-notification-text">通知中心</span>
+        </RouterLink>
+        <el-dropdown
+          v-if="hasChatPermission"
+          trigger="click"
+          @command="handleStatusChange"
+          :disabled="updatingStatus"
+        >
+          <span class="sidebar-status" :style="{ borderColor: statusColors[supportStatus] }">
+            <span
+              class="status-dot"
+              :style="{ backgroundColor: statusColors[supportStatus] }"
+            ></span>
+            <span v-show="!isCollapsed" class="status-text">{{ statusLabels[supportStatus] }}</span>
+          </span>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item command="online">
+                <span class="status-dot" style="background-color: #10b981"></span>
+                在线
+              </el-dropdown-item>
+              <el-dropdown-item command="busy">
+                <span class="status-dot" style="background-color: #f59e0b"></span>
+                忙碌
+              </el-dropdown-item>
+              <el-dropdown-item command="offline">
+                <span class="status-dot" style="background-color: #9ca3af"></span>
+                离线
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+        <el-dropdown trigger="click">
+          <span class="sidebar-user">
+            <el-avatar :size="32" :icon="User" />
+            <span v-show="!isCollapsed" class="sidebar-user-text">
+              <strong>{{ adminName }}</strong>
+              <small>{{ adminRoleText }}</small>
+            </span>
+          </span>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item :icon="SwitchButton" @click="handleLogout"
+                >退出登录</el-dropdown-item
+              >
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+    </aside>
+
+    <section class="admin-workspace">
+      <main class="admin-main">
+        <slot />
+      </main>
+    </section>
+
+    <el-dialog
+      :model-value="shouldForcePasswordChange"
+      title="修改初始密码"
+      width="420px"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="false"
+      append-to-body
+      class="force-password-dialog"
+    >
+      <el-form class="force-password-form" label-position="top" @submit.prevent>
+        <el-form-item label="原密码">
+          <el-input
+            v-model="passwordForm.old_password"
+            type="password"
+            show-password
+            autocomplete="current-password"
+          />
+        </el-form-item>
+        <el-form-item label="新密码">
+          <el-input
+            v-model="passwordForm.new_password"
+            type="password"
+            show-password
+            autocomplete="new-password"
+          />
+        </el-form-item>
+        <el-form-item label="确认新密码">
+          <el-input
+            v-model="passwordForm.confirm_password"
+            type="password"
+            show-password
+            autocomplete="new-password"
+            @keyup.enter="handleForcedPasswordChange"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button :disabled="passwordSubmitting" @click="handleLogout">退出登录</el-button>
+        <el-button type="primary" :loading="passwordSubmitting" @click="handleForcedPasswordChange">
+          确认修改
+        </el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped src="./AdminLayout.css"></style>