新增答辩用后台管理系统

gym-manage-cuit/src/App.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <router-view />
+</template>
+
+<style>
+#app {
+  height: 100%;
+}
+</style>

gym-manage-cuit/src/api/modules/auth.ts

@@ -0,0 +1,30 @@
+import { post, get } from '@/api/request'
+
+export interface LoginParams {
+  username: string
+  password: string
+}
+
+export interface AuthResponse {
+  token: string
+  userId: number
+  username: string
+  roles: string[]
+  permissions: string[]
+}
+
+export function login(params: LoginParams): Promise<AuthResponse> {
+  return post('/api/auth/login', params)
+}
+
+export function register(data: any) {
+  return post('/api/auth/register', data)
+}
+
+export function logout() {
+  return post('/api/auth/logout')
+}
+
+export function getCurrentUser(): Promise<AuthResponse> {
+  return get('/api/auth/me')
+}

gym-manage-cuit/src/api/modules/checkIn.ts

@@ -0,0 +1,29 @@
+import { get, post } from '@/api/request'
+
+export function getSignInRecords(params: any) {
+  return get('/api/checkIn/records', params)
+}
+
+export function getSignInRecordById(id: number) {
+  return get(`/api/checkIn/records/${id}`)
+}
+
+export function getSignInStatistics(params: any) {
+  return get('/api/checkIn/statistics', params)
+}
+
+export function getDailySignInStats(params: any) {
+  return get('/api/checkIn/daily-stats', params)
+}
+
+export function getAllSignInRecords(params: any) {
+  return get('/api/checkIn/admin/records', params)
+}
+
+export function getAllSignInStatistics(params: any) {
+  return get('/api/checkIn/admin/statistics', params)
+}
+
+export function checkIn(data: any) {
+  return post('/api/checkIn', data)
+}

gym-manage-cuit/src/api/modules/datacount.ts

@@ -0,0 +1,25 @@
+import { get } from '@/api/request'
+
+export function getStatisticsSummary(params?: any) {
+  return get('/api/datacount/summary', params)
+}
+
+export function getMemberStatistics(params?: any) {
+  return get('/api/datacount/member', params)
+}
+
+export function getBookingStatistics(params?: any) {
+  return get('/api/datacount/booking', params)
+}
+
+export function getSignInStatistics(params?: any) {
+  return get('/api/datacount/signin', params)
+}
+
+export function getHistoricalStatistics(params?: any) {
+  return get('/api/datacount/history', params)
+}
+
+export function getStatsOverview() {
+  return get('/api/stats/overview')
+}

gym-manage-cuit/src/api/modules/groupCourse.ts

@@ -0,0 +1,55 @@
+import { get, post, put, del } from '@/api/request'
+import type { AxiosRequestConfig } from 'axios'
+import instance from '@/api/request'
+
+export function uploadImage(file: File) {
+  const formData = new FormData()
+  formData.append('file', file)
+  return instance.post('/api/upload/image', formData, {
+    headers: { 'Content-Type': 'multipart/form-data' },
+  }).then((res) => res.data)
+}
+
+export function getPresignedUrl(ossKey: string) {
+  return get<{ code: number; data: { presignedUrl: string } }>('/api/upload/presign', { key: ossKey })
+}
+
+export function getGroupCoursesByPage(data: any) {
+  return post('/api/groupCourse/page', data)
+}
+
+export function getAllGroupCourses(includeDeleted?: boolean) {
+  return get('/api/groupCourse/list', { includeDeleted: includeDeleted ? 'true' : 'false' })
+}
+
+export function getGroupCourseById(id: number) {
+  return get(`/api/groupCourse/${id}`)
+}
+
+export function getGroupCourseDetailById(id: number) {
+  return get(`/api/groupCourse/${id}/detail`)
+}
+
+export function createGroupCourse(data: any) {
+  return post('/api/groupCourse', data)
+}
+
+export function updateGroupCourse(id: number, data: any, config?: AxiosRequestConfig) {
+  return put(`/api/groupCourse/${id}`, data, config)
+}
+
+export function deleteGroupCourse(id: number, config?: AxiosRequestConfig) {
+  return del(`/api/groupCourse/${id}`, config)
+}
+
+export function restoreGroupCourse(id: number, config?: AxiosRequestConfig) {
+  return post(`/api/groupCourse/${id}/restore`, null, config)
+}
+
+export function cancelGroupCourse(id: number) {
+  return post(`/api/groupCourse/${id}/cancel`)
+}
+
+export function searchGroupCourses(data: any) {
+  return post('/api/groupCourse/search', data)
+}

gym-manage-cuit/src/api/modules/groupCourseRecommend.ts

@@ -0,0 +1,34 @@
+import { get, post, put, del } from '@/api/request'
+import type { AxiosRequestConfig } from 'axios'
+
+export function getAllRecommendations(params?: any) {
+  return get('/api/groupCourse/recommend/list', params)
+}
+
+export function getAllActiveRecommendations() {
+  return get('/api/groupCourse/recommend/active')
+}
+
+export function getRecommendationById(id: number) {
+  return get(`/api/groupCourse/recommend/${id}`)
+}
+
+export function createRecommendation(data: any) {
+  return post('/api/groupCourse/recommend', data)
+}
+
+export function updateRecommendation(id: number, data: any, config?: AxiosRequestConfig) {
+  return put(`/api/groupCourse/recommend/${id}`, data, config)
+}
+
+export function deleteRecommendation(id: number, config?: AxiosRequestConfig) {
+  return del(`/api/groupCourse/recommend/${id}`, config)
+}
+
+export function enableRecommendation(id: number) {
+  return post(`/api/groupCourse/recommend/${id}/enable`)
+}
+
+export function disableRecommendation(id: number, config?: AxiosRequestConfig) {
+  return post(`/api/groupCourse/recommend/${id}/disable`, null, config)
+}

gym-manage-cuit/src/api/modules/groupCourseType.ts

@@ -0,0 +1,58 @@
+import { get, post, put, del } from '@/api/request'
+import type { AxiosRequestConfig } from 'axios'
+
+export function getAllGroupCourseTypes() {
+  return get('/api/groupCourse/types')
+}
+
+export function getGroupCourseTypeById(id: number) {
+  return get(`/api/groupCourse/types/${id}`)
+}
+
+export function createGroupCourseType(data: any) {
+  return post('/api/groupCourse/types', data)
+}
+
+export function updateGroupCourseType(id: number, data: any, config?: AxiosRequestConfig) {
+  return put(`/api/groupCourse/types/${id}`, data, config)
+}
+
+export function deleteGroupCourseType(id: number, config?: AxiosRequestConfig) {
+  return del(`/api/groupCourse/types/${id}`, config)
+}
+
+export function getCategories() {
+  return get('/api/groupCourse/types/categories')
+}
+
+export function getAllLabels() {
+  return get('/api/groupCourse/labels')
+}
+
+export function createLabel(data: any) {
+  return post('/api/groupCourse/labels', data)
+}
+
+export function updateLabel(id: number, data: any) {
+  return put(`/api/groupCourse/labels/${id}`, data)
+}
+
+export function deleteLabel(id: number) {
+  return del(`/api/groupCourse/labels/${id}`)
+}
+
+export function getLabelsByTypeId(typeId: number) {
+  return get(`/api/groupCourse/types/${typeId}/labels`)
+}
+
+export function addLabelsToType(typeId: number, labelIds: number[]) {
+  return post(`/api/groupCourse/types/${typeId}/labels`, { labelIds })
+}
+
+export function removeLabelFromType(typeId: number, labelId: number) {
+  return del(`/api/groupCourse/types/${typeId}/labels/${labelId}`)
+}
+
+export function clearTypeLabels(typeId: number) {
+  return del(`/api/groupCourse/types/${typeId}/labels`)
+}

gym-manage-cuit/src/api/modules/member.ts

@@ -0,0 +1,21 @@
+import { get, post, put } from '@/api/request'
+
+export function searchMembers(params: any) {
+  return get('/api/admin/members', params)
+}
+
+export function getAllMembers(params?: any) {
+  return get('/api/admin/members/all', params)
+}
+
+export function getMemberDetail(id: number) {
+  return get(`/api/admin/member/${id}`)
+}
+
+export function updateMember(id: number, data: any) {
+  return put(`/api/admin/member/${id}`, data)
+}
+
+export function updateMemberPhone(id: number, data: any) {
+  return post(`/api/admin/member/${id}/phone`, data)
+}

gym-manage-cuit/src/api/modules/memberCard.ts

@@ -0,0 +1,49 @@
+import { get, post, put, del } from '@/api/request'
+
+export function getAllMemberCards() {
+  return get('/api/member-cards/active')
+}
+
+export function listMemberCards(params?: any) {
+  return get('/api/member-cards', params)
+}
+
+export function getMemberCardById(id: number) {
+  return get(`/api/member-cards/${id}`)
+}
+
+export function createMemberCard(data: any) {
+  return post('/api/member-cards', data)
+}
+
+export function updateMemberCard(id: number, data: any, params?: any) {
+  return put(`/api/member-cards/${id}`, data, params ? { params } : undefined)
+}
+
+export function deleteMemberCard(id: number, params?: any) {
+  return del(`/api/member-cards/${id}`, params ? { params } : undefined)
+}
+
+export function getMemberCardRecords(memberId: number) {
+  return get(`/api/member-card-records/my-cards/${memberId}`)
+}
+
+export function purchaseCard(data: any) {
+  return post('/api/member-card-records/purchase', data)
+}
+
+export function renewCard(recordId: number, data: any) {
+  return post(`/api/member-card-records/${recordId}/renew`, data)
+}
+
+export function useCard(recordId: number, data: any) {
+  return post(`/api/member-card-records/${recordId}/use`, data)
+}
+
+export function refundCard(recordId: number, data: any) {
+  return post(`/api/member-card-records/${recordId}/refund`, data)
+}
+
+export function getMemberCardTransactions(params: any) {
+  return get('/api/member-card-transactions', params)
+}

gym-manage-cuit/src/api/modules/menu.ts

@@ -0,0 +1,25 @@
+import { get, post, put, del } from '@/api/request'
+
+export function getAllMenus() {
+  return get('/api/menus')
+}
+
+export function getMenuTree() {
+  return get('/api/menus/tree')
+}
+
+export function getMenuById(id: number) {
+  return get(`/api/menus/${id}`)
+}
+
+export function createMenu(data: any) {
+  return post('/api/menus', data)
+}
+
+export function updateMenu(id: number, data: any) {
+  return put(`/api/menus/${id}`, data)
+}
+
+export function deleteMenu(id: number) {
+  return del(`/api/menus/${id}`)
+}

gym-manage-cuit/src/api/modules/operationLog.ts

@@ -0,0 +1,17 @@
+import { get } from '@/api/request'
+
+export function getOperationLogsByPage(params: any) {
+  return get('/api/logs/operation/page', params)
+}
+
+export function getAllOperationLogs() {
+  return get('/api/logs/operation')
+}
+
+export function getOperationLogById(id: number) {
+  return get(`/api/logs/operation/${id}`)
+}
+
+export function exportOperationLogs(params: any) {
+  return get('/api/logs/operation/export', params)
+}

gym-manage-cuit/src/api/modules/role.ts

@@ -0,0 +1,42 @@
+import { get, post, put, del } from '@/api/request'
+import type { AxiosRequestConfig } from 'axios'
+
+export function getRolesByPage(params: any) {
+  return get('/api/roles/page', params)
+}
+
+export function getAllRoles() {
+  return get('/api/roles')
+}
+
+export function getRoleById(id: number) {
+  return get(`/api/roles/${id}`)
+}
+
+export function createRole(data: any) {
+  return post('/api/roles', data)
+}
+
+export function updateRole(id: number, data: any, config?: AxiosRequestConfig) {
+  return put(`/api/roles/${id}`, data, config)
+}
+
+export function deleteRole(id: number, config?: AxiosRequestConfig) {
+  return del(`/api/roles/${id}`, config)
+}
+
+export function checkRoleName(name: string) {
+  return get('/api/roles/check-name', { name })
+}
+
+export function getRolePermissions(id: number) {
+  return get(`/api/roles/${id}/permissions`)
+}
+
+export function assignPermissionsToRole(id: number, permissionIds: number[], config?: AxiosRequestConfig) {
+  return post(`/api/roles/${id}/permissions`, { permissionIds }, config)
+}
+
+export function getAllPermissions() {
+  return get('/api/permissions')
+}

gym-manage-cuit/src/api/modules/user.ts

@@ -0,0 +1,42 @@
+import { get, post, put, del } from '@/api/request'
+import type { AxiosRequestConfig } from 'axios'
+
+export function getUsersByPage(params: any) {
+  return get('/api/users/page', params)
+}
+
+export function getAllUsers(params?: any) {
+  return get('/api/users', params)
+}
+
+export function getUserById(id: number) {
+  return get(`/api/users/${id}`)
+}
+
+export function createUser(data: any) {
+  return post('/api/users', data)
+}
+
+export function updateUser(id: number, data: any, config?: AxiosRequestConfig) {
+  return put(`/api/users/${id}`, data, config)
+}
+
+export function deleteUser(id: number, config?: AxiosRequestConfig) {
+  return del(`/api/users/${id}`, config)
+}
+
+export function changePassword(id: number, data: any) {
+  return post(`/api/users/${id}/action/change-password`, data)
+}
+
+export function getUserRoles(id: number) {
+  return get(`/api/users/${id}/roles`)
+}
+
+export function assignRoles(id: number, roleIds: number[], config?: AxiosRequestConfig) {
+  return post(`/api/users/${id}/roles`, { roleIds }, config)
+}
+
+export function checkUsername(username: string) {
+  return get('/api/users/check/username', { username })
+}

gym-manage-cuit/src/api/request.ts

@@ -0,0 +1,74 @@
+import axios, { type AxiosInstance, type AxiosRequestConfig, type AxiosResponse } from 'axios'
+import { getToken, removeToken } from '@/utils/token'
+import { ElMessage } from 'element-plus'
+
+const instance: AxiosInstance = axios.create({
+  baseURL: '',
+  timeout: 15000,
+  headers: { 'Content-Type': 'application/json' },
+})
+
+instance.interceptors.request.use(
+  (config) => {
+    const token = getToken()
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`
+    }
+    return config
+  },
+  (error) => Promise.reject(error),
+)
+
+instance.interceptors.response.use(
+  (response: AxiosResponse) => {
+    const data = response.data
+    if (data?.code === 401) {
+      removeToken()
+      window.location.href = '/login'
+      return Promise.reject(new Error('登录已过期'))
+    }
+    return response
+  },
+  (error) => {
+    if (error.response?.status === 401) {
+      removeToken()
+      window.location.href = '/login'
+      ElMessage.error('登录已过期，请重新登录')
+    } else {
+      const msg = error.response?.data?.message || error.message || '请求失败'
+      ElMessage.error(msg)
+    }
+    return Promise.reject(error)
+  },
+)
+
+export function get<T = any>(url: string, params?: any, config?: AxiosRequestConfig): Promise<T> {
+  return instance.get(url, { params, ...config }).then((res) => res.data)
+}
+
+export function post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
+  return instance.post(url, data, config).then((res) => res.data)
+}
+
+export function put<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
+  return instance.put(url, data, config).then((res) => res.data)
+}
+
+export function del<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> {
+  return instance.delete(url, config).then((res) => res.data)
+}
+
+export function download(url: string, params?: any, filename?: string): Promise<void> {
+  return instance
+    .get(url, { params, responseType: 'blob' })
+    .then((res) => {
+      const blob = new Blob([res.data])
+      const link = document.createElement('a')
+      link.href = URL.createObjectURL(blob)
+      link.download = filename || 'export.xlsx'
+      link.click()
+      URL.revokeObjectURL(link.href)
+    })
+}
+
+export default instance

gym-manage-cuit/src/assets/styles/global.scss

@@ -0,0 +1,66 @@
+:root {
+  --color-primary: #1890ff;
+  --color-success: #52c41a;
+  --color-warning: #faad14;
+  --color-danger: #ff4d4f;
+  --color-info: #909399;
+  --bg-base: #f0f2f5;
+  --bg-sidebar: #001529;
+  --bg-header: #fff;
+  --text-primary: #303133;
+  --text-regular: #606266;
+  --text-secondary: #909399;
+  --border-base: #dcdfe6;
+  --sidebar-width: 220px;
+  --header-height: 56px;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body, #app {
+  height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  color: var(--text-primary);
+  background: var(--bg-base);
+}
+
+a {
+  color: var(--color-primary);
+  text-decoration: none;
+}
+
+.page-container {
+  padding: 16px;
+  height: 100%;
+  overflow: auto;
+}
+
+.search-card {
+  margin-bottom: 16px;
+}
+
+.table-card {
+  flex: 1;
+}
+
+.flex-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.mb-16 {
+  margin-bottom: 16px;
+}
+
+.mr-8 {
+  margin-right: 8px;
+}

gym-manage-cuit/src/directives/permission.ts

@@ -0,0 +1,37 @@
+import type { Directive, DirectiveBinding } from 'vue'
+import { hasPermission, hasAnyPermission } from '@/utils/token'
+
+export const permission: Directive = {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    const { value } = binding
+    if (!value) return
+
+    let allowed = false
+    if (Array.isArray(value)) {
+      allowed = hasAnyPermission(...value)
+    } else {
+      allowed = hasPermission(String(value))
+    }
+    if (!allowed) {
+      el.style.display = 'none'
+    }
+  },
+}
+
+export const permissionDisabled: Directive = {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    const { value } = binding
+    if (!value) return
+
+    let allowed = false
+    if (Array.isArray(value)) {
+      allowed = hasAnyPermission(...value)
+    } else {
+      allowed = hasPermission(String(value))
+    }
+    if (!allowed) {
+      el.setAttribute('disabled', 'true')
+      el.classList.add('is-disabled')
+    }
+  },
+}

gym-manage-cuit/src/layout/Header.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { useAppStore } from '@/stores/app'
+import { useUserStore } from '@/stores/user'
+import { useRoute } from 'vue-router'
+
+const appStore = useAppStore()
+const userStore = useUserStore()
+const route = useRoute()
+
+function getPageTitle() {
+  return route.meta?.title as string || '管理后台'
+}
+</script>
+
+<template>
+  <div class="header-container">
+    <div class="header-left">
+      <el-icon class="collapse-btn" @click="appStore.toggleCollapsed" :size="20">
+        <component :is="appStore.collapsed ? 'Expand' : 'Fold'" />
+      </el-icon>
+      <span class="page-title">{{ getPageTitle() }}</span>
+    </div>
+    <div class="header-right">
+      <span class="username">{{ userStore.user?.username }}</span>
+      <el-dropdown trigger="click">
+        <el-avatar :size="32" icon="UserFilled" style="cursor: pointer; margin-left: 12px;" />
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item @click="userStore.logout">退出登录</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.header-container {
+  height: var(--header-height);
+  background: var(--bg-header);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+  z-index: 10;
+}
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.collapse-btn {
+  cursor: pointer;
+}
+.collapse-btn:hover {
+  color: var(--color-primary);
+}
+.page-title {
+  font-size: 16px;
+  font-weight: 500;
+}
+.header-right {
+  display: flex;
+  align-items: center;
+}
+.username {
+  font-size: 14px;
+  color: var(--text-regular);
+}
+</style>

gym-manage-cuit/src/layout/Sidebar.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAppStore } from '@/stores/app'
+import { useUserStore } from '@/stores/user'
+import { usePermissionStore, type MenuItem } from '@/stores/permission'
+
+const route = useRoute()
+const router = useRouter()
+const appStore = useAppStore()
+const userStore = useUserStore()
+const permStore = usePermissionStore()
+
+const collapsed = computed(() => appStore.collapsed)
+
+const menus = computed(() => permStore.menus)
+
+const activeMenu = ref(route.path)
+
+watch(() => route.path, (val) => {
+  activeMenu.value = val
+})
+
+function handleSelect(path: string) {
+  router.push(path)
+}
+</script>
+
+<template>
+  <div class="sidebar-container" :class="{ collapsed }">
+    <div class="logo">
+      <span v-if="!collapsed" class="logo-text">CUIT Gym</span>
+      <span v-else class="logo-text-mini">CG</span>
+    </div>
+    <el-menu
+      :default-active="activeMenu"
+      :collapse="collapsed"
+      background-color="#001529"
+      text-color="#ffffffb3"
+      active-text-color="#fff"
+      @select="handleSelect"
+    >
+      <template v-for="menu in menus" :key="menu.path">
+        <el-sub-menu v-if="menu.children?.length" :index="menu.path">
+          <template #title>
+            <el-icon><component :is="menu.meta.icon" /></el-icon>
+            <span>{{ menu.meta.title }}</span>
+          </template>
+          <el-menu-item
+            v-for="child in menu.children"
+            :key="child.path"
+            :index="child.path"
+          >
+            <el-icon><component :is="child.meta.icon" /></el-icon>
+            <span>{{ child.meta.title }}</span>
+          </el-menu-item>
+        </el-sub-menu>
+        <el-menu-item v-else :index="menu.path">
+          <el-icon><component :is="menu.meta.icon" /></el-icon>
+          <span>{{ menu.meta.title }}</span>
+        </el-menu-item>
+      </template>
+    </el-menu>
+  </div>
+</template>
+
+<style scoped>
+.sidebar-container {
+  width: var(--sidebar-width, 220px);
+  height: 100vh;
+  background: #001529;
+  overflow-y: auto;
+  overflow-x: hidden;
+  transition: width 0.3s;
+}
+.sidebar-container.collapsed {
+  width: 64px;
+}
+.logo {
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #002140;
+}
+.logo-text {
+  color: #fff;
+  font-size: 18px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+.logo-text-mini {
+  color: #fff;
+  font-size: 18px;
+  font-weight: 700;
+}
+:deep(.el-menu) {
+  border-right: none;
+}
+:deep(.el-menu-item.is-active) {
+  background-color: var(--color-primary, #1890ff) !important;
+}
+</style>

gym-manage-cuit/src/layout/index.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import Sidebar from './Sidebar.vue'
+import Header from './Header.vue'
+</script>
+
+<template>
+  <div class="layout-container">
+    <Sidebar />
+    <div class="layout-right">
+      <Header />
+      <div class="layout-content">
+        <router-view />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.layout-container {
+  display: flex;
+  height: 100%;
+  width: 100%;
+}
+.layout-right {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.layout-content {
+  flex: 1;
+  overflow: auto;
+  padding: 16px;
+  background: var(--bg-base);
+}
+</style>

gym-manage-cuit/src/main.ts

@@ -0,0 +1,25 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+
+import App from './App.vue'
+import router from './router'
+import './assets/styles/global.scss'
+import { permission, permissionDisabled } from './directives/permission'
+
+const app = createApp(App)
+
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
+
+app.use(createPinia())
+app.use(router)
+app.use(ElementPlus, { size: 'default' })
+
+app.directive('permission', permission)
+app.directive('permission-disabled', permissionDisabled)
+
+app.mount('#app')

gym-manage-cuit/src/router/index.ts

@@ -0,0 +1,79 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import routes from './routes'
+import { getToken } from '@/utils/token'
+import { useUserStore } from '@/stores/user'
+import { usePermissionStore } from '@/stores/permission'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes,
+})
+
+// 权限码到路由路径的映射
+const permRouteMap: Record<string, string> = {
+  'business:member:view': '/member/list',
+  'business:memberCard:view': '/member/card',
+  'business:groupCourse:view': '/groupCourse/list',
+  'business:groupCourseType:view': '/groupCourse/type',
+  'business:groupCourseRecommend:view': '/groupCourse/recommend',
+  'business:checkIn:view': '/checkIn',
+  'business:dataCount:view': '/datacount',
+  'system:log:view': '/operationLog',
+  'system:user:view': '/system/account',
+  'system:role:view': '/system/role',
+  'system:dict:view': '/system/dict',
+}
+
+let permissionFetched = false
+
+router.beforeEach(async (to, _from, next) => {
+  const token = getToken()
+
+  // 登录页：已登录则跳转仪表盘
+  if (to.path === '/login') {
+    if (token) {
+      next('/dashboard')
+      return
+    }
+    next()
+    return
+  }
+
+  // 未登录则跳转登录
+  if (!token) {
+    next('/login')
+    return
+  }
+
+  const userStore = useUserStore()
+  const permStore = usePermissionStore()
+
+  // 首次进入时拉取权限并生成路由
+  if (!permissionFetched) {
+    try {
+      await userStore.fetchCurrentUser()
+      permissionFetched = true
+    } catch {
+      next('/login')
+      return
+    }
+  }
+
+  // 仪表盘无需权限检查
+  if (to.path === '/dashboard') {
+    next()
+    return
+  }
+
+  // 查找该路径需要的权限
+  const requiredPerm = Object.entries(permRouteMap).find(([, path]) => path === to.path)?.[0]
+
+  if (requiredPerm && !userStore.hasPermission(requiredPerm)) {
+    next('/dashboard')
+    return
+  }
+
+  next()
+})
+
+export default router

gym-manage-cuit/src/router/routes/index.ts

@@ -0,0 +1,92 @@
+import type { RouteRecordRaw } from 'vue-router'
+import Layout from '@/layout/index.vue'
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/login',
+    name: 'Login',
+    component: () => import('@/views/login/index.vue'),
+    meta: { title: '登录', hidden: true },
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: '/dashboard',
+    children: [
+      {
+        path: 'dashboard',
+        name: 'Dashboard',
+        component: () => import('@/views/dashboard/index.vue'),
+        meta: { title: '仪表盘', icon: 'Odometer' },
+      },
+      {
+        path: 'member/list',
+        name: 'MemberList',
+        component: () => import('@/views/member/index.vue'),
+        meta: { title: '会员管理', icon: 'User' },
+      },
+      {
+        path: 'member/card',
+        name: 'MemberCard',
+        component: () => import('@/views/memberCard/index.vue'),
+        meta: { title: '会员卡管理', icon: 'CreditCard' },
+      },
+      {
+        path: 'checkIn',
+        name: 'CheckIn',
+        component: () => import('@/views/checkIn/index.vue'),
+        meta: { title: '签到明细', icon: 'Checked' },
+      },
+      {
+        path: 'groupCourse/list',
+        name: 'GroupCourseList',
+        component: () => import('@/views/groupCourse/index.vue'),
+        meta: { title: '团课管理', icon: 'Calendar' },
+      },
+      {
+        path: 'groupCourse/type',
+        name: 'GroupCourseType',
+        component: () => import('@/views/groupCourseType/index.vue'),
+        meta: { title: '类型管理', icon: 'SetUp' },
+      },
+      {
+        path: 'groupCourse/recommend',
+        name: 'GroupCourseRecommend',
+        component: () => import('@/views/groupCourseRecommend/index.vue'),
+        meta: { title: '推荐团课', icon: 'Star' },
+      },
+      {
+        path: 'datacount',
+        name: 'DataCount',
+        component: () => import('@/views/datacount/index.vue'),
+        meta: { title: '数据报表', icon: 'DataAnalysis' },
+      },
+      {
+        path: 'operationLog',
+        name: 'OperationLog',
+        component: () => import('@/views/operationLog/index.vue'),
+        meta: { title: '操作日志', icon: 'Document' },
+      },
+      {
+        path: 'system/account',
+        name: 'Account',
+        component: () => import('@/views/account/index.vue'),
+        meta: { title: '账号管理', icon: 'Avatar' },
+      },
+      {
+        path: 'system/role',
+        name: 'Role',
+        component: () => import('@/views/role/index.vue'),
+        meta: { title: '角色管理', icon: 'UserFilled' },
+      },
+      {
+        path: 'system/dict',
+        name: 'Dict',
+        component: () => import('@/views/dict/index.vue'),
+        meta: { title: '字典管理', icon: 'Notebook' },
+      },
+    ],
+  },
+]
+
+export default routes

gym-manage-cuit/src/stores/app.ts

@@ -0,0 +1,13 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useAppStore = defineStore('app', () => {
+  const collapsed = ref(false)
+  const title = ref('CUIT Gym 管理系统')
+
+  function toggleCollapsed() {
+    collapsed.value = !collapsed.value
+  }
+
+  return { collapsed, title, toggleCollapsed }
+})

gym-manage-cuit/src/stores/counter.ts

@@ -0,0 +1,12 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0)
+  const doubleCount = computed(() => count.value * 2)
+  function increment() {
+    count.value++
+  }
+
+  return { count, doubleCount, increment }
+})

gym-manage-cuit/src/stores/permission.ts

@@ -0,0 +1,95 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { hasPermission } from '@/utils/token'
+
+export interface MenuItem {
+  path: string
+  name: string
+  meta: {
+    title: string
+    icon: string
+    permission?: string
+    hidden?: boolean
+  }
+  children?: MenuItem[]
+}
+
+const allMenus: MenuItem[] = [
+  {
+    path: '/dashboard',
+    name: 'Dashboard',
+    meta: { title: '仪表盘', icon: 'Odometer' },
+  },
+  {
+    path: '/member',
+    name: 'member',
+    meta: { title: '会员管理', icon: 'User', permission: 'business:member:view' },
+    children: [
+      { path: '/member/list', name: 'MemberList', meta: { title: '会员列表', icon: 'List', permission: 'business:member:view' } },
+      { path: '/member/card', name: 'MemberCard', meta: { title: '会员卡管理', icon: 'CreditCard', permission: 'business:memberCard:view' } },
+    ],
+  },
+  {
+    path: '/groupCourse',
+    name: 'groupCourse',
+    meta: { title: '团课管理', icon: 'Calendar', permission: 'business:groupCourse:view' },
+    children: [
+      { path: '/groupCourse/list', name: 'GroupCourseList', meta: { title: '团课列表', icon: 'List', permission: 'business:groupCourse:view' } },
+      { path: '/groupCourse/type', name: 'GroupCourseType', meta: { title: '类型管理', icon: 'SetUp', permission: 'business:groupCourseType:view' } },
+      { path: '/groupCourse/recommend', name: 'GroupCourseRecommend', meta: { title: '推荐管理', icon: 'Star', permission: 'business:groupCourseRecommend:view' } },
+    ],
+  },
+  {
+    path: '/checkIn',
+    name: 'CheckIn',
+    meta: { title: '签到明细', icon: 'Checked', permission: 'business:checkIn:view' },
+  },
+  {
+    path: '/datacount',
+    name: 'DataCount',
+    meta: { title: '数据报表', icon: 'DataAnalysis', permission: 'business:dataCount:view' },
+  },
+  {
+    path: '/operationLog',
+    name: 'OperationLog',
+    meta: { title: '操作日志', icon: 'Document', permission: 'system:log:view' },
+  },
+  {
+    path: '/system',
+    name: 'system',
+    meta: { title: '系统管理', icon: 'Setting' },
+    children: [
+      { path: '/system/account', name: 'Account', meta: { title: '账号管理', icon: 'Avatar', permission: 'system:user:view' } },
+      { path: '/system/role', name: 'Role', meta: { title: '角色管理', icon: 'UserFilled', permission: 'system:role:view' } },
+      { path: '/system/dict', name: 'Dict', meta: { title: '字典管理', icon: 'Notebook', permission: 'system:dict:view' } },
+    ],
+  },
+]
+
+function filterMenus(menus: MenuItem[]): MenuItem[] {
+  return menus
+    .map(menu => {
+      const children = menu.children ? filterMenus(menu.children) : undefined
+      const hasChildren = children && children.length > 0
+      const hasPerm = !menu.meta.permission || hasPermission(menu.meta.permission)
+      if (hasPerm || hasChildren) {
+        return { ...menu, children: hasChildren ? children : menu.children }
+      }
+      return null
+    })
+    .filter(Boolean) as MenuItem[]
+}
+
+export const usePermissionStore = defineStore('permission', () => {
+  const menus = ref<MenuItem[]>([])
+
+  function generateRoutes() {
+    menus.value = filterMenus(allMenus)
+  }
+
+  function resetRoutes() {
+    menus.value = []
+  }
+
+  return { menus, generateRoutes, resetRoutes }
+})

gym-manage-cuit/src/stores/user.ts

@@ -0,0 +1,63 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { login as apiLogin, getCurrentUser, type AuthResponse } from '@/api/modules/auth'
+import { setToken, removeToken, setUserInfo, removeUserInfo, getUserInfo, setPermissions, removePermissions, setRoles, removeRoles, getPermissions } from '@/utils/token'
+import { usePermissionStore } from '@/stores/permission'
+import router from '@/router'
+import { ElMessage } from 'element-plus'
+
+export const useUserStore = defineStore('user', () => {
+  const user = ref<{ id: number; username: string } | null>(getUserInfo())
+  const token = ref<string | null>(null)
+  const permissions = ref<string[]>(getPermissions())
+
+  async function login(params: { username: string; password: string }) {
+    const res: AuthResponse = await apiLogin(params)
+    token.value = res.token
+    user.value = { id: res.userId, username: res.username }
+    permissions.value = res.permissions || []
+    setToken(res.token)
+    setUserInfo(user.value)
+    setPermissions(res.permissions || [])
+    setRoles(res.roles || [])
+    usePermissionStore().generateRoutes()
+    return res
+  }
+
+  function logout() {
+    token.value = null
+    user.value = null
+    permissions.value = []
+    removeToken()
+    removeUserInfo()
+    removePermissions()
+    removeRoles()
+    usePermissionStore().resetRoutes()
+    router.push('/login')
+  }
+
+  async function fetchCurrentUser() {
+    try {
+      const res = await getCurrentUser()
+      user.value = { id: res.userId, username: res.username }
+      permissions.value = res.permissions || []
+      setUserInfo(user.value)
+      setPermissions(res.permissions || [])
+      setRoles(res.roles || [])
+      usePermissionStore().generateRoutes()
+    } catch {
+      ElMessage.error('获取用户信息失败,请重新登录')
+      logout()
+    }
+  }
+
+  function hasPermission(code: string): boolean {
+    return permissions.value.includes(code)
+  }
+
+  function hasAnyPermission(...codes: string[]): boolean {
+    return codes.some(c => permissions.value.includes(c))
+  }
+
+  return { user, token, permissions, login, logout, fetchCurrentUser, hasPermission, hasAnyPermission }
+})

gym-manage-cuit/src/utils/format.ts

@@ -0,0 +1,9 @@
+import dayjs from 'dayjs'
+
+export function formatDate(date: string | Date, fmt = 'YYYY-MM-DD HH:mm:ss'): string {
+  return dayjs(date).format(fmt)
+}
+
+export function formatDateShort(date: string | Date): string {
+  return dayjs(date).format('YYYY-MM-DD')
+}

gym-manage-cuit/src/utils/token.ts

@@ -0,0 +1,64 @@
+const TOKEN_KEY = 'gym_admin_token'
+const USER_KEY = 'gym_admin_user'
+const PERMISSIONS_KEY = 'gym_admin_permissions'
+const ROLES_KEY = 'gym_admin_roles'
+
+export function getToken(): string | null {
+  return localStorage.getItem(TOKEN_KEY)
+}
+
+export function setToken(token: string): void {
+  localStorage.setItem(TOKEN_KEY, token)
+}
+
+export function removeToken(): void {
+  localStorage.removeItem(TOKEN_KEY)
+}
+
+export function getUserInfo(): any {
+  const raw = localStorage.getItem(USER_KEY)
+  return raw ? JSON.parse(raw) : null
+}
+
+export function setUserInfo(user: any): void {
+  localStorage.setItem(USER_KEY, JSON.stringify(user))
+}
+
+export function removeUserInfo(): void {
+  localStorage.removeItem(USER_KEY)
+}
+
+export function getPermissions(): string[] {
+  const raw = localStorage.getItem(PERMISSIONS_KEY)
+  return raw ? JSON.parse(raw) : []
+}
+
+export function setPermissions(perms: string[]): void {
+  localStorage.setItem(PERMISSIONS_KEY, JSON.stringify(perms))
+}
+
+export function removePermissions(): void {
+  localStorage.removeItem(PERMISSIONS_KEY)
+}
+
+export function getRoles(): string[] {
+  const raw = localStorage.getItem(ROLES_KEY)
+  return raw ? JSON.parse(raw) : []
+}
+
+export function setRoles(roles: string[]): void {
+  localStorage.setItem(ROLES_KEY, JSON.stringify(roles))
+}
+
+export function removeRoles(): void {
+  localStorage.removeItem(ROLES_KEY)
+}
+
+export function hasPermission(code: string): boolean {
+  return getPermissions().includes(code)
+}
+
+export function hasAnyPermission(...codes: string[]): boolean {
+  const perms = getPermissions()
+  return codes.some(c => perms.includes(c))
+}

gym-manage-cuit/src/views/account/index.vue

@@ -0,0 +1,241 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted, computed } from 'vue'
+import { getUsersByPage, createUser, updateUser, deleteUser, getUserRoles, assignRoles } from '@/api/modules/user'
+import { getAllRoles } from '@/api/modules/role'
+import { formatDateShort } from '@/utils/format'
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+const loading = ref(false)
+const list = ref<any[]>([])
+const total = ref(0)
+const dialogVisible = ref(false)
+const roleVisible = ref(false)
+const isEdit = ref(false)
+const editId = ref<number | null>(null)
+const allRoles = ref<any[]>([])
+const selectedRoles = ref<number[]>([])
+
+const isBuiltinAdmin = (row: any) => row?.username === 'admin'
+
+const page = reactive({ page: 0, size: 10, sort: 'id', order: 'asc', keyword: '' })
+const currentPage = computed({
+  get: () => page.page + 1,
+  set: (val: number) => { page.page = val - 1 }
+})
+const form = reactive({ username: '', password: '', email: '', nickname: '', phone: '', roles: [] as number[] })
+
+const avatarColors = ['#1890ff', '#52c41a', '#faad14', '#f5222d', '#722ed1', '#13c2c2', '#eb2f96', '#fa541c']
+const avatarColor = (name: string) => {
+  let hash = 0
+  for (let i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash)
+  return avatarColors[Math.abs(hash) % avatarColors.length]
+}
+
+const maskEmail = (email: string | null | undefined): string => {
+  if (!email) return '-'
+  const at = email.indexOf('@')
+  if (at <= 1) return email
+  return email[0] + '***' + email.slice(at)
+}
+
+const maskPhone = (phone: string | null | undefined): string => {
+  if (!phone) return '-'
+  if (phone.length < 7) return phone
+  return phone.slice(0, 3) + '****' + phone.slice(-4)
+}
+
+async function fetchData() {
+  loading.value = true
+  try {
+    const res = await getUsersByPage(page)
+    if (res?.content) {
+      list.value = res.content; total.value = res.totalElements || 0
+    } else if (Array.isArray(res)) {
+      list.value = res; total.value = res.length
+    }
+  } catch { list.value = [] } finally { loading.value = false }
+}
+
+async function handleDelete(row: any) {
+  if (isBuiltinAdmin(row)) {
+    ElMessage.warning('超级管理员不可删除')
+    return
+  }
+  const { value: pwd } = await ElMessageBox.prompt('请输入管理员密码以确认删除', '验证密码', {
+    inputType: 'password',
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+  }).catch(() => {})
+  if (!pwd) {
+    ElMessage.warning('请输入验证密码')
+    return
+  }
+  try {
+    await deleteUser(row.id, { params: { adminPassword: pwd } })
+    ElMessage.success('删除成功')
+    fetchData()
+  } catch (e: any) {
+    const msg = e?.response?.data || e?.message || '删除失败'
+    ElMessage.error(typeof msg === 'string' ? msg : '删除失败')
+  }
+}
+
+function openCreate() { isEdit.value = false; dialogVisible.value = true }
+function openEdit(row: any) { isEdit.value = true; editId.value = row.id; Object.assign(form, row); dialogVisible.value = true }
+
+async function handleSave() {
+  if (isEdit.value && isBuiltinAdmin(form)) {
+    ElMessage.warning('超级管理员不可编辑')
+    return
+  }
+  try {
+    if (isEdit.value) {
+      const { value: pwd } = await ElMessageBox.prompt('请输入管理员密码以确认编辑', '验证密码', {
+        inputType: 'password',
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+      }).catch(() => {})
+      if (!pwd) {
+        ElMessage.warning('请输入验证密码')
+        return
+      }
+      await updateUser(editId.value!, { email: form.email, nickname: form.nickname, phone: form.phone }, { params: { adminPassword: pwd } })
+    } else {
+      await createUser(form)
+    }
+    ElMessage.success(isEdit.value ? '更新成功' : '创建成功')
+    dialogVisible.value = false
+    fetchData()
+  } catch (e: any) {
+    const msg = e?.response?.data || e?.message || '操作失败'
+    ElMessage.error(typeof msg === 'string' ? msg : '操作失败')
+  }
+}
+
+async function openAssignRoles(row: any) {
+  if (isBuiltinAdmin(row)) {
+    ElMessage.warning('超级管理员不可被分配角色')
+    return
+  }
+  const roles = await getAllRoles()
+  allRoles.value = Array.isArray(roles) ? roles : []
+  try {
+    const userRoles = await getUserRoles(row.id)
+    selectedRoles.value = Array.isArray(userRoles) ? userRoles.map((r: any) => r.id) : []
+  } catch { selectedRoles.value = [] }
+  editId.value = row.id
+  roleVisible.value = true
+}
+
+async function handleAssignRoles() {
+  const { value: pwd } = await ElMessageBox.prompt('请输入管理员密码以确认分配角色', '验证密码', {
+    inputType: 'password',
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+  }).catch(() => {})
+  if (!pwd) {
+    ElMessage.warning('请输入验证密码')
+    return
+  }
+  try {
+    await assignRoles(editId.value!, selectedRoles.value, { params: { adminPassword: pwd } })
+    ElMessage.success('分配成功')
+    roleVisible.value = false
+  } catch (e: any) {
+    const msg = e?.response?.data || e?.message || '分配失败'
+    ElMessage.error(typeof msg === 'string' ? msg : '分配失败')
+  }
+}
+
+onMounted(() => fetchData())
+</script>
+
+<template>
+  <div>
+    <h2 style="margin-bottom:16px">账号管理</h2>
+    <el-card class="search-card">
+      <el-form inline>
+        <el-form-item label="关键词"><el-input v-model="page.keyword" placeholder="用户名/邮箱" clearable @keyup.enter="fetchData" /></el-form-item>
+        <el-form-item><el-button type="primary" @click="fetchData">查询</el-button></el-form-item>
+        <el-form-item><el-button type="primary" @click="openCreate" v-permission="'system:user:create'">新增用户</el-button></el-form-item>
+      </el-form>
+    </el-card>
+    <el-card>
+      <el-table :data="list" v-loading="loading" stripe>
+        <el-table-column prop="id" label="ID" width="70" align="center" />
+        <el-table-column label="用户" min-width="200">
+          <template #default="{ row }">
+            <div style="display:flex;align-items:center;gap:10px">
+              <div
+                :style="{
+                  width:'36px',height:'36px',borderRadius:'50%',
+                  background: avatarColor(row.username),
+                  color:'#fff',display:'flex',alignItems:'center',justifyContent:'center',
+                  fontSize:'14px',fontWeight:'600',flexShrink:0,
+                }"
+              >{{ row.username?.[0]?.toUpperCase() }}</div>
+              <div style="display:flex;flex-direction:column;gap:2px">
+                <span style="font-weight:500;line-height:1.2">{{ row.username }}</span>
+                <span v-if="isBuiltinAdmin(row)" style="font-size:12px;color:#e6a23c;line-height:1.2">超级管理员</span>
+              </div>
+              <el-tag v-if="isBuiltinAdmin(row)" type="warning" size="small" effect="dark" style="margin-left:auto">内置</el-tag>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="nickname" label="昵称" width="120" />
+        <el-table-column label="邮箱" width="200">
+          <template #default="{ row }">{{ maskEmail(row.email) }}</template>
+        </el-table-column>
+        <el-table-column label="手机号" width="140">
+          <template #default="{ row }">{{ maskPhone(row.phone) }}</template>
+        </el-table-column>
+        <el-table-column label="状态" width="80" align="center">
+          <template #default="{ row }"><el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">{{ row.status === 1 ? '启用' : '禁用' }}</el-tag></template>
+        </el-table-column>
+        <el-table-column label="创建时间" width="170" align="center">
+          <template #default="{ row }">{{ row.createdAt ? formatDateShort(row.createdAt) : '-' }}</template>
+        </el-table-column>
+        <el-table-column label="操作" width="260" fixed="right">
+          <template #default="{ row }">
+            <el-button type="primary" link @click="openEdit(row)" v-permission="'system:user:edit'">编辑</el-button>
+            <el-button type="primary" link @click="openAssignRoles(row)" v-permission="'system:user:edit'">分配角色</el-button>
+            <el-button type="danger" link @click="handleDelete(row)" v-permission="'system:user:delete'">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div style="margin-top:16px;text-align:right">
+        <el-pagination v-model:current-page="currentPage" :page-size="page.size" :total="total" layout="prev,pager,next,total" @current-change="fetchData" />
+      </div>
+    </el-card>
+
+    <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑用户' : '新增用户'" width="500px" :close-on-click-modal="false">
+      <el-form :model="form" label-width="100px">
+        <el-form-item label="用户名"><el-input v-model="form.username" :disabled="isEdit" /></el-form-item>
+        <el-form-item v-if="!isEdit" label="密码"><el-input v-model="form.password" type="password" /></el-form-item>
+        <el-form-item label="邮箱"><el-input v-model="form.email" /></el-form-item>
+        <el-form-item label="昵称"><el-input v-model="form.nickname" /></el-form-item>
+        <el-form-item label="手机号"><el-input v-model="form.phone" /></el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleSave">确定</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog v-model="roleVisible" title="分配角色" width="400px" :close-on-click-modal="false">
+      <el-checkbox-group v-model="selectedRoles">
+        <el-checkbox v-for="role in allRoles" :key="role.id" :label="role.id">{{ role.roleName }}</el-checkbox>
+      </el-checkbox-group>
+      <template #footer>
+        <el-button @click="roleVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleAssignRoles">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+.search-card {
+  margin-bottom: 16px;
+}
+</style>

gym-manage-cuit/src/views/checkIn/index.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { getAllSignInRecords, getAllSignInStatistics } from '@/api/modules/checkIn'
+import { formatDate } from '@/utils/format'
+import { download } from '@/api/request'
+import dayjs from 'dayjs'
+
+const loading = ref(false)
+const list = ref<any[]>([])
+const stats = ref<any>({})
+
+const filters = reactive({
+  startDate: dayjs().subtract(30, 'day').format('YYYY-MM-DD'),
+  endDate: dayjs().format('YYYY-MM-DD'),
+})
+
+const sortMode = ref('timeDesc')
+
+const sortOptions: { label: string; value: string; sortBy: string; sortOrder: string }[] = [
+  { label: '签到时间 新→旧', value: 'timeDesc', sortBy: 'signInTime', sortOrder: 'desc' },
+  { label: '签到时间 旧→新', value: 'timeAsc', sortBy: 'signInTime', sortOrder: 'asc' },
+  { label: 'ID 升序', value: 'idAsc', sortBy: 'id', sortOrder: 'asc' },
+  { label: 'ID 降序', value: 'idDesc', sortBy: 'id', sortOrder: 'desc' },
+  { label: '会员姓名 A→Z', value: 'nameAsc', sortBy: 'memberName', sortOrder: 'asc' },
+  { label: '会员姓名 Z→A', value: 'nameDesc', sortBy: 'memberName', sortOrder: 'desc' },
+]
+
+async function fetchData() {
+  loading.value = true
+  try {
+    const sortOpt = sortOptions.find((o) => o.value === sortMode.value)!
+    const res = await getAllSignInRecords({
+      startDate: filters.startDate,
+      endDate: filters.endDate,
+      sortBy: sortOpt.sortBy,
+      sortOrder: sortOpt.sortOrder,
+    })
+    if (res?.data) {
+      list.value = Array.isArray(res.data) ? res.data : []
+    }
+    const statsRes = await getAllSignInStatistics({
+      startDate: filters.startDate,
+      endDate: filters.endDate,
+    })
+    if (statsRes?.data) {
+      stats.value = statsRes.data
+    }
+  } catch {
+    list.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+async function handleExport() {
+  await download('/api/checkIn/records/export', filters, '签到记录.csv')
+}
+
+function signInTypeLabel(type: string) {
+  const map: Record<string, string> = { QR_CODE: '扫码', MANUAL: '手动', FACE: '人脸' }
+  return map[type] || type || '-'
+}
+
+onMounted(() => { fetchData() })
+</script>
+
+<template>
+  <div>
+    <h2 style="margin-bottom:16px">签到明细</h2>
+    <el-card class="search-card" shadow="never">
+      <el-form :model="filters" inline>
+        <el-form-item label="开始日期">
+          <el-date-picker v-model="filters.startDate" type="date" value-format="YYYY-MM-DD" />
+        </el-form-item>
+        <el-form-item label="结束日期">
+          <el-date-picker v-model="filters.endDate" type="date" value-format="YYYY-MM-DD" />
+        </el-form-item>
+        <el-form-item label="排序">
+          <el-select v-model="sortMode" style="width:180px">
+            <el-option v-for="opt in sortOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="fetchData">查询</el-button>
+          <el-button @click="handleExport">导出签到记录</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-row :gutter="16" style="margin-bottom:16px">
+      <el-col :span="6">
+        <el-card shadow="hover">
+          <div style="text-align:center">
+            <div style="font-size:28px;font-weight:bold;color:#1890ff">{{ stats.totalCount ?? 0 }}</div>
+            <div style="color:var(--text-secondary);font-size:13px">签到总次数</div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="hover">
+          <div style="text-align:center">
+            <div style="font-size:28px;font-weight:bold;color:#52c41a">{{ stats.successCount ?? 0 }}</div>
+            <div style="color:var(--text-secondary);font-size:13px">成功签到</div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="hover">
+          <div style="text-align:center">
+            <div style="font-size:28px;font-weight:bold;color:#e6a23c">
+              {{ stats.successRate != null ? stats.successRate.toFixed(1) + '%' : '0%' }}
+            </div>
+            <div style="color:var(--text-secondary);font-size:13px">签到成功率</div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="hover">
+          <div style="text-align:center">
+            <div style="font-size:28px;font-weight:bold;color:#722ed1">{{ stats.uniqueMemberCount ?? 0 }}</div>
+            <div style="color:var(--text-secondary);font-size:13px">活跃会员数</div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-card shadow="never">
+      <el-table :data="list" v-loading="loading" stripe>
+        <el-table-column prop="id" label="ID" width="70" align="center" />
+        <el-table-column prop="memberName" label="会员姓名" width="120" />
+        <el-table-column label="签到时间" width="170">
+          <template #default="{ row }">
+            {{ row.signInTime ? formatDate(row.signInTime) : '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="签到方式" width="90" align="center">
+          <template #default="{ row }">
+            <el-tag size="small">{{ signInTypeLabel(row.signInType) }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="memberCardType" label="会员卡类型" width="130" show-overflow-tooltip />
+        <el-table-column label="状态" width="90" align="center">
+          <template #default="{ row }">
+            <el-tag :type="row.signInStatus === 'SUCCESS' ? 'success' : 'danger'" size="small">
+              {{ row.signInStatus === 'SUCCESS' ? '成功' : '失败' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="source" label="来源" width="100" align="center">
+          <template #default="{ row }">
+            {{ row.source === 'MINI_PROGRAM' ? '小程序' : row.source === 'PC_BACKEND' ? '后台' : row.source || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="失败原因" min-width="140">
+          <template #default="{ row }">
+            {{ row.failReason || '-' }}
+          </template>
+        </el-table-column>
+      </el-table>
+      <div v-if="list.length === 0 && !loading" style="color:#909399;font-size:13px;text-align:center;padding:40px">
+        暂无签到记录
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<style scoped>
+.search-card {
+  margin-bottom: 16px;
+}
+</style>

gym-manage-cuit/src/views/dashboard/index.vue

@@ -0,0 +1,229 @@
+<script setup lang="ts">
+import { ref, onMounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import {
+  getMemberStatistics,
+  getBookingStatistics,
+  getSignInStatistics,
+} from '@/api/modules/datacount'
+import dayjs from 'dayjs'
+
+interface StatCard {
+  label: string
+  value: number | string
+  color: string
+}
+
+const loading = ref(false)
+const statCards = ref<StatCard[]>([
+  { label: '会员总数', value: 0, color: '#1890ff' },
+  { label: '今日新增', value: 0, color: '#52c41a' },
+  { label: '今日签到', value: 0, color: '#722ed1' },
+  { label: '今日预约', value: 0, color: '#faad14' },
+])
+
+const memberChartRef = ref()
+const bookingChartRef = ref()
+const signinChartRef = ref()
+
+let memberChart: echarts.ECharts | null = null
+let bookingChart: echarts.ECharts | null = null
+let signinChart: echarts.ECharts | null = null
+
+function buildDayLabels(days: number) {
+  const labels: string[] = []
+  for (let i = days - 1; i >= 0; i--) {
+    labels.push(dayjs().subtract(i, 'day').format('MM/DD'))
+  }
+  return labels
+}
+
+function getDayRange(dayOffset: number) {
+  const d = dayjs().subtract(dayOffset, 'day')
+  return {
+    startTime: d.startOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+    endTime: d.endOf('day').format('YYYY-MM-DDTHH:mm:ss'),
+  }
+}
+
+function buildChartOption(title: string, subtext: string, legendData: string[], seriesData: any[]) {
+  return {
+    title: {
+      text: title,
+      subtext,
+      left: 'center',
+      textStyle: { fontSize: 15, fontWeight: 600, color: '#303133' },
+      subtextStyle: { color: '#909399' },
+    },
+    tooltip: { trigger: 'axis' },
+    legend: { data: legendData, bottom: 0 },
+    xAxis: { data: buildDayLabels(7) },
+    yAxis: { type: 'value', minInterval: 1 },
+    grid: { top: 72, bottom: 48, left: 52, right: 20 },
+    series: seriesData,
+  }
+}
+
+async function fetchData() {
+  loading.value = true
+
+  const newMemberData = new Array(7).fill(0)
+  const activeMemberData = new Array(7).fill(0)
+  const bookingData = new Array(7).fill(0)
+  const cancelData = new Array(7).fill(0)
+  const signinData = new Array(7).fill(0)
+
+  // 今日数据索引（6 = 今天）
+  const todayIdx = 6
+
+  try {
+    const promises: Promise<any>[] = []
+    for (let i = 0; i < 7; i++) {
+      const range = getDayRange(6 - i)
+
+      promises.push(
+        getMemberStatistics(range).then((res: any) => {
+          newMemberData[i] = res?.newMembers ?? 0
+          activeMemberData[i] = res?.activeMembers ?? 0
+          if (i === todayIdx) {
+            statCards.value[0].value = res?.totalMembers ?? 0
+            statCards.value[1].value = res?.newMembers ?? 0
+          }
+        }).catch(() => {}),
+
+        getBookingStatistics(range).then((res: any) => {
+          bookings[i] = res?.newBookings ?? 0
+          cancelData[i] = res?.cancelBookings ?? 0
+          if (i === todayIdx) {
+            statCards.value[3].value = res?.newBookings ?? 0
+          }
+        }).catch(() => {}),
+
+        getSignInStatistics(range).then((res: any) => {
+          signinData[i] = res?.totalSignIns ?? 0
+          if (i === todayIdx) {
+            statCards.value[2].value = res?.totalSignIns ?? 0
+          }
+        }).catch(() => {}),
+      )
+    }
+    await Promise.allSettled(promises)
+  } catch {
+    // fallback: empty data
+  } finally {
+    loading.value = false
+  }
+
+  setChartData(newMemberData, activeMemberData, bookingData, cancelData, signinData)
+}
+
+function setChartData(
+  newMember: number[],
+  activeMember: number[],
+  bookings: number[],
+  cancels: number[],
+  signins: number[],
+) {
+  if (!memberChart || !bookingChart || !signinChart) {
+    initCharts(newMember, activeMember, bookings, cancels, signins)
+  } else {
+    memberChart.setOption({
+      series: [
+        { data: newMember },
+        { data: activeMember },
+      ],
+    })
+    bookingChart.setOption({
+      series: [
+        { data: bookings },
+        { data: cancels },
+      ],
+    })
+    signinChart.setOption({
+      series: [{ data: signins }],
+    })
+  }
+}
+
+function initCharts(
+  newMember: number[],
+  activeMember: number[],
+  bookings: number[],
+  cancels: number[],
+  signins: number[],
+) {
+  const memberOption = buildChartOption('会员趋势', '近7天新增与活跃会员', ['新增会员', '活跃会员'], [
+    { name: '新增会员', type: 'bar', data: newMember, itemStyle: { borderRadius: 4 }, color: '#1890ff' },
+    { name: '活跃会员', type: 'bar', data: activeMember, itemStyle: { borderRadius: 4 }, color: '#52c41a' },
+  ] as any[])
+
+  const bookingOption = buildChartOption('预约趋势', '近7天预约与取消', ['预约数', '取消数'], [
+    { name: '预约数', type: 'line', data: bookings, smooth: true, color: '#1890ff' },
+    { name: '取消数', type: 'line', data: cancels, smooth: true, color: '#ff4d4f' },
+  ] as any[])
+
+  const signinOption = buildChartOption('签到趋势', '近7天每日签到人数', ['签到人数'], [
+    { name: '签到人数', type: 'line', data: signins, areaStyle: { opacity: 0.2 }, smooth: true, color: '#722ed1' },
+  ] as any[])
+
+  nextTick(() => {
+    memberChart = echarts.init(memberChartRef.value)
+    memberChart.setOption(memberOption)
+    bookingChart = echarts.init(bookingChartRef.value)
+    bookingChart.setOption(bookingOption)
+    signinChart = echarts.init(signinChartRef.value)
+    signinChart.setOption(signinOption)
+
+    const onResize = () => {
+      memberChart?.resize()
+      bookingChart?.resize()
+      signinChart?.resize()
+    }
+    window.addEventListener('resize', onResize)
+  })
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <div v-loading="loading">
+    <h2 style="margin-bottom: 16px">仪表盘</h2>
+
+    <el-row :gutter="16" style="margin-bottom: 16px">
+      <el-col :span="6" v-for="card in statCards" :key="card.label">
+        <el-card shadow="hover">
+          <div style="text-align: center">
+            <div style="font-size: 28px; font-weight: bold" :style="{ color: card.color }">
+              {{ typeof card.value === 'number' ? card.value.toLocaleString() : card.value }}
+            </div>
+            <div style="color: var(--text-secondary); margin-top: 8px">{{ card.label }}</div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="16" style="margin-bottom: 16px">
+      <el-col :span="12">
+        <el-card shadow="hover">
+          <div ref="memberChartRef" style="height: 300px"></div>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card shadow="hover">
+          <div ref="bookingChartRef" style="height: 300px"></div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="16">
+      <el-col :span="24">
+        <el-card shadow="hover">
+          <div ref="signinChartRef" style="height: 300px"></div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>

gym-manage-cuit/src/views/datacount/index.vue

@@ -0,0 +1,291 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted, nextTick, type Ref } from 'vue'
+import {
+  getStatisticsSummary,
+  getMemberStatistics,
+  getBookingStatistics,
+  getSignInStatistics,
+  getHistoricalStatistics,
+} from '@/api/modules/datacount'
+import { download } from '@/api/request'
+import { ElMessage } from 'element-plus'
+import dayjs from 'dayjs'
+import * as echarts from 'echarts'
+
+const loading = ref(false)
+const summary = ref<any>({})
+const memberStats = ref<any>({})
+const bookingStats = ref<any>({})
+const signInStats = ref<any>({})
+const historyList = ref<any[]>([])
+const chartRef: Ref<HTMLElement | null> = ref(null)
+let chartInstance: echarts.ECharts | null = null
+
+const filters = reactive({
+  startDate: dayjs().subtract(30, 'day').format('YYYY-MM-DD'),
+  endDate: dayjs().format('YYYY-MM-DD'),
+  periodType: 'DAY',
+})
+
+async function fetchData() {
+  loading.value = true
+  try {
+    const startTime = dayjs(filters.startDate).startOf('day').format('YYYY-MM-DDTHH:mm:ss')
+    const endTime = dayjs(filters.endDate).endOf('day').format('YYYY-MM-DDTHH:mm:ss')
+    const params = { periodType: filters.periodType, startTime, endTime }
+
+    const [s, m, b, si, h] = await Promise.all([
+      getStatisticsSummary(params),
+      getMemberStatistics(params),
+      getBookingStatistics(params),
+      getSignInStatistics(params),
+      getHistoricalStatistics(params),
+    ])
+    summary.value = s || {}
+    memberStats.value = m || {}
+    bookingStats.value = b || {}
+    signInStats.value = si || {}
+    historyList.value = Array.isArray(h) ? h : []
+  } catch {
+    summary.value = {}
+    memberStats.value = {}
+    bookingStats.value = {}
+    signInStats.value = {}
+    historyList.value = []
+  } finally {
+    loading.value = false
+    await nextTick()
+    renderChart()
+  }
+}
+
+function renderChart() {
+  if (!chartRef.value) return
+  if (!chartInstance) {
+    chartInstance = echarts.init(chartRef.value)
+  }
+  const si = signInStats.value
+  const bk = bookingStats.value
+
+  chartInstance.setOption({
+    tooltip: { trigger: 'axis' },
+    legend: {
+      bottom: 0,
+      left: 'center',
+      itemGap: 16,
+      data: ['签到总次数', '成功签到', '预约数', '出席预约'],
+    },
+    grid: { left: 50, right: 20, top: 20, bottom: 50 },
+    xAxis: {
+      type: 'category',
+      data: ['本周期'],
+    },
+    yAxis: { type: 'value', minInterval: 1 },
+    series: [
+      {
+        name: '签到总次数', type: 'bar', barWidth: 36,
+        data: [si.totalSignIns || 0],
+        itemStyle: { color: '#1890ff' },
+      },
+      {
+        name: '成功签到', type: 'bar', barWidth: 36,
+        data: [si.successSignIns || 0],
+        itemStyle: { color: '#52c41a' },
+      },
+      {
+        name: '预约数', type: 'bar', barWidth: 36,
+        data: [bk.newBookings || 0],
+        itemStyle: { color: '#faad14' },
+      },
+      {
+        name: '出席预约', type: 'bar', barWidth: 36,
+        data: [bk.attendBookings || 0],
+        itemStyle: { color: '#722ed1' },
+      },
+    ],
+  })
+}
+
+async function handleExport() {
+  try {
+    const startTime = dayjs(filters.startDate).startOf('day').format('YYYY-MM-DDTHH:mm:ss')
+    const endTime = dayjs(filters.endDate).endOf('day').format('YYYY-MM-DDTHH:mm:ss')
+    await download('/api/datacount/export', { periodType: filters.periodType, startTime, endTime }, '数据报表.xlsx')
+    ElMessage.success('导出成功')
+  } catch {
+    ElMessage.error('导出失败')
+  }
+}
+
+function dateLabel(d: string | null) {
+  if (!d) return '-'
+  return dayjs(d).format('YYYY-MM-DD')
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <div>
+    <h2 style="margin-bottom:16px">数据报表</h2>
+
+    <!-- Filter -->
+    <el-card class="search-card" shadow="never">
+      <el-form :model="filters" inline>
+        <el-form-item label="开始日期">
+          <el-date-picker v-model="filters.startDate" type="date" value-format="YYYY-MM-DD" />
+        </el-form-item>
+        <el-form-item label="结束日期">
+          <el-date-picker v-model="filters.endDate" type="date" value-format="YYYY-MM-DD" />
+        </el-form-item>
+        <el-form-item label="统计周期">
+          <el-select v-model="filters.periodType" style="width:120px">
+            <el-option label="按日" value="DAY" />
+            <el-option label="按周" value="WEEK" />
+            <el-option label="按月" value="MONTH" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="fetchData">查询</el-button>
+          <el-button @click="handleExport">导出报表</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <!-- Summary Cards -->
+    <el-row :gutter="16" style="margin-bottom:16px">
+      <el-col :span="6">
+        <el-card shadow="hover">
+          <div style="text-align:center">
+            <div style="font-size:28px;font-weight:bold;color:#1890ff">
+              {{ memberStats.totalMembers ?? 0 }}
+            </div>
+            <div style="color:var(--text-secondary);font-size:13px;margin-top:4px">会员总数</div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="hover">
+          <div style="text-align:center">
+            <div style="font-size:28px;font-weight:bold;color:#52c41a">
+              {{ memberStats.newMembers ?? 0 }}
+            </div>
+            <div style="color:var(--text-secondary);font-size:13px;margin-top:4px">新增会员</div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="hover">
+          <div style="text-align:center">
+            <div style="font-size:28px;font-weight:bold;color:#faad14">
+              {{ bookingStats.newBookings ?? 0 }}
+            </div>
+            <div style="color:var(--text-secondary);font-size:13px;margin-top:4px">预约总数</div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="hover">
+          <div style="text-align:center">
+            <div style="font-size:28px;font-weight:bold;color:#722ed1">
+              {{ signInStats.totalSignIns ?? 0 }}
+            </div>
+            <div style="color:var(--text-secondary);font-size:13px;margin-top:4px">签到总数</div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- Member detail row -->
+    <el-row :gutter="16" style="margin-bottom:16px">
+      <el-col :span="12">
+        <el-card shadow="never">
+          <template #header><strong>会员统计</strong></template>
+          <el-descriptions :column="2" border size="small">
+            <el-descriptions-item label="累计会员">{{ memberStats.totalMembers ?? 0 }}</el-descriptions-item>
+            <el-descriptions-item label="新增会员">{{ memberStats.newMembers ?? 0 }}</el-descriptions-item>
+            <el-descriptions-item label="活跃会员">{{ memberStats.activeMembers ?? 0 }}</el-descriptions-item>
+            <el-descriptions-item label="签到会员">{{ memberStats.signInMembers ?? 0 }}</el-descriptions-item>
+            <el-descriptions-item label="预约会员">{{ memberStats.bookingMembers ?? 0 }}</el-descriptions-item>
+            <el-descriptions-item label="取消预约">{{ memberStats.cancelBookingMembers ?? 0 }}</el-descriptions-item>
+          </el-descriptions>
+        </el-card>
+      </el-col>
+
+      <el-col :span="12">
+        <el-card shadow="never">
+          <template #header><strong>预约统计</strong></template>
+          <el-descriptions :column="2" border size="small">
+            <el-descriptions-item label="预约数">{{ bookingStats.newBookings ?? 0 }}</el-descriptions-item>
+            <el-descriptions-item label="取消预约">{{ bookingStats.cancelBookings ?? 0 }}</el-descriptions-item>
+            <el-descriptions-item label="出席预约">{{ bookingStats.attendBookings ?? 0 }}</el-descriptions-item>
+            <el-descriptions-item label="缺席预约">{{ bookingStats.absentBookings ?? 0 }}</el-descriptions-item>
+            <el-descriptions-item label="出席率">{{ bookingStats.attendanceRate != null ? bookingStats.attendanceRate + '%' : '-' }}</el-descriptions-item>
+            <el-descriptions-item label="取消率">{{ bookingStats.cancelRate != null ? bookingStats.cancelRate + '%' : '-' }}</el-descriptions-item>
+          </el-descriptions>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- SignIn detail row -->
+    <el-row :gutter="16" style="margin-bottom:16px">
+      <el-col :span="12">
+        <el-card shadow="never">
+          <template #header><strong>签到统计</strong></template>
+          <el-descriptions :column="2" border size="small">
+            <el-descriptions-item label="签到总数">{{ signInStats.totalSignIns ?? 0 }}</el-descriptions-item>
+            <el-descriptions-item label="成功签到">{{ signInStats.successSignIns ?? 0 }}</el-descriptions-item>
+            <el-descriptions-item label="失败签到">{{ signInStats.failedSignIns ?? 0 }}</el-descriptions-item>
+            <el-descriptions-item label="成功率">{{ signInStats.successRate != null ? signInStats.successRate + '%' : '-' }}</el-descriptions-item>
+            <el-descriptions-item label="签到人数">{{ signInStats.signInMembers ?? 0 }}</el-descriptions-item>
+            <el-descriptions-item label="扫码/手动/人脸">
+              {{ signInStats.qrCodeSignIns ?? 0 }} / {{ signInStats.manualSignIns ?? 0 }} / {{ signInStats.faceSignIns ?? 0 }}
+            </el-descriptions-item>
+          </el-descriptions>
+        </el-card>
+      </el-col>
+
+      <el-col :span="12">
+        <el-card shadow="never">
+          <template #header><strong>数据趋势</strong></template>
+          <div ref="chartRef" style="width:100%;height:220px"></div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- Historical data table -->
+    <el-card shadow="never">
+      <template #header><strong>历史统计</strong></template>
+      <el-table :data="historyList" v-loading="loading" stripe>
+        <el-table-column label="统计日期" width="170" align="center">
+          <template #default="{ row }">{{ dateLabel(row.statDate) }}</template>
+        </el-table-column>
+        <el-table-column label="统计类型" width="100" align="center">
+          <template #default="{ row }">
+            <el-tag size="small" :type="row.statType === 'MEMBER' ? '' : row.statType === 'BOOKING' ? 'success' : 'warning'">
+              {{ row.statType === 'MEMBER' ? '会员' : row.statType === 'BOOKING' ? '预约' : row.statType === 'SIGN_IN' ? '签到' : row.statType }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="周期" width="80" align="center">
+          <template #default="{ row }">
+            {{ row.periodType === 'DAY' ? '按日' : row.periodType === 'WEEK' ? '按周' : row.periodType === 'MONTH' ? '按月' : row.periodType || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="count" label="数量" width="100" align="center" />
+        <el-table-column prop="extraData" label="详细信息" min-width="160" show-overflow-tooltip />
+      </el-table>
+      <div v-if="historyList.length === 0 && !loading" style="color:#909399;font-size:13px;text-align:center;padding:40px">
+        暂无历史统计数据
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<style scoped>
+.search-card {
+  margin-bottom: 16px;
+}
+</style>

gym-manage-cuit/src/views/dict/index.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { get } from '@/api/request'
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+const loading = ref(false)
+const list = ref<any[]>([])
+
+async function fetchData() {
+  loading.value = true
+  try {
+    const res = await get('/api/dictionaries')
+    list.value = Array.isArray(res) ? res : []
+  } catch { list.value = [] } finally { loading.value = false }
+}
+
+onMounted(() => fetchData())
+</script>
+
+<template>
+  <div>
+    <h2 style="margin-bottom:16px">字典管理</h2>
+    <el-card>
+      <el-table :data="list" v-loading="loading" stripe>
+        <el-table-column prop="id" label="ID" width="80" />
+        <el-table-column prop="type" label="字典类型" width="160" />
+        <el-table-column prop="code" label="编码" width="160" />
+        <el-table-column prop="name" label="字典名称" width="160" />
+        <el-table-column prop="value" label="值" />
+      </el-table>
+    </el-card>
+  </div>
+</template>

gym-manage-cuit/src/views/groupCourse/index.vue

@@ -0,0 +1,773 @@
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted, watch } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import {
+  getAllGroupCourses,
+  createGroupCourse,
+  updateGroupCourse,
+  deleteGroupCourse,
+  restoreGroupCourse,
+  uploadImage,
+  getPresignedUrl,
+} from '@/api/modules/groupCourse'
+import { getAllGroupCourseTypes } from '@/api/modules/groupCourseType'
+import { formatDate } from '@/utils/format'
+
+interface CourseItem {
+  id: number
+  courseName: string
+  coachId: number
+  courseType: number
+  startTime: string | null
+  endTime: string | null
+  maxMembers: number
+  currentMembers: number
+  status: number
+  location: string
+  coverImage: string | null
+  description: string
+  storedValueAmount: number
+  createdAt: string | null
+  updatedAt: string | null
+  deletedAt: string | null
+}
+
+// ---- State ----
+const loading = ref(false)
+const list = ref<CourseItem[]>([])
+const total = ref(0)
+const typeMap = ref<Record<number, string>>({})
+
+// stats (from full dataset)
+const allCourses = ref<CourseItem[]>([])
+const statsNonDeleted = ref({ total: 0, normal: 0, cancelled: 0, ended: 0, deleted: 0 })
+const stats = computed(() => statsNonDeleted.value)
+
+// filters
+const keyword = ref('')
+const typeFilter = ref<number | null>(null)
+const statusFilter = ref<number | null>(null)
+const dateRange = ref<[string, string] | null>(null)
+const timePeriod = ref<string | null>(null)
+
+// sorting
+type SortMode = 'default' | 'priceAsc' | 'priceDesc' | 'remainingMost'
+const sortMode = ref<SortMode>('default')
+
+const currentPage = ref(0)
+const pageSize = ref(10)
+
+const displayPage = computed({
+  get: () => currentPage.value + 1,
+  set: (val: number) => {
+    currentPage.value = val - 1
+    applyPage()
+  },
+})
+
+// dialogs
+const dialogVisible = ref(false)
+const isEdit = ref(false)
+const saving = ref(false)
+const adminPassword = ref('')
+const pendingCoverFile = ref<File | null>(null)
+const coverPreviewUrl = ref('')
+
+const form = reactive({
+  id: 0,
+  courseName: '',
+  coachId: null as number | null,
+  courseType: null as number | null,
+  startTime: '',
+  endTime: '',
+  maxMembers: 20,
+  currentMembers: 0,
+  status: 0,
+  location: '',
+  coverImage: '',
+  description: '',
+  storedValueAmount: 0,
+})
+
+const coverUrlMap = ref<Record<number, string>>({})
+
+// ---- Helpers ----
+const toNum = (v: any): number => Number(v)
+const statusLabel = (s: any) => {
+  const map: Record<number, string> = { 0: '正常', 1: '已取消', 2: '已结束' }
+  return map[toNum(s)] ?? '未知'
+}
+const statusTagType = (s: any) => {
+  const map: Record<number, string> = { 0: 'success', 1: 'danger', 2: 'info' }
+  return map[toNum(s)] ?? 'info'
+}
+const isDeleted = (row: CourseItem) => row.deletedAt != null
+
+// ---- Methods ----
+async function fetchTypes() {
+  try {
+    const res: any = await getAllGroupCourseTypes()
+    const map: Record<number, string> = {}
+    if (Array.isArray(res)) {
+      res.forEach((t: any) => {
+        if (t.id != null && t.typeName) map[t.id] = t.typeName
+      })
+    }
+    typeMap.value = map
+  } catch {
+    /* ignore */
+  }
+}
+
+async function fetchStats() {
+  try {
+    // 未删除的课程（用于统计）
+    const res: any = await getAllGroupCourses(false)
+    const courses: CourseItem[] = Array.isArray(res) ? res : []
+    statsNonDeleted.value = {
+      total: courses.length,
+      normal: courses.filter((m) => toNum(m.status) === 0).length,
+      cancelled: courses.filter((m) => toNum(m.status) === 1).length,
+      ended: courses.filter((m) => toNum(m.status) === 2).length,
+      deleted: 0,
+    }
+    // 同时获取已删除课程数
+    const allRes: any = await getAllGroupCourses(true)
+    const allCoursesData: CourseItem[] = Array.isArray(allRes) ? allRes : []
+    statsNonDeleted.value.deleted = allCoursesData.filter((m) => m.deletedAt != null).length
+  } catch {
+    statsNonDeleted.value = { total: 0, normal: 0, cancelled: 0, ended: 0, deleted: 0 }
+  }
+}
+
+async function fetchCoverUrls() {
+  const newMap: Record<number, string> = {}
+  for (const course of allCourses.value) {
+    if (course.coverImage) {
+      try {
+        const res = await getPresignedUrl(course.coverImage)
+        if (res.code === 200 && res.data?.presignedUrl) {
+          newMap[course.id] = res.data.presignedUrl
+        }
+      } catch {
+        // ignore individual failures
+      }
+    }
+  }
+  coverUrlMap.value = newMap
+}
+
+async function loadData() {
+  loading.value = true
+  await fetchStats()
+  // 根据筛选状态加载数据
+  if (statusFilter.value === 3) {
+    try {
+      const res: any = await getAllGroupCourses(true)
+      allCourses.value = (Array.isArray(res) ? res : []).filter((m: CourseItem) => m.deletedAt != null)
+    } catch {
+      allCourses.value = []
+    }
+  } else {
+    try {
+      const res: any = await getAllGroupCourses(false)
+      allCourses.value = Array.isArray(res) ? res : []
+    } catch {
+      allCourses.value = []
+    }
+  }
+  await fetchCoverUrls()
+  loading.value = false
+  applyPage()
+}
+
+function applyFilters(): CourseItem[] {
+  let data = [...allCourses.value]
+
+  // keyword filter (course name fuzzy)
+  if (keyword.value) {
+    const kw = keyword.value.toLowerCase()
+    data = data.filter((item) =>
+      (item.courseName || '').toLowerCase().includes(kw)
+    )
+  }
+
+  // type filter
+  if (typeFilter.value != null) {
+    data = data.filter((item) => item.courseType === typeFilter.value)
+  }
+
+  // status filter（值 3 为"已删除"，已在 loadData 数据源层处理，此处跳过）
+  if (statusFilter.value != null && statusFilter.value !== 3) {
+    data = data.filter((item) => toNum(item.status) === statusFilter.value)
+  }
+
+  // date range filter
+  if (dateRange.value) {
+    const [start, end] = dateRange.value
+    if (start) {
+      data = data.filter((item) => item.startTime && item.startTime >= `${start}T00:00:00`)
+    }
+    if (end) {
+      data = data.filter((item) => item.startTime && item.startTime <= `${end}T23:59:59`)
+    }
+  }
+
+  // time period filter
+  if (timePeriod.value) {
+    data = data.filter((item) => {
+      if (!item.startTime) return false
+      const hour = new Date(item.startTime).getHours()
+      switch (timePeriod.value) {
+        case 'morning':
+          return hour >= 6 && hour < 12
+        case 'afternoon':
+          return hour >= 12 && hour < 18
+        case 'evening':
+          return hour >= 18
+        default:
+          return true
+      }
+    })
+  }
+
+  // sorting
+  if (sortMode.value === 'priceAsc') {
+    data.sort((a, b) => (a.storedValueAmount ?? 0) - (b.storedValueAmount ?? 0))
+  } else if (sortMode.value === 'priceDesc') {
+    data.sort((a, b) => (b.storedValueAmount ?? 0) - (a.storedValueAmount ?? 0))
+  } else if (sortMode.value === 'remainingMost') {
+    data.sort((a, b) => {
+      const remainA = (a.maxMembers ?? 0) - (a.currentMembers ?? 0)
+      const remainB = (b.maxMembers ?? 0) - (b.currentMembers ?? 0)
+      return remainB - remainA
+    })
+  } else {
+    // default: id descending
+    data.sort((a, b) => (b.id ?? 0) - (a.id ?? 0))
+  }
+
+  return data
+}
+
+function applyPage() {
+  const filtered = applyFilters()
+  total.value = filtered.length
+  const start = currentPage.value * pageSize.value
+  list.value = filtered.slice(start, start + pageSize.value)
+}
+
+function handleSearch() {
+  currentPage.value = 0
+  loadData()
+}
+
+function resetFilters() {
+  const wasDeleted = statusFilter.value === 3
+  keyword.value = ''
+  typeFilter.value = null
+  statusFilter.value = null
+  dateRange.value = null
+  timePeriod.value = null
+  sortMode.value = 'default'
+  currentPage.value = 0
+  if (wasDeleted) {
+    loadData()
+  } else {
+    applyPage()
+  }
+}
+
+// watch sortMode to re-paginate
+watch(sortMode, () => {
+  currentPage.value = 0
+  applyPage()
+})
+
+// 切换“已删除”筛选时重新加载数据
+watch(statusFilter, (newVal, oldVal) => {
+  if (newVal === 3 || oldVal === 3) {
+    currentPage.value = 0
+    loadData()
+  } else {
+    currentPage.value = 0
+    applyPage()
+  }
+})
+
+// ---- Create / Edit ----
+function openCreate() {
+  isEdit.value = false
+  adminPassword.value = ''
+  pendingCoverFile.value = null
+  coverPreviewUrl.value = ''
+  Object.assign(form, {
+    id: 0,
+    courseName: '',
+    coachId: null,
+    courseType: null,
+    startTime: '',
+    endTime: '',
+    maxMembers: 20,
+    currentMembers: 0,
+    status: 0,
+    location: '',
+    coverImage: '',
+    description: '',
+    storedValueAmount: 0,
+  })
+  dialogVisible.value = true
+}
+
+function openEdit(row: CourseItem) {
+  isEdit.value = true
+  adminPassword.value = ''
+  pendingCoverFile.value = null
+  coverPreviewUrl.value = ''
+  form.id = row.id
+  form.courseName = row.courseName || ''
+  form.coachId = row.coachId ?? null
+  form.courseType = toNum(row.courseType)
+  form.maxMembers = row.maxMembers ?? 20
+  form.currentMembers = row.currentMembers ?? 0
+  form.status = toNum(row.status)
+  form.location = row.location || ''
+  form.coverImage = row.coverImage || ''
+  form.description = row.description || ''
+  form.storedValueAmount = row.storedValueAmount ?? 0
+  form.startTime = row.startTime ? formatDate(row.startTime, 'YYYY-MM-DD HH:mm:ss') : ''
+  form.endTime = row.endTime ? formatDate(row.endTime, 'YYYY-MM-DD HH:mm:ss') : ''
+  dialogVisible.value = true
+  // 如果有已有封面，获取预签名URL用于预览
+  if (form.coverImage) {
+    getPresignedUrl(form.coverImage).then((res) => {
+      if (res.code === 200 && res.data?.presignedUrl) {
+        coverPreviewUrl.value = res.data.presignedUrl
+      }
+    }).catch(() => {})
+  }
+}
+
+function onUploadChange(uploadFile: any) {
+  const rawFile = uploadFile?.raw || uploadFile
+  if (rawFile) {
+    pendingCoverFile.value = rawFile
+    if (coverPreviewUrl.value) URL.revokeObjectURL(coverPreviewUrl.value)
+    coverPreviewUrl.value = URL.createObjectURL(rawFile)
+  }
+}
+
+function handleImgError(e: Event) {
+  const img = e.target as HTMLImageElement
+  img.style.display = 'none'
+  const fallback = img.nextElementSibling as HTMLElement | null
+  if (fallback) fallback.style.display = ''
+}
+
+function handleDialogClosed() {
+  Object.assign(form, { startTime: '', endTime: '' })
+  adminPassword.value = ''
+  if (coverPreviewUrl.value) {
+    URL.revokeObjectURL(coverPreviewUrl.value)
+    coverPreviewUrl.value = ''
+  }
+  pendingCoverFile.value = null
+}
+
+async function handleSave() {
+  saving.value = true
+  try {
+    const body: any = { ...form }
+    delete body.id
+    if (body.startTime) body.startTime = new Date(body.startTime).toISOString()
+    if (body.endTime) body.endTime = new Date(body.endTime).toISOString()
+
+    if (isEdit.value) {
+      if (!adminPassword.value) {
+        ElMessage.warning('请输入管理员密码')
+        saving.value = false
+        return
+      }
+      // upload cover if user selected a new one
+      if (pendingCoverFile.value) {
+        const res: any = await uploadImage(pendingCoverFile.value)
+        if (res.code === 200) {
+          body.coverImage = res.data.ossKey
+        } else {
+          ElMessage.error(res.message || '封面上传失败')
+          saving.value = false
+          return
+        }
+      }
+      await updateGroupCourse(form.id, body, { params: { adminPassword: adminPassword.value } })
+    } else {
+      if (pendingCoverFile.value) {
+        const res: any = await uploadImage(pendingCoverFile.value)
+        if (res.code === 200) {
+          body.coverImage = res.data.ossKey
+        } else {
+          ElMessage.error(res.message || '封面上传失败')
+          saving.value = false
+          return
+        }
+      }
+      await createGroupCourse(body)
+    }
+    ElMessage.success(isEdit.value ? '更新成功' : '创建成功')
+    dialogVisible.value = false
+    loadData()
+  } catch {
+    ElMessage.error('操作失败')
+  } finally {
+    saving.value = false
+  }
+}
+
+async function handleDelete(row: CourseItem) {
+  try {
+    await ElMessageBox.confirm(`确定要删除团课"${row.courseName}"吗？`, '确认删除', { type: 'warning' })
+    const { value: pwd } = await ElMessageBox.prompt('请输入管理员密码以确认删除', '管理员验证', {
+      inputType: 'password',
+      confirmButtonText: '确认删除',
+      cancelButtonText: '取消',
+    })
+    if (!pwd) return
+    await deleteGroupCourse(row.id, { params: { adminPassword: pwd } })
+    ElMessage.success('已删除')
+    loadData()
+  } catch (e: any) {
+    if (e !== 'cancel' && e?.message !== 'cancel') {
+      // error already shown by axios interceptor
+    }
+  }
+}
+
+async function handleRestore(row: CourseItem) {
+  try {
+    await ElMessageBox.confirm(`确定要恢复团课"${row.courseName}"为已取消状态吗？`, '确认恢复', { type: 'info' })
+    const { value: pwd } = await ElMessageBox.prompt('请输入管理员密码以确认恢复', '管理员验证', {
+      inputType: 'password',
+      confirmButtonText: '确认恢复',
+      cancelButtonText: '取消',
+    })
+    if (!pwd) return
+    await restoreGroupCourse(row.id, { params: { adminPassword: pwd } })
+    ElMessage.success('已恢复')
+    loadData()
+  } catch (e: any) {
+    if (e !== 'cancel' && e?.message !== 'cancel') {
+      // error already shown by axios interceptor
+    }
+  }
+}
+
+onMounted(() => {
+  fetchTypes()
+  loadData()
+})
+</script>
+
+<template>
+  <div>
+    <h2 style="margin-bottom: 16px">团课列表</h2>
+
+    <!-- Stats -->
+    <el-row :gutter="16" style="margin-bottom: 16px">
+      <el-col :span="4" v-for="s in [
+        { label: '团课总数', value: stats.total, color: '#1890ff' },
+        { label: '正常进行', value: stats.normal, color: '#52c41a' },
+        { label: '已取消', value: stats.cancelled, color: '#ff4d4f' },
+        { label: '已结束', value: stats.ended, color: '#909399' },
+        { label: '已删除', value: stats.deleted, color: '#fa8c16' },
+      ]" :key="s.label">
+        <el-card shadow="hover">
+          <div style="text-align: center">
+            <div style="font-size: 26px; font-weight: bold" :style="{ color: s.color }">
+              {{ s.value }}
+            </div>
+            <div style="color: var(--text-secondary); margin-top: 4px; font-size: 13px">{{ s.label }}</div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- Search -->
+    <el-card class="search-card">
+      <el-form inline>
+        <el-form-item label="课程名称">
+          <el-input
+            v-model="keyword"
+            placeholder="请输入课程名称"
+            clearable
+            style="width: 180px"
+            @keyup.enter="handleSearch"
+          />
+        </el-form-item>
+        <el-form-item label="课程类型">
+          <el-select v-model="typeFilter" placeholder="全部" clearable style="width: 130px">
+            <el-option
+              v-for="(name, id) in typeMap"
+              :key="id"
+              :label="name"
+              :value="Number(id)"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="statusFilter" placeholder="全部" clearable style="width: 100px">
+            <el-option label="正常" :value="0" />
+            <el-option label="已取消" :value="1" />
+            <el-option label="已结束" :value="2" />
+            <el-option label="已删除" :value="3" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="日期范围">
+          <el-date-picker
+            v-model="dateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="YYYY-MM-DD"
+            style="width: 230px"
+          />
+        </el-form-item>
+        <el-form-item label="时间段">
+          <el-select v-model="timePeriod" placeholder="全部" clearable style="width: 100px">
+            <el-option label="早晨" value="morning" />
+            <el-option label="下午" value="afternoon" />
+            <el-option label="夜晚" value="evening" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch">搜索</el-button>
+          <el-button @click="resetFilters">重置</el-button>
+        </el-form-item>
+      </el-form>
+
+      <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 8px">
+        <el-button type="primary" @click="openCreate" v-permission="'business:groupCourse:create'">+ 新增团课</el-button>
+
+        <div style="display: flex; align-items: center; gap: 10px">
+          <span style="color: var(--text-secondary); font-size: 13px">排序:</span>
+          <el-select v-model="sortMode" style="width: 180px" size="default">
+            <el-option label="默认排序(ID倒序)" value="default" />
+            <el-option label="价格从低到高" value="priceAsc" />
+            <el-option label="价格从高到低" value="priceDesc" />
+            <el-option label="剩余名额最多" value="remainingMost" />
+          </el-select>
+        </div>
+      </div>
+    </el-card>
+
+    <!-- Table -->
+    <el-card>
+      <el-table :data="list" v-loading="loading" stripe highlight-current-row>
+        <el-table-column prop="id" label="团课ID" width="110" align="center" />
+
+        <el-table-column prop="courseName" label="课程名称" min-width="150" show-overflow-tooltip />
+
+        <el-table-column label="课程类型" width="110">
+          <template #default="{ row }">
+            {{ typeMap[row.courseType] || row.courseType || '-' }}
+          </template>
+        </el-table-column>
+
+        <el-table-column label="封面" width="72" align="center">
+          <template #default="{ row }">
+            <template v-if="row.coverImage && coverUrlMap[row.id]">
+              <img
+                :src="coverUrlMap[row.id]"
+                style="width: 56px; height: 40px; object-fit: cover; border-radius: 4px; border: 1px solid #dcdfe6"
+                @error="handleImgError"
+              />
+              <span style="display: none; color: #c0c4cc; font-size: 18px">✕</span>
+            </template>
+            <span v-else style="color: #c0c4cc; font-size: 18px">✕</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="上课时间" width="170">
+          <template #default="{ row }">
+            {{ row.startTime ? formatDate(row.startTime, 'MM-DD HH:mm') : '-' }}
+          </template>
+        </el-table-column>
+
+        <el-table-column label="下课时间" width="170">
+          <template #default="{ row }">
+            {{ row.endTime ? formatDate(row.endTime, 'MM-DD HH:mm') : '-' }}
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="location" label="上课地点" min-width="120" show-overflow-tooltip />
+
+        <el-table-column label="报名/上限" width="100" align="center">
+          <template #default="{ row }">
+            <span :style="{ color: row.currentMembers >= row.maxMembers ? '#ff4d4f' : '' }">
+              {{ row.currentMembers ?? 0 }}/{{ row.maxMembers ?? 0 }}
+            </span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="储值消耗" width="100" align="right">
+          <template #default="{ row }">
+            {{ row.storedValueAmount != null ? '¥' + Number(row.storedValueAmount).toFixed(2) : '-' }}
+          </template>
+        </el-table-column>
+
+        <el-table-column label="状态" width="80" align="center">
+          <template #default="{ row }">
+            <el-tag v-if="isDeleted(row)" type="warning" size="small">已删除</el-tag>
+            <el-tag v-else :type="statusTagType(row.status)" size="small">
+              {{ statusLabel(row.status) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="创建时间" width="170">
+          <template #default="{ row }">
+            {{ row.createdAt ? formatDate(row.createdAt, 'YYYY-MM-DD HH:mm') : '-' }}
+          </template>
+        </el-table-column>
+
+        <el-table-column label="操作" width="140" fixed="right">
+          <template #default="{ row }">
+            <el-button type="primary" link @click="openEdit(row)" v-permission="'business:groupCourse:edit'">编辑</el-button>
+            <el-button
+              v-if="isDeleted(row)"
+              type="success"
+              link
+              @click="handleRestore(row)"
+              v-permission="'business:groupCourse:edit'"
+            >恢复</el-button>
+            <el-button v-else type="danger" link @click="handleDelete(row)" v-permission="'business:groupCourse:delete'">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div style="margin-top: 16px; display: flex; justify-content: space-between; align-items: center">
+        <span style="color: var(--text-secondary); font-size: 13px">
+          共 {{ total }} 条记录
+        </span>
+        <el-pagination
+          v-model:current-page="displayPage"
+          :page-size="pageSize"
+          :total="total"
+          layout="prev, pager, next, sizes"
+          :page-sizes="[10, 20, 50, 100]"
+          @size-change="(s: number) => { pageSize = s; currentPage = 0; applyPage() }"
+        />
+      </div>
+    </el-card>
+
+    <!-- Create / Edit Dialog -->
+    <el-dialog
+      v-model="dialogVisible"
+      :title="isEdit ? '编辑团课' : '新增团课'"
+      width="580px"
+      :close-on-click-modal="false"
+      @closed="handleDialogClosed"
+    >
+      <el-form :model="form" label-width="100px">
+        <el-form-item label="课程名称" required>
+          <el-input v-model="form.courseName" placeholder="请输入课程名称" maxlength="50" />
+        </el-form-item>
+        <el-form-item label="课程类型" required>
+          <el-select v-model="form.courseType" placeholder="请选择课程类型" style="width: 100%">
+            <el-option
+              v-for="(name, id) in typeMap"
+              :key="id"
+              :label="name"
+              :value="Number(id)"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="上课时间">
+          <el-date-picker
+            v-model="form.startTime"
+            type="datetime"
+            placeholder="选择上课时间"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            style="width: 100%"
+          />
+        </el-form-item>
+        <el-form-item label="下课时间">
+          <el-date-picker
+            v-model="form.endTime"
+            type="datetime"
+            placeholder="选择下课时间"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            style="width: 100%"
+          />
+        </el-form-item>
+        <el-form-item label="上课地点">
+          <el-input v-model="form.location" placeholder="请输入上课地点" maxlength="100" />
+        </el-form-item>
+        <el-row :gutter="16">
+          <el-col :span="12">
+            <el-form-item label="最大人数">
+              <el-input-number v-model="form.maxMembers" :min="1" style="width: 100%" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="已报名人数">
+              <el-input-number v-model="form.currentMembers" :min="0" :max="form.maxMembers" style="width: 100%" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="状态">
+          <el-select v-model="form.status" style="width: 100%">
+            <el-option label="正常" :value="0" />
+            <el-option label="已取消" :value="1" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="课程描述">
+          <el-input
+            v-model="form.description"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入课程描述"
+            maxlength="500"
+            show-word-limit
+          />
+        </el-form-item>
+        <el-form-item label="封面图片">
+          <el-upload
+            :auto-upload="false"
+            :show-file-list="false"
+            accept="image/*"
+            :on-change="onUploadChange"
+          >
+            <template #trigger>
+              <el-button type="primary">选择封面图片</el-button>
+            </template>
+          </el-upload>
+          <div v-if="coverPreviewUrl" style="margin-top: 8px">
+            <a :href="coverPreviewUrl" target="_blank" :title="coverPreviewUrl">
+              <img
+                :src="coverPreviewUrl"
+                style="width: 180px; height: 100px; object-fit: cover; border-radius: 6px; border: 1px solid #dcdfe6"
+                @error="handleImgError"
+              />
+            </a>
+          </div>
+        </el-form-item>
+        <el-form-item label="储值卡额度">
+          <el-input-number v-model="form.storedValueAmount" :min="0" :precision="2" style="width: 200px" />
+        </el-form-item>
+        <el-form-item v-if="isEdit" label="管理员密码" required>
+          <el-input
+            v-model="adminPassword"
+            type="password"
+            placeholder="修改团课信息需要验证管理员密码"
+            show-password
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="saving" @click="handleSave">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>

gym-manage-cuit/src/views/groupCourseRecommend/index.vue

@@ -0,0 +1,376 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import {
+  getAllRecommendations,
+  createRecommendation,
+  updateRecommendation,
+  deleteRecommendation,
+  enableRecommendation,
+  disableRecommendation,
+} from '@/api/modules/groupCourseRecommend'
+import { searchGroupCourses } from '@/api/modules/groupCourse'
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+// ---- Types ----
+interface RecommendItem {
+  id: number
+  courseId: number
+  recommendTitle: string
+  recommendContent: string
+  recommendReason: string
+  priority: number
+  isActive: boolean
+  groupCourse?: {
+    id: number
+    courseName: string
+    startTime: string
+    endTime: string
+    location: string
+    maxMembers: number
+    currentMembers: number
+    status: number
+  }
+  createdAt: string
+  updatedAt: string
+}
+
+// ---- State ----
+const loading = ref(false)
+const list = ref<RecommendItem[]>([])
+const sortMode = ref<'priorityDesc' | 'priorityAsc' | 'idAsc' | 'idDesc'>('idAsc')
+
+const sortOptions: { label: string; value: string; sortBy: string; sortOrder: string }[] = [
+  { label: '优先级 高→低', value: 'priorityDesc', sortBy: 'priority', sortOrder: 'desc' },
+  { label: '优先级 低→高', value: 'priorityAsc', sortBy: 'priority', sortOrder: 'asc' },
+  { label: 'ID 升序', value: 'idAsc', sortBy: 'id', sortOrder: 'asc' },
+  { label: 'ID 降序', value: 'idDesc', sortBy: 'id', sortOrder: 'desc' },
+]
+
+const dialogVisible = ref(false)
+const isEdit = ref(false)
+const editId = ref<number | null>(null)
+const saving = ref(false)
+
+// course search state
+interface CourseOption {
+  id: number
+  courseName: string
+}
+const courseOptions = ref<CourseOption[]>([])
+const courseSearchLoading = ref(false)
+
+async function searchCourses(keyword: string) {
+  courseSearchLoading.value = true
+  try {
+    const res: any = await searchGroupCourses({ courseName: keyword, page: 0, size: 50 })
+    const content = Array.isArray(res?.data?.content) ? res.data.content
+      : Array.isArray(res?.content) ? res.content
+      : Array.isArray(res) ? res
+      : []
+    courseOptions.value = content.map((c: any) => ({ id: c.id, courseName: c.courseName }))
+  } catch {
+    courseOptions.value = []
+  } finally {
+    courseSearchLoading.value = false
+  }
+}
+
+function onCourseFocus() {
+  if (courseOptions.value.length === 0) {
+    searchCourses('')
+  }
+}
+
+const form = reactive({
+  courseId: null as number | null,
+  recommendTitle: '',
+  recommendContent: '',
+  recommendReason: '',
+  priority: 0,
+  isActive: true,
+  adminPassword: '',
+})
+
+async function fetchData() {
+  loading.value = true
+  try {
+    const option = sortOptions.find((o) => o.value === sortMode.value)!
+    const res = await getAllRecommendations({ sortBy: option.sortBy, sortOrder: option.sortOrder })
+    list.value = Array.isArray(res) ? res : []
+  } catch {
+    list.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+function onSortChange() {
+  fetchData()
+}
+
+async function handleDelete(row: RecommendItem) {
+  try {
+    await ElMessageBox.confirm('确定删除该推荐？', '提示', { type: 'warning' })
+  } catch {
+    return
+  }
+  try {
+    const { value: pwd } = await ElMessageBox.prompt('请输入管理员密码以确认删除', '验证密码', {
+      inputType: 'password',
+      confirmButtonText: '确认删除',
+      cancelButtonText: '取消',
+    })
+    if (!pwd) {
+      ElMessage.warning('请输入验证密码')
+      return
+    }
+    await deleteRecommendation(row.id, { params: { adminPassword: pwd } })
+    ElMessage.success('删除成功')
+    fetchData()
+  } catch {
+    ElMessage.warning('操作已取消')
+  }
+}
+
+function openCreate() {
+  isEdit.value = false
+  editId.value = null
+  courseOptions.value = []
+  Object.assign(form, { courseId: null, recommendTitle: '', recommendContent: '', recommendReason: '', priority: 0, isActive: true, adminPassword: '' })
+  dialogVisible.value = true
+}
+
+function openEdit(row: RecommendItem) {
+  isEdit.value = true
+  editId.value = row.id
+  // pre-load current course for display
+  if (row.groupCourse) {
+    courseOptions.value = [{ id: row.courseId, courseName: row.groupCourse.courseName }]
+  } else {
+    courseOptions.value = []
+  }
+  Object.assign(form, {
+    courseId: row.courseId,
+    recommendTitle: row.recommendTitle || '',
+    recommendContent: row.recommendContent || '',
+    recommendReason: row.recommendReason || '',
+    priority: row.priority,
+    isActive: row.isActive,
+    adminPassword: '',
+  })
+  dialogVisible.value = true
+}
+
+async function handleSave() {
+  saving.value = true
+  try {
+    if (form.courseId == null) {
+      ElMessage.warning('请选择团课')
+      saving.value = false
+      return
+    }
+    const { adminPassword, ...payload } = form
+    if (isEdit.value) {
+      if (!adminPassword) {
+        ElMessage.warning('请输入验证密码')
+        saving.value = false
+        return
+      }
+      await updateRecommendation(editId.value!, payload, { params: { adminPassword } })
+      ElMessage.success('更新成功')
+    } else {
+      await createRecommendation(payload)
+      ElMessage.success('创建成功')
+    }
+    dialogVisible.value = false
+    fetchData()
+  } catch {
+    // handled by interceptor
+  } finally {
+    saving.value = false
+  }
+}
+
+async function toggleStatus(row: RecommendItem) {
+  try {
+    if (row.isActive) {
+      const { value: pwd } = await ElMessageBox.prompt('请输入管理员密码以确认禁用', '验证密码', {
+        inputType: 'password',
+        confirmButtonText: '确认禁用',
+        cancelButtonText: '取消',
+      })
+      if (!pwd) {
+        ElMessage.warning('请输入验证密码')
+        return
+      }
+      await disableRecommendation(row.id, { params: { adminPassword: pwd } })
+      ElMessage.success('已禁用')
+    } else {
+      await enableRecommendation(row.id)
+      ElMessage.success('已启用')
+    }
+    fetchData()
+  } catch {
+    ElMessage.warning('操作已取消')
+  }
+}
+
+onMounted(() => fetchData())
+</script>
+
+<template>
+  <div class="recommend-page">
+    <h2 style="margin-bottom:16px">推荐团课管理</h2>
+
+    <!-- Filter & Action bar -->
+    <el-card class="filter-card" shadow="never">
+      <div class="filter-row">
+        <div class="filter-left">
+          <el-select v-model="sortMode" placeholder="排序方式" style="width:180px" @change="onSortChange">
+            <el-option
+              v-for="opt in sortOptions"
+              :key="opt.value"
+              :label="opt.label"
+              :value="opt.value"
+            />
+          </el-select>
+        </div>
+        <div class="filter-right">
+          <el-button type="primary" @click="openCreate" v-permission="'business:groupCourseRecommend:create'">新增推荐</el-button>
+        </div>
+      </div>
+    </el-card>
+
+    <!-- Table -->
+    <el-card shadow="never">
+      <el-table :data="list" v-loading="loading" stripe>
+        <el-table-column prop="id" label="ID" width="70" align="center" />
+        <el-table-column label="团课" width="180">
+          <template #default="{ row }">
+            <div>
+              <div style="font-weight:500;font-size:13px">
+                {{ row.groupCourse?.courseName || `课程 #${row.courseId}` }}
+              </div>
+              <div style="color:#909399;font-size:12px">ID: {{ row.courseId }}</div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="recommendTitle" label="推荐标题" width="160" show-overflow-tooltip />
+        <el-table-column prop="recommendContent" label="推荐内容" min-width="200" show-overflow-tooltip />
+        <el-table-column prop="recommendReason" label="推荐理由" width="160" show-overflow-tooltip />
+        <el-table-column label="优先级" width="90" align="center">
+          <template #default="{ row }">
+            <el-tag
+              :type="row.priority >= 80 ? 'danger' : row.priority >= 50 ? 'warning' : row.priority >= 20 ? '' : 'info'"
+              size="small"
+            >{{ row.priority }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="90" align="center">
+          <template #default="{ row }">
+            <el-tag :type="row.isActive ? 'success' : 'info'" size="small">
+              {{ row.isActive ? '启用' : '禁用' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="240" fixed="right">
+          <template #default="{ row }">
+            <el-button type="primary" link @click="openEdit(row)" v-permission="'business:groupCourseRecommend:edit'">编辑</el-button>
+            <el-button
+              :type="row.isActive ? 'warning' : 'success'"
+              link
+              @click="toggleStatus(row)"
+              v-permission="'business:groupCourseRecommend:edit'"
+            >
+              {{ row.isActive ? '禁用' : '启用' }}
+            </el-button>
+            <el-button type="danger" link @click="handleDelete(row)" v-permission="'business:groupCourseRecommend:delete'">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div v-if="list.length === 0 && !loading" style="color:#909399;font-size:13px;text-align:center;padding:40px">
+        暂无推荐数据
+      </div>
+    </el-card>
+
+    <!-- Create / Edit dialog -->
+    <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑推荐' : '新增推荐'" width="540px" :close-on-click-modal="false" @closed="form.adminPassword = ''">
+      <el-form :model="form" label-width="100px">
+        <el-form-item label="选择团课" required>
+          <el-select
+            v-model="form.courseId"
+            placeholder="输入关键字搜索团课"
+            filterable
+            remote
+            :remote-method="searchCourses"
+            :loading="courseSearchLoading"
+            @focus="onCourseFocus"
+            style="width:100%"
+            value-key="id"
+          >
+            <el-option
+              v-for="item in courseOptions"
+              :key="item.id"
+              :label="`${item.courseName} (ID: ${item.id})`"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="推荐标题">
+          <el-input v-model="form.recommendTitle" placeholder="如：本周热门" maxlength="100" show-word-limit />
+        </el-form-item>
+        <el-form-item label="推荐内容">
+          <el-input v-model="form.recommendContent" type="textarea" :rows="2" placeholder="推荐描述文案" maxlength="500" show-word-limit />
+        </el-form-item>
+        <el-form-item label="推荐理由">
+          <el-input v-model="form.recommendReason" placeholder="如：教练专业、课程丰富" maxlength="200" show-word-limit />
+        </el-form-item>
+        <el-form-item label="优先级">
+          <el-input-number v-model="form.priority" :min="0" :max="9999" />
+          <span style="margin-left:8px;color:#909399;font-size:12px">（数值越大越靠前）</span>
+        </el-form-item>
+        <el-form-item label="启用">
+          <el-switch v-model="form.isActive" />
+        </el-form-item>
+        <el-form-item v-if="isEdit" label="验证密码" required>
+          <el-input v-model="form.adminPassword" type="password" placeholder="请输入验证密码" show-password />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="saving" @click="handleSave">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+.recommend-page {
+  padding: 0;
+}
+
+.filter-card {
+  margin-bottom: 16px;
+}
+
+.filter-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.filter-left {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.filter-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+</style>

gym-manage-cuit/src/views/groupCourseType/index.vue

@@ -0,0 +1,727 @@
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted } from 'vue'
+import {
+  getAllGroupCourseTypes,
+  createGroupCourseType,
+  updateGroupCourseType,
+  deleteGroupCourseType,
+  getCategories,
+  getLabelsByTypeId,
+  addLabelsToType,
+  removeLabelFromType,
+  clearTypeLabels,
+  getAllLabels,
+  createLabel,
+  updateLabel,
+  deleteLabel,
+} from '@/api/modules/groupCourseType'
+import { searchGroupCourses } from '@/api/modules/groupCourse'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { formatDate } from '@/utils/format'
+
+// ---- Types ----
+interface TypeItem {
+  id: number
+  typeName: string
+  baseDifficulty: number
+  calculatedDifficulty: number
+  difficultyLevel: string
+  description: string
+  category: string
+  labels?: LabelItem[]
+  createdAt: string
+  updatedAt: string
+}
+
+interface LabelItem {
+  id: number
+  labelName: string
+  color: string
+}
+
+interface CourseItem {
+  id: number
+  courseName: string
+  startTime: string
+  endTime: string
+  maxMembers: number
+  currentMembers: number
+  status: number
+  location: string
+}
+
+// ---- State ----
+const loading = ref(false)
+const list = ref<TypeItem[]>([])
+const categories = ref<string[]>([])
+const categoryFilter = ref('')
+const keyword = ref('')
+const sortMode = ref<'default' | 'nameAsc' | 'nameDesc' | 'difficultyAsc' | 'difficultyDesc'>('default')
+
+// per-type label cache for reactive table update
+const labelCache = ref<Record<number, LabelItem[]>>({})
+
+function getTypeLabels(row: TypeItem): LabelItem[] {
+  return labelCache.value[row.id] ?? row.labels ?? []
+}
+
+// filtered + sorted list
+const filteredList = computed(() => {
+  let result = list.value
+  if (categoryFilter.value) {
+    result = result.filter((item) => item.category === categoryFilter.value)
+  }
+  if (keyword.value) {
+    const kw = keyword.value.toLowerCase()
+    result = result.filter(
+      (item) =>
+        item.typeName.toLowerCase().includes(kw) ||
+        item.description?.toLowerCase().includes(kw),
+    )
+  }
+  // sort (default: by id asc for stable order)
+  const mode = sortMode.value
+  if (mode === 'nameAsc') {
+    result = [...result].sort((a, b) => a.typeName.localeCompare(b.typeName, 'zh'))
+  } else if (mode === 'nameDesc') {
+    result = [...result].sort((a, b) => b.typeName.localeCompare(a.typeName, 'zh'))
+  } else if (mode === 'difficultyAsc') {
+    result = [...result].sort((a, b) => a.baseDifficulty - b.baseDifficulty)
+  } else if (mode === 'difficultyDesc') {
+    result = [...result].sort((a, b) => b.baseDifficulty - a.baseDifficulty)
+  } else {
+    // default: stable sort by id
+    result = [...result].sort((a, b) => a.id - b.id)
+  }
+  return result
+})
+
+// ---- Type CRUD dialog ----
+const dialogVisible = ref(false)
+const isEdit = ref(false)
+const editId = ref<number | null>(null)
+const saving = ref(false)
+const form = reactive({
+  typeName: '',
+  category: '',
+  baseDifficulty: 1,
+  description: '',
+  adminPassword: '',
+})
+
+async function fetchData() {
+  loading.value = true
+  try {
+    const res = await getAllGroupCourseTypes()
+    const arr = Array.isArray(res) ? (res as TypeItem[]) : []
+    list.value = arr
+    // fetch labels for each type in parallel
+    if (arr.length > 0) {
+      const labelResults = await Promise.allSettled(
+        arr.map((item) => getLabelsByTypeId(item.id)),
+      )
+      const cache: Record<number, LabelItem[]> = {}
+      labelResults.forEach((result, i) => {
+        if (result.status === 'fulfilled' && Array.isArray(result.value)) {
+          cache[arr[i].id] = result.value as LabelItem[]
+        }
+      })
+      labelCache.value = cache
+    }
+  } catch {
+    list.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+async function fetchCategories() {
+  try {
+    const res = await getCategories()
+    categories.value = Array.isArray(res) ? res : []
+  } catch {
+    categories.value = []
+  }
+}
+
+async function handleDelete(id: number) {
+  try {
+    await ElMessageBox.confirm('确定删除该类型？', '提示', { type: 'warning' })
+  } catch {
+    return
+  }
+  try {
+    const { value: pwd } = await ElMessageBox.prompt('请输入管理员密码以确认删除', '管理员验证', {
+      inputType: 'password',
+      confirmButtonText: '确认删除',
+      cancelButtonText: '取消',
+    })
+    if (!pwd) return
+    await deleteGroupCourseType(id, { params: { adminPassword: pwd } })
+    ElMessage.success('删除成功')
+    fetchData()
+  } catch (e: any) {
+    if (e !== 'cancel' && e?.message !== 'cancel') {
+      // error handled by interceptor
+    }
+  }
+}
+
+function openCreate() {
+  isEdit.value = false
+  editId.value = null
+  Object.assign(form, { typeName: '', category: '', baseDifficulty: 1, description: '', adminPassword: '' })
+  dialogVisible.value = true
+}
+
+function openEdit(row: TypeItem) {
+  isEdit.value = true
+  editId.value = row.id
+  Object.assign(form, {
+    typeName: row.typeName,
+    category: row.category,
+    baseDifficulty: row.baseDifficulty,
+    description: row.description || '',
+    adminPassword: '',
+  })
+  dialogVisible.value = true
+}
+
+async function handleSave() {
+  saving.value = true
+  try {
+    const { adminPassword, ...payload } = form
+    if (isEdit.value) {
+      if (!adminPassword) {
+        ElMessage.warning('请输入验证密码')
+        saving.value = false
+        return
+      }
+      await updateGroupCourseType(editId.value!, payload, { params: { adminPassword } })
+      ElMessage.success('更新成功')
+    } else {
+      await createGroupCourseType(payload)
+      ElMessage.success('创建成功')
+    }
+    dialogVisible.value = false
+    fetchData()
+  } catch {
+    // error handled by interceptor
+  } finally {
+    saving.value = false
+  }
+}
+
+// ---- Label management per type ----
+const labelDialogVisible = ref(false)
+const labelTypeId = ref<number | null>(null)
+const labelTypeName = ref('')
+const typeLabels = ref<LabelItem[]>([])
+const allLabels = ref<LabelItem[]>([])
+const labelLoading = ref(false)
+
+const unassignedLabels = computed(() => {
+  const assignedIds = new Set(typeLabels.value.map((l) => l.id))
+  return allLabels.value.filter((l) => !assignedIds.has(l.id))
+})
+
+async function openLabelDialog(row: TypeItem) {
+  labelTypeId.value = row.id
+  labelTypeName.value = row.typeName
+  labelDialogVisible.value = true
+  labelLoading.value = true
+  try {
+    const [tLabels, aLabels] = await Promise.all([getLabelsByTypeId(row.id), getAllLabels()])
+    typeLabels.value = Array.isArray(tLabels) ? tLabels : []
+    allLabels.value = Array.isArray(aLabels) ? aLabels : []
+  } catch {
+    typeLabels.value = []
+    allLabels.value = []
+  } finally {
+    labelLoading.value = false
+  }
+}
+
+async function handleAddLabel(labelId: number) {
+  if (labelTypeId.value == null) return
+  try {
+    await addLabelsToType(labelTypeId.value, [labelId])
+    const tLabels = await getLabelsByTypeId(labelTypeId.value)
+    const arr = Array.isArray(tLabels) ? (tLabels as LabelItem[]) : []
+    typeLabels.value = arr
+    labelCache.value = { ...labelCache.value, [labelTypeId.value]: arr }
+    ElMessage.success('标签已添加')
+  } catch {
+    // handled
+  }
+}
+
+async function handleRemoveLabel(labelId: number) {
+  if (labelTypeId.value == null) return
+  try {
+    await removeLabelFromType(labelTypeId.value, labelId)
+    const updated = typeLabels.value.filter((l) => l.id !== labelId)
+    typeLabels.value = updated
+    labelCache.value = { ...labelCache.value, [labelTypeId.value]: updated }
+    ElMessage.success('标签已移除')
+  } catch {
+    // handled
+  }
+}
+
+async function handleClearLabels() {
+  if (labelTypeId.value == null) return
+  try {
+    await ElMessageBox.confirm('确定清空该类型的所有标签？', '提示', { type: 'warning' })
+  } catch {
+    return
+  }
+  try {
+    await clearTypeLabels(labelTypeId.value)
+    typeLabels.value = []
+    labelCache.value = { ...labelCache.value, [labelTypeId.value]: [] }
+    ElMessage.success('标签已清空')
+  } catch {
+    // handled
+  }
+}
+
+// ---- Global label CRUD ----
+const globalLabelDialogVisible = ref(false)
+const globalLabelForm = reactive({ id: null as number | null, labelName: '', color: '#1890ff' })
+const globalLabelIsEdit = ref(false)
+const globalLabelSaving = ref(false)
+
+const presetColors = [
+  '#1890ff', '#52c41a', '#faad14', '#f5222d', '#722ed1',
+  '#13c2c2', '#eb2f96', '#fa541c', '#2f54eb', '#a0d911',
+]
+
+async function fetchAllLabels() {
+  try {
+    const res = await getAllLabels()
+    allLabels.value = Array.isArray(res) ? res : []
+  } catch {
+    allLabels.value = []
+  }
+}
+
+function openGlobalLabelDialog() {
+  fetchAllLabels()
+  globalLabelDialogVisible.value = true
+}
+
+function openCreateLabel() {
+  globalLabelIsEdit.value = false
+  Object.assign(globalLabelForm, { id: null, labelName: '', color: '#1890ff' })
+}
+
+function openEditLabel(row: LabelItem) {
+  globalLabelIsEdit.value = true
+  Object.assign(globalLabelForm, { id: row.id, labelName: row.labelName, color: row.color })
+}
+
+async function handleSaveLabel() {
+  globalLabelSaving.value = true
+  try {
+    if (globalLabelIsEdit.value && globalLabelForm.id) {
+      await updateLabel(globalLabelForm.id, { labelName: globalLabelForm.labelName, color: globalLabelForm.color })
+      ElMessage.success('标签更新成功')
+    } else {
+      await createLabel({ labelName: globalLabelForm.labelName, color: globalLabelForm.color })
+      ElMessage.success('标签创建成功')
+    }
+    await fetchAllLabels()
+    openCreateLabel()
+  } catch {
+    // handled
+  } finally {
+    globalLabelSaving.value = false
+  }
+}
+
+async function handleDeleteLabel(row: LabelItem) {
+  try {
+    await ElMessageBox.confirm(`确定删除标签 "${row.labelName}"？`, '提示', { type: 'warning' })
+  } catch {
+    return
+  }
+  try {
+    await deleteLabel(row.id)
+    ElMessage.success('标签已删除')
+    await fetchAllLabels()
+  } catch {
+    // handled
+  }
+}
+
+// ---- Difficulty tag type ----
+function difficultyTagType(level: string) {
+  const map: Record<string, string> = { '初级': 'success', '中级': 'warning', '中高级': 'warning', '高级': 'danger', '专家级': 'danger' }
+  return map[level] || 'info'
+}
+
+// ---- Type detail dialog ----
+const detailDialogVisible = ref(false)
+const detailType = ref<TypeItem | null>(null)
+const detailCourses = ref<CourseItem[]>([])
+const detailLoading = ref(false)
+
+const statusLabel = (s: number) => {
+  const map: Record<number, string> = { 0: '正常', 1: '已取消', 2: '已结束' }
+  return map[s] ?? '未知'
+}
+const statusTagType = (s: number): any => {
+  const map: Record<number, string> = { 0: 'success', 1: 'warning', 2: 'info' }
+  return map[s] ?? 'info'
+}
+
+async function openDetailDialog(row: TypeItem) {
+  detailType.value = row
+  detailDialogVisible.value = true
+  detailLoading.value = true
+  try {
+    const res: any = await searchGroupCourses({ courseType: row.id, page: 0, size: 100 })
+    if (res?.data) {
+      detailCourses.value = Array.isArray(res.data.content) ? res.data.content : []
+    } else if (Array.isArray(res)) {
+      detailCourses.value = res
+    } else if (res?.content) {
+      detailCourses.value = res.content
+    } else {
+      detailCourses.value = []
+    }
+  } catch {
+    detailCourses.value = []
+  } finally {
+    detailLoading.value = false
+  }
+}
+
+// ---- Lifecycle ----
+onMounted(() => {
+  fetchData()
+  fetchCategories()
+})
+</script>
+
+<template>
+  <div class="groupcourse-type-page">
+    <h2 style="margin-bottom:16px">类型管理</h2>
+
+    <!-- Filter & Action bar -->
+    <el-card class="filter-card" shadow="never">
+      <div class="filter-row">
+        <div class="filter-left">
+          <el-input v-model="keyword" placeholder="搜索类型名称或描述" clearable style="width:260px" />
+          <el-select v-model="categoryFilter" placeholder="全部分类" clearable style="width:180px">
+            <el-option v-for="cat in categories" :key="cat" :label="cat" :value="cat" />
+          </el-select>
+          <el-select v-model="sortMode" placeholder="默认排序" style="width:150px">
+            <el-option label="默认排序" value="default" />
+            <el-option label="名称 A→Z" value="nameAsc" />
+            <el-option label="名称 Z→A" value="nameDesc" />
+            <el-option label="难度 低→高" value="difficultyAsc" />
+            <el-option label="难度 高→低" value="difficultyDesc" />
+          </el-select>
+        </div>
+        <div class="filter-right">
+          <el-button type="primary" @click="openCreate" v-permission="'business:groupCourseType:create'">新增类型</el-button>
+          <el-button @click="openGlobalLabelDialog" v-permission="'business:groupCourseType:edit'">管理标签</el-button>
+        </div>
+      </div>
+    </el-card>
+
+    <!-- Type table -->
+    <el-card shadow="never">
+      <el-table :data="filteredList" v-loading="loading" stripe>
+        <el-table-column prop="id" label="ID" width="70" align="center" />
+        <el-table-column prop="typeName" label="类型名称" width="160">
+          <template #default="{ row }">
+            <el-button link type="primary" @click="openDetailDialog(row)">
+              {{ row.typeName }}
+            </el-button>
+          </template>
+        </el-table-column>
+        <el-table-column prop="category" label="分类" width="140" />
+        <el-table-column label="难度" width="150">
+          <template #default="{ row }">
+            <div style="display:flex;align-items:center;gap:8px">
+              <el-tag :type="difficultyTagType(row.difficultyLevel)" size="small">
+                {{ row.difficultyLevel || '-' }}
+              </el-tag>
+              <span style="color:#909399;font-size:12px">{{ row.baseDifficulty }}/10</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="标签" min-width="220">
+          <template #default="{ row }">
+            <div style="display:flex;align-items:center;flex-wrap:wrap;gap:6px">
+              <template v-if="getTypeLabels(row).length > 0">
+                <el-tag
+                  v-for="lbl in getTypeLabels(row)"
+                  :key="lbl.id"
+                  :color="lbl.color"
+                  effect="dark"
+                  size="small"
+                >{{ lbl.labelName }}</el-tag>
+              </template>
+              <span v-else style="color:#c0c4cc;font-size:12px">-</span>
+              <el-button link type="primary" size="small" style="margin-left:4px" @click="openLabelDialog(row)">
+                编辑
+              </el-button>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="description" label="描述" min-width="160" show-overflow-tooltip />
+        <el-table-column label="操作" width="180" fixed="right">
+          <template #default="{ row }">
+            <el-button type="primary" link @click="openEdit(row)" v-permission="'business:groupCourseType:edit'">编辑</el-button>
+            <el-button type="danger" link @click="handleDelete(row.id)" v-permission="'business:groupCourseType:delete'">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div v-if="keyword || categoryFilter || sortMode !== 'default'" style="margin-top:12px;color:#909399;font-size:12px">
+        共 {{ filteredList.length }} 条结果
+      </div>
+    </el-card>
+
+    <!-- Type create / edit dialog -->
+    <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑类型' : '新增类型'" width="520px" :close-on-click-modal="false" @closed="form.adminPassword = ''">
+      <el-form :model="form" label-width="90px">
+        <el-form-item label="类型名称" required>
+          <el-input v-model="form.typeName" placeholder="请输入类型名称" maxlength="50" show-word-limit />
+        </el-form-item>
+        <el-form-item label="分类">
+          <el-select v-model="form.category" placeholder="选择或输入分类" filterable allow-create style="width:100%">
+            <el-option v-for="cat in categories" :key="cat" :label="cat" :value="cat" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="基础难度">
+          <el-input-number v-model="form.baseDifficulty" :min="1" :max="10" />
+          <span style="margin-left:8px;color:#909399;font-size:12px">（1-10，2以下为初级，9以上为专家级）</span>
+        </el-form-item>
+        <el-form-item label="描述">
+          <el-input v-model="form.description" type="textarea" :rows="3" placeholder="请输入类型描述" maxlength="200" show-word-limit />
+        </el-form-item>
+        <el-form-item v-if="isEdit" label="验证密码" required>
+          <el-input v-model="form.adminPassword" type="password" placeholder="请输入验证密码" show-password />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="saving" @click="handleSave">确定</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- Label management dialog (per type) -->
+    <el-dialog v-model="labelDialogVisible" :title="`标签管理 - ${labelTypeName}`" width="600px" :close-on-click-modal="false">
+      <div v-loading="labelLoading">
+        <div style="margin-bottom:20px">
+          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px">
+            <strong>已分配标签</strong>
+            <el-button v-if="typeLabels.length" type="danger" size="small" plain @click="handleClearLabels">清空全部</el-button>
+          </div>
+          <div v-if="typeLabels.length === 0" style="color:#909399;font-size:13px">暂无标签</div>
+          <div v-else style="display:flex;flex-wrap:wrap;gap:8px">
+            <el-tag
+              v-for="label in typeLabels"
+              :key="label.id"
+              :color="label.color"
+              closable
+              effect="dark"
+              @close="handleRemoveLabel(label.id)"
+            >
+              {{ label.labelName }}
+            </el-tag>
+          </div>
+        </div>
+
+        <el-divider />
+
+        <div>
+          <strong style="display:block;margin-bottom:8px">可选标签</strong>
+          <div v-if="unassignedLabels.length === 0" style="color:#909399;font-size:13px">
+            所有标签已分配，可在下方"管理标签"中新建
+          </div>
+          <div v-else style="display:flex;flex-wrap:wrap;gap:8px">
+            <el-tag
+              v-for="label in unassignedLabels"
+              :key="label.id"
+              :color="label.color"
+              effect="plain"
+              style="cursor:pointer"
+              @click="handleAddLabel(label.id)"
+            >
+              + {{ label.labelName }}
+            </el-tag>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <el-button @click="labelDialogVisible = false">关闭</el-button>
+        <el-button type="primary" @click="labelDialogVisible = false; openGlobalLabelDialog()">管理全部标签</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- Global label CRUD dialog -->
+    <el-dialog v-model="globalLabelDialogVisible" title="标签管理" width="650px" :close-on-click-modal="false">
+      <div style="display:flex;gap:20px">
+        <div style="flex:1">
+          <div style="font-weight:600;margin-bottom:8px">所有标签</div>
+          <div v-if="allLabels.length === 0" style="color:#909399;font-size:13px">暂无标签</div>
+          <div v-else style="display:flex;flex-wrap:wrap;gap:6px">
+            <el-tag
+              v-for="label in allLabels"
+              :key="label.id"
+              :color="label.color"
+              effect="dark"
+              style="cursor:pointer"
+              @click="openEditLabel(label)"
+            >
+              {{ label.labelName }}
+              <span style="margin-left:2px;opacity:0.7;font-size:11px">(编辑)</span>
+            </el-tag>
+          </div>
+        </div>
+
+        <div style="width:260px;border-left:1px solid #ebeef5;padding-left:20px">
+          <div style="font-weight:600;margin-bottom:12px">
+            {{ globalLabelIsEdit ? '编辑标签' : '新建标签' }}
+          </div>
+          <el-form :model="globalLabelForm" label-width="70px" size="small">
+            <el-form-item label="名称" required>
+              <el-input v-model="globalLabelForm.labelName" placeholder="标签名称" maxlength="50" />
+            </el-form-item>
+            <el-form-item label="颜色">
+              <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px">
+                <div
+                  v-for="c in presetColors"
+                  :key="c"
+                  :style="{ background: c, width: '22px', height: '22px', borderRadius: '4px', cursor: 'pointer', border: globalLabelForm.color === c ? '2px solid #303133' : '2px solid transparent' }"
+                  @click="globalLabelForm.color = c"
+                />
+              </div>
+              <el-color-picker v-model="globalLabelForm.color" show-alpha />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" :loading="globalLabelSaving" @click="handleSaveLabel">
+                {{ globalLabelIsEdit ? '更新' : '创建' }}
+              </el-button>
+              <el-button v-if="globalLabelIsEdit" @click="openCreateLabel">新建</el-button>
+            </el-form-item>
+          </el-form>
+          <div v-if="globalLabelIsEdit && globalLabelForm.id" style="margin-top:8px">
+            <el-button type="danger" size="small" plain @click="handleDeleteLabel(globalLabelForm as any)">
+              删除此标签
+            </el-button>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <el-button @click="globalLabelDialogVisible = false">关闭</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- Type detail dialog -->
+    <el-dialog v-model="detailDialogVisible" :title="detailType?.typeName ?? '类型详情'" width="750px" :close-on-click-modal="false">
+      <div v-if="detailType">
+        <!-- Type info -->
+        <el-descriptions :column="3" border size="small" style="margin-bottom:20px">
+          <el-descriptions-item label="ID">{{ detailType.id }}</el-descriptions-item>
+          <el-descriptions-item label="分类">{{ detailType.category || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="难度">
+            <el-tag :type="difficultyTagType(detailType.difficultyLevel)" size="small">
+              {{ detailType.difficultyLevel }}
+            </el-tag>
+            <span style="margin-left:4px;color:#909399">({{ detailType.baseDifficulty }}/10)</span>
+          </el-descriptions-item>
+          <el-descriptions-item label="描述" :span="3">{{ detailType.description || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="标签" :span="3">
+            <template v-if="getTypeLabels(detailType).length > 0">
+              <el-tag
+                v-for="lbl in getTypeLabels(detailType)"
+                :key="lbl.id"
+                :color="lbl.color"
+                effect="dark"
+                size="small"
+                style="margin-right:6px"
+              >{{ lbl.labelName }}</el-tag>
+            </template>
+            <span v-else style="color:#c0c4cc">-</span>
+          </el-descriptions-item>
+        </el-descriptions>
+
+        <!-- Courses -->
+        <div style="font-weight:600;margin-bottom:10px">
+          该类型下的团课
+          <span style="font-weight:400;color:#909399;font-size:13px;margin-left:4px">
+            ({{ detailCourses.length }})
+          </span>
+        </div>
+        <el-table :data="detailCourses" v-loading="detailLoading" stripe size="small" max-height="300">
+          <el-table-column prop="id" label="ID" width="60" align="center" />
+          <el-table-column prop="courseName" label="课程名称" width="160" />
+          <el-table-column label="上课时间" width="200">
+            <template #default="{ row }">
+              <div style="font-size:12px">
+                <div>{{ formatDate(row.startTime) }}</div>
+                <div style="color:#909399">{{ formatDate(row.endTime) }}</div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="location" label="地点" width="120" />
+          <el-table-column label="人数" width="100" align="center">
+            <template #default="{ row }">
+              <span :style="{ color: row.currentMembers >= row.maxMembers ? '#f56c6c' : '' }">
+                {{ row.currentMembers }} / {{ row.maxMembers }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" width="90" align="center">
+            <template #default="{ row }">
+              <el-tag :type="statusTagType(row.status as number)" size="small">{{ statusLabel(row.status as number) }}</el-tag>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div v-if="!detailLoading && detailCourses.length === 0" style="color:#909399;font-size:13px;text-align:center;padding:20px">
+          暂无团课
+        </div>
+      </div>
+      <template #footer>
+        <el-button @click="detailDialogVisible = false">关闭</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+.groupcourse-type-page {
+  padding: 0;
+}
+
+.filter-card {
+  margin-bottom: 16px;
+}
+
+.filter-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.filter-left {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.filter-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+</style>

gym-manage-cuit/src/views/login/index.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import { useUserStore } from '@/stores/user'
+import { ElMessage } from 'element-plus'
+
+const router = useRouter()
+const userStore = useUserStore()
+
+const formRef = ref()
+const form = reactive({
+  username: '',
+  password: '',
+})
+const loading = ref(false)
+
+const rules = {
+  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+}
+
+async function handleLogin() {
+  const valid = await formRef.value?.validate().catch(() => false)
+  if (!valid) return
+  loading.value = true
+  try {
+    await userStore.login(form)
+    ElMessage.success('登录成功')
+    router.push('/dashboard')
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || '登录失败')
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="login-container">
+    <div class="login-card">
+      <h2 class="login-title">CUIT Gym 管理系统</h2>
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="0" size="large">
+        <el-form-item prop="username">
+          <el-input v-model="form.username" placeholder="用户名" prefix-icon="User" />
+        </el-form-item>
+        <el-form-item prop="password">
+          <el-input v-model="form.password" type="password" placeholder="密码" prefix-icon="Lock" @keyup.enter="handleLogin" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" :loading="loading" style="width: 100%" @click="handleLogin">
+            登 录
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.login-container {
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+.login-card {
+  width: 400px;
+  padding: 40px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+}
+.login-title {
+  text-align: center;
+  margin-bottom: 32px;
+  color: var(--text-primary);
+  font-size: 24px;
+}
+</style>

gym-manage-cuit/src/views/member/index.vue

@@ -0,0 +1,416 @@
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+import { getAllMembers, getMemberDetail, updateMember } from '@/api/modules/member'
+import { formatDate } from '@/utils/format'
+
+// ---- Types ----
+interface MemberItem {
+  id: number
+  memberNo: string
+  nickname: string
+  phone: string
+  gender: number
+  avatar: string | null
+  lastLoginAt: string | null
+  createdAt: string | null
+  updatedAt: string | null
+}
+
+type SortField = 'createdAt' | 'memberNo' | 'nickname'
+type SortDir = 'desc' | 'asc'
+
+interface SortOption {
+  label: string
+  field: SortField
+  dir: SortDir
+}
+
+// ---- State ----
+const loading = ref(false)
+const rawList = ref<MemberItem[]>([])
+const detailVisible = ref(false)
+const detailLoading = ref(false)
+const detail = ref<any>(null)
+
+const keyword = ref('')
+const genderFilter = ref<number | null>(null)
+const sortBy = ref<SortOption>({ label: '注册时间(新→旧)', field: 'createdAt', dir: 'desc' })
+const currentPage = ref(1)
+const pageSize = ref(12)
+
+const sortOptions: SortOption[] = [
+  { label: '注册时间(新→旧)', field: 'createdAt', dir: 'desc' },
+  { label: '注册时间(旧→新)', field: 'createdAt', dir: 'asc' },
+  { label: '会员编号', field: 'memberNo', dir: 'asc' },
+  { label: '昵称', field: 'nickname', dir: 'asc' },
+]
+
+// ---- Edit state ----
+const editVisible = ref(false)
+const editSaving = ref(false)
+const editFormRef = ref()
+const editForm = reactive({
+  id: 0,
+  memberNo: '',
+  nickname: '',
+  gender: null as number | null,
+  birthday: '',
+  address: '',
+  adminPassword: '',
+})
+
+// ---- Computed ----
+const filteredList = computed(() => {
+  let items = rawList.value.filter((m) => {
+    if (keyword.value) {
+      const kw = keyword.value.toLowerCase()
+      const match =
+        m.nickname?.toLowerCase().includes(kw) ||
+        m.memberNo?.toLowerCase().includes(kw) ||
+        m.phone?.includes(kw)
+      if (!match) return false
+    }
+    if (genderFilter.value !== null && m.gender !== genderFilter.value) return false
+    return true
+  })
+
+  // Sort
+  const { field, dir } = sortBy.value
+  items = [...items].sort((a, b) => {
+    let va: any = a[field] ?? ''
+    let vb: any = b[field] ?? ''
+    if (field === 'createdAt') {
+      va = va ? new Date(va).getTime() : 0
+      vb = vb ? new Date(vb).getTime() : 0
+    } else {
+      va = String(va).toLowerCase()
+      vb = String(vb).toLowerCase()
+    }
+    return dir === 'desc' ? vb - va : va > vb ? 1 : va < vb ? -1 : 0
+  })
+
+  return items
+})
+
+const totalFiltered = computed(() => filteredList.value.length)
+
+const pagedList = computed(() => {
+  const start = (currentPage.value - 1) * pageSize.value
+  return filteredList.value.slice(start, start + pageSize.value)
+})
+
+// ---- Methods ----
+function genderLabel(val: number) {
+  const map: Record<number, string> = { 0: '未知', 1: '男', 2: '女' }
+  return map[val] ?? '未知'
+}
+
+function phoneDisplay(phone: string | null | undefined) {
+  if (!phone) return '-'
+  // 后端已脱敏，直接显示
+  return phone
+}
+
+async function fetchAll() {
+  loading.value = true
+  try {
+    // 拉取较大页面的数据一次，后续在前端做筛选排序分页
+    const res = await getAllMembers({ pageNum: 1, pageSize: 500 })
+    rawList.value = Array.isArray(res) ? res : []
+  } catch {
+    rawList.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+async function viewDetail(id: number) {
+  detailLoading.value = true
+  detail.value = null
+  detailVisible.value = true
+  try {
+    const res = await getMemberDetail(id)
+    detail.value = res || null
+  } catch (e: any) {
+    ElMessage.error(e?.message || '获取会员详情失败')
+    detailVisible.value = false
+  } finally {
+    detailLoading.value = false
+  }
+}
+
+function handleSearch() {
+  currentPage.value = 1
+}
+
+function resetFilters() {
+  keyword.value = ''
+  genderFilter.value = null
+  sortBy.value = sortOptions[0]
+  currentPage.value = 1
+}
+
+function openEdit(row: MemberItem) {
+  editForm.id = row.id
+  editForm.memberNo = row.memberNo || ''
+  editForm.nickname = row.nickname || ''
+  editForm.gender = row.gender ?? null
+  editForm.birthday = ''
+  editForm.address = ''
+  editForm.adminPassword = ''
+  editVisible.value = true
+
+  // 异步获取详情填充更多字段
+  getMemberDetail(row.id).then((res: any) => {
+    if (res) {
+      if (res.birthday) {
+        editForm.birthday = typeof res.birthday === 'string'
+          ? res.birthday.substring(0, 10)
+          : res.birthday
+      }
+      editForm.address = res.address || ''
+    }
+  }).catch(() => {})
+}
+
+async function doEdit() {
+  editSaving.value = true
+  try {
+    const payload: any = {
+      adminPassword: editForm.adminPassword,
+      nickname: editForm.nickname,
+    }
+    if (editForm.gender !== null) {
+      payload.gender = editForm.gender === 1 ? 'MALE' : editForm.gender === 2 ? 'FEMALE' : 'UNKNOWN'
+    }
+    if (editForm.birthday) {
+      payload.birthday = editForm.birthday
+    }
+    if (editForm.address) {
+      payload.address = editForm.address
+    }
+
+    const res: any = await updateMember(editForm.id, payload)
+    // 双重校验：后端可能以 200 返回业务错误码
+    if (res && res.code && res.code >= 400) {
+      ElMessage.error(res.message || '修改失败')
+      return
+    }
+    ElMessage.success('修改成功')
+    editVisible.value = false
+    fetchAll()
+  } catch (e: any) {
+    // axios 拦截器已处理 4xx/5xx，此处兜底
+    const msg = e?.response?.data?.message || e?.message || '修改失败'
+    ElMessage.error(msg)
+  } finally {
+    editSaving.value = false
+  }
+}
+
+// reset page when filters change
+watch([keyword, genderFilter, sortBy], () => {
+  currentPage.value = 1
+})
+
+onMounted(() => {
+  fetchAll()
+})
+</script>
+
+<template>
+  <div>
+    <h2 style="margin-bottom: 16px">会员管理</h2>
+
+    <!-- Stats -->
+    <el-row :gutter="16" style="margin-bottom: 16px">
+      <el-col :span="6" v-for="s in [
+        { label: '会员总数', value: rawList.length, color: '#1890ff' },
+        { label: '筛选结果', value: totalFiltered, color: '#52c41a' },
+        { label: '男性', value: rawList.filter(m => m.gender === 1).length, color: '#722ed1' },
+        { label: '女性', value: rawList.filter(m => m.gender === 2).length, color: '#faad14' },
+      ]" :key="s.label">
+        <el-card shadow="hover">
+          <div style="text-align: center">
+            <div style="font-size: 26px; font-weight: bold" :style="{ color: s.color }">
+              {{ s.value.toLocaleString() }}
+            </div>
+            <div style="color: var(--text-secondary); margin-top: 4px; font-size: 13px">{{ s.label }}</div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- Search -->
+    <el-card class="search-card">
+      <el-form inline>
+        <el-form-item label="关键词">
+          <el-input
+            v-model="keyword"
+            placeholder="会员编号 / 昵称 / 手机号"
+            clearable
+            style="width: 260px"
+            @keyup.enter="handleSearch"
+          />
+        </el-form-item>
+        <el-form-item label="性别">
+          <el-select v-model="genderFilter" placeholder="全部" clearable style="width: 100px">
+            <el-option label="男" :value="1" />
+            <el-option label="女" :value="2" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="排序方式">
+          <el-select v-model="sortBy" value-key="label" style="width: 190px">
+            <el-option v-for="opt in sortOptions" :key="opt.label" :label="opt.label" :value="opt" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch">搜索</el-button>
+          <el-button @click="resetFilters">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <!-- Table -->
+    <el-card>
+      <el-table :data="pagedList" v-loading="loading" stripe highlight-current-row>
+        <el-table-column type="index" label="#" width="50" />
+
+        <el-table-column label="头像" width="64" align="center">
+          <template #default="{ row }">
+            <el-avatar :size="36" :src="row.avatar">
+              <template #default>
+                <span style="font-size: 14px">{{ (row.nickname || '?')[0] }}</span>
+              </template>
+            </el-avatar>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="memberNo" label="会员编号" width="140" />
+
+        <el-table-column prop="nickname" label="昵称" min-width="120" />
+
+        <el-table-column label="手机号" width="140">
+          <template #default="{ row }">{{ phoneDisplay(row.phone) }}</template>
+        </el-table-column>
+
+        <el-table-column label="性别" width="70" align="center">
+          <template #default="{ row }">
+            <el-tag :type="row.gender === 1 ? '' : row.gender === 2 ? 'danger' : 'info'" size="small">
+              {{ genderLabel(row.gender) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="最近登录" width="170">
+          <template #default="{ row }">
+            {{ row.lastLoginAt ? formatDate(row.lastLoginAt) : '从未登录' }}
+          </template>
+        </el-table-column>
+
+        <el-table-column label="注册时间" width="170" sortable>
+          <template #default="{ row }">
+            {{ row.createdAt ? formatDate(row.createdAt, 'YYYY-MM-DD HH:mm') : '-' }}
+          </template>
+        </el-table-column>
+
+        <el-table-column label="操作" width="150" fixed="right">
+          <template #default="{ row }">
+            <el-button type="primary" link @click="viewDetail(row.id)">详情</el-button>
+            <el-button type="primary" link @click="openEdit(row)" v-permission="'business:member:edit'">编辑</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div style="margin-top: 16px; display: flex; justify-content: space-between; align-items: center">
+        <span style="color: var(--text-secondary); font-size: 13px">
+          共 {{ totalFiltered }} 条记录
+        </span>
+        <el-pagination
+          v-model:current-page="currentPage"
+          :page-size="pageSize"
+          :total="totalFiltered"
+          layout="prev, pager, next, sizes"
+          :page-sizes="[8, 12, 20, 50]"
+          @size-change="(s: number) => { pageSize = s; currentPage = 1 }"
+        />
+      </div>
+    </el-card>
+
+    <!-- Detail Dialog -->
+    <el-dialog v-model="detailVisible" title="会员详情" width="640px" @closed="detail = null">
+      <div v-loading="detailLoading" style="min-height: 200px">
+        <el-descriptions v-if="detail" :column="2" border>
+          <el-descriptions-item label="会员编号">{{ detail.memberNo || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="昵称">{{ detail.nickname || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="手机号">{{ detail.phone || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="性别">{{ detail.genderDesc || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="生日">{{ detail.birthday || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="关注状态">
+            <el-tag :type="detail.subscribed ? 'success' : 'info'" size="small">
+              {{ detail.subscribed ? '已关注' : '未关注' }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="地址" :span="2">{{ detail.address || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="有效卡数量">{{ detail.activeCardCount ?? 0 }}</el-descriptions-item>
+          <el-descriptions-item label="失效卡数量">{{ detail.inactiveCardCount ?? 0 }}</el-descriptions-item>
+          <el-descriptions-item label="注册时间">
+            {{ detail.createdAt ? formatDate(detail.createdAt) : '-' }}
+          </el-descriptions-item>
+          <el-descriptions-item label="最近登录">
+            {{ detail.lastLoginAt ? formatDate(detail.lastLoginAt) : '-' }}
+          </el-descriptions-item>
+        </el-descriptions>
+        <el-empty v-else-if="!detailLoading" description="暂未获取到会员信息" />
+      </div>
+    </el-dialog>
+    <!-- Edit Dialog -->
+    <el-dialog v-model="editVisible" title="编辑会员信息" width="520px" @closed="editForm.adminPassword = ''">
+      <el-form ref="editFormRef" :model="editForm" label-width="100px">
+        <el-form-item label="会员编号">
+          <el-input :model-value="editForm.memberNo" disabled />
+        </el-form-item>
+        <el-form-item label="昵称" required>
+          <el-input v-model="editForm.nickname" placeholder="请输入昵称" maxlength="30" />
+        </el-form-item>
+        <el-form-item label="性别">
+          <el-select v-model="editForm.gender" placeholder="请选择" clearable style="width:100%">
+            <el-option label="男" :value="1" />
+            <el-option label="女" :value="2" />
+            <el-option label="未知" :value="0" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="生日">
+          <el-date-picker
+            v-model="editForm.birthday"
+            type="date"
+            placeholder="请选择生日"
+            value-format="YYYY-MM-DD"
+            style="width:100%"
+          />
+        </el-form-item>
+        <el-form-item label="地址">
+          <el-input v-model="editForm.address" placeholder="请输入地址" maxlength="100" />
+        </el-form-item>
+
+        <el-divider content-position="left" style="margin: 8px 0 16px">
+          <span style="color: var(--el-color-danger); font-size: 13px">身份验证</span>
+        </el-divider>
+
+        <el-form-item label="管理员密码" required>
+          <el-input
+            v-model="editForm.adminPassword"
+            type="password"
+            placeholder="请输入当前管理员密码以确认修改"
+            show-password
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="editVisible = false">取消</el-button>
+        <el-button type="primary" :loading="editSaving" @click="doEdit">确认修改</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>

gym-manage-cuit/src/views/memberCard/index.vue

@@ -0,0 +1,441 @@
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import {
+  listMemberCards,
+  createMemberCard,
+  updateMemberCard,
+  deleteMemberCard,
+} from '@/api/modules/memberCard'
+import { formatDate } from '@/utils/format'
+
+interface CardItem {
+  id: number
+  memberCardId: number
+  memberCardName: string
+  memberCardType: string
+  memberCardPrice: number
+  memberCardValidityDays: number
+  memberCardTotalTimes: number
+  memberCardAmount: number
+  memberCardStatus: number
+  extraConfig: string | null
+  createdAt: string | null
+  updatedAt: string | null
+}
+
+// ---- State ----
+const loading = ref(false)
+const list = ref<CardItem[]>([])
+const total = ref(0)
+
+// filters
+const keyword = ref('')
+const typeFilter = ref<string | null>(null)
+const statusFilter = ref<number | null>(null)
+const currentPage = ref(0)
+const pageSize = ref(10)
+
+const displayPage = computed({
+  get: () => currentPage.value + 1,
+  set: (val: number) => {
+    currentPage.value = val - 1
+    fetchData()
+  },
+})
+
+// dialogs
+const createVisible = ref(false)
+const editVisible = ref(false)
+const saving = ref(false)
+
+const createForm = reactive({
+  memberCardName: '',
+  memberCardType: '',
+  memberCardPrice: 0,
+  memberCardTotalTimes: 0,
+  memberCardValidityDays: 30,
+  memberCardAmount: 0,
+})
+
+const editForm = reactive({
+  id: 0,
+  memberCardName: '',
+  memberCardType: '',
+  memberCardPrice: 0,
+  memberCardTotalTimes: 0,
+  memberCardValidityDays: 30,
+  memberCardAmount: 0,
+  memberCardStatus: 1,
+  adminPassword: '',
+})
+
+// ---- Computed ----
+const typeLabel = (t: string) => {
+  const map: Record<string, string> = {
+    TIME_CARD: '时长卡',
+    COUNT_CARD: '次卡',
+    STORED_VALUE_CARD: '储值卡',
+  }
+  return map[t] ?? t
+}
+
+const typeTagEffect = (t: string) => {
+  const map: Record<string, string> = {
+    TIME_CARD: '',
+    COUNT_CARD: 'success',
+    STORED_VALUE_CARD: 'warning',
+  }
+  return map[t] ?? 'info'
+}
+
+const statusLabel = (s: number) => (s === 1 ? '上架' : '下架')
+
+// ---- Methods ----
+async function fetchData() {
+  loading.value = true
+  try {
+    const params: any = {
+      page: currentPage.value,
+      size: pageSize.value,
+    }
+    if (keyword.value) params.name = keyword.value
+    if (typeFilter.value) params.type = typeFilter.value
+    if (statusFilter.value !== null) params.status = statusFilter.value
+
+    const res: any = await listMemberCards(params)
+    if (Array.isArray(res)) {
+      list.value = res
+      total.value = res.length
+    } else {
+      list.value = []
+      total.value = 0
+    }
+  } catch {
+    list.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+function handleSearch() {
+  currentPage.value = 0
+  fetchData()
+}
+
+function resetFilters() {
+  keyword.value = ''
+  typeFilter.value = null
+  statusFilter.value = null
+  currentPage.value = 0
+  fetchData()
+}
+
+// ---- Create ----
+function openCreate() {
+  createForm.memberCardName = ''
+  createForm.memberCardType = ''
+  createForm.memberCardPrice = 0
+  createForm.memberCardTotalTimes = 0
+  createForm.memberCardValidityDays = 30
+  createForm.memberCardAmount = 0
+  createVisible.value = true
+}
+
+async function doCreate() {
+  saving.value = true
+  try {
+    await createMemberCard(createForm)
+    ElMessage.success('创建成功')
+    createVisible.value = false
+    fetchData()
+  } catch {
+    ElMessage.error('创建失败')
+  } finally {
+    saving.value = false
+  }
+}
+
+// ---- Edit ----
+function openEdit(row: CardItem) {
+  editForm.id = row.id || row.memberCardId
+  editForm.memberCardName = row.memberCardName || ''
+  editForm.memberCardType = row.memberCardType || ''
+  editForm.memberCardPrice = row.memberCardPrice ?? 0
+  editForm.memberCardTotalTimes = row.memberCardTotalTimes ?? 0
+  editForm.memberCardValidityDays = row.memberCardValidityDays ?? 30
+  editForm.memberCardAmount = row.memberCardAmount ?? 0
+  editForm.memberCardStatus = row.memberCardStatus ?? 1
+  editForm.adminPassword = ''
+  editVisible.value = true
+}
+
+async function doEdit() {
+  saving.value = true
+  try {
+    // strip adminPassword from body, pass as query param
+    const { adminPassword, ...body } = editForm
+    const res: any = await updateMemberCard(editForm.id, body, { adminPassword })
+    if (res && res.code && res.code >= 400) {
+      ElMessage.error(res.message || '修改失败')
+      return
+    }
+    ElMessage.success('修改成功')
+    editVisible.value = false
+    fetchData()
+  } catch (e: any) {
+    const msg = e?.response?.data?.message || e?.message || '修改失败'
+    ElMessage.error(msg)
+  } finally {
+    saving.value = false
+  }
+}
+
+// ---- Delete ----
+async function doDelete(row: CardItem) {
+  try {
+    await ElMessageBox.confirm(`确定要删除会员卡"${row.memberCardName}"吗？`, '确认删除', {
+      type: 'warning',
+    })
+    const { value: adminPassword } = await ElMessageBox.prompt('请输入管理员密码以确认删除', '身份验证', {
+      inputType: 'password',
+      confirmButtonText: '确认删除',
+      cancelButtonText: '取消',
+      inputValidator: (val) => (!val || !val.trim() ? '密码不能为空' : true),
+    })
+    const res: any = await deleteMemberCard(row.id || row.memberCardId, { adminPassword })
+    if (res && res.code && res.code >= 400) {
+      ElMessage.error(res.message || '删除失败')
+      return
+    }
+    ElMessage.success('已删除')
+    fetchData()
+  } catch {
+    // cancelled
+  }
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <div>
+    <h2 style="margin-bottom: 16px">会员卡管理</h2>
+
+    <!-- Stats -->
+    <el-row :gutter="16" style="margin-bottom: 16px">
+      <el-col :span="6" v-for="s in [
+        { label: '上架卡种', value: list.filter(m => m.memberCardStatus === 1).length, color: '#52c41a' },
+        { label: '下架卡种', value: list.filter(m => m.memberCardStatus !== 1).length, color: '#ff4d4f' },
+        { label: '时长卡', value: list.filter(m => m.memberCardType === 'TIME_CARD').length, color: '#1890ff' },
+        { label: '次卡', value: list.filter(m => m.memberCardType === 'COUNT_CARD').length, color: '#722ed1' },
+      ]" :key="s.label">
+        <el-card shadow="hover">
+          <div style="text-align: center">
+            <div style="font-size: 26px; font-weight: bold" :style="{ color: s.color }">
+              {{ s.value }}
+            </div>
+            <div style="color: var(--text-secondary); margin-top: 4px; font-size: 13px">{{ s.label }}</div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- Search -->
+    <el-card class="search-card">
+      <el-form inline>
+        <el-form-item label="关键词">
+          <el-input
+            v-model="keyword"
+            placeholder="卡片名称"
+            clearable
+            style="width: 200px"
+            @keyup.enter="handleSearch"
+          />
+        </el-form-item>
+        <el-form-item label="类型">
+          <el-select v-model="typeFilter" placeholder="全部" clearable style="width: 120px">
+            <el-option label="时长卡" value="TIME_CARD" />
+            <el-option label="次卡" value="COUNT_CARD" />
+            <el-option label="储值卡" value="STORED_VALUE_CARD" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="statusFilter" placeholder="全部" clearable style="width: 100px">
+            <el-option label="上架" :value="1" />
+            <el-option label="下架" :value="0" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch">搜索</el-button>
+          <el-button @click="resetFilters">重置</el-button>
+        </el-form-item>
+      </el-form>
+      <el-button type="primary" @click="openCreate" style="margin-top: 8px" v-permission="'business:memberCard:create'">
+        + 新增会员卡类型
+      </el-button>
+    </el-card>
+
+    <!-- Table -->
+    <el-card>
+      <el-table :data="list" v-loading="loading" stripe highlight-current-row>
+        <el-table-column type="index" label="#" width="50" />
+
+        <el-table-column prop="memberCardName" label="卡片名称" min-width="140" />
+
+        <el-table-column label="类型" width="100" align="center">
+          <template #default="{ row }">
+            <el-tag :type="typeTagEffect(row.memberCardType)" size="small">
+              {{ typeLabel(row.memberCardType) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="价格" width="100" align="right">
+          <template #default="{ row }">
+            {{ row.memberCardPrice != null ? '¥' + Number(row.memberCardPrice).toLocaleString() : '-' }}
+          </template>
+        </el-table-column>
+
+        <el-table-column label="有效期(天)" width="100" align="center">
+          <template #default="{ row }">
+            {{ row.memberCardValidityDays ?? '-' }}
+          </template>
+        </el-table-column>
+
+        <el-table-column label="总次数" width="80" align="center">
+          <template #default="{ row }">
+            {{ row.memberCardTotalTimes ?? '-' }}
+          </template>
+        </el-table-column>
+
+        <el-table-column label="储值面额" width="100" align="right">
+          <template #default="{ row }">
+            {{ row.memberCardAmount != null ? '¥' + Number(row.memberCardAmount).toLocaleString() : '-' }}
+          </template>
+        </el-table-column>
+
+        <el-table-column label="状态" width="80" align="center">
+          <template #default="{ row }">
+            <el-tag :type="row.memberCardStatus === 1 ? 'success' : 'danger'" size="small">
+              {{ statusLabel(row.memberCardStatus) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="创建时间" width="170">
+          <template #default="{ row }">
+            {{ row.createdAt ? formatDate(row.createdAt, 'YYYY-MM-DD HH:mm') : '-' }}
+          </template>
+        </el-table-column>
+
+        <el-table-column label="操作" width="160" fixed="right">
+          <template #default="{ row }">
+            <el-button type="primary" link @click="openEdit(row)" v-permission="'business:memberCard:edit'">编辑</el-button>
+            <el-button type="danger" link @click="doDelete(row)" v-permission="'business:memberCard:delete'">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div style="margin-top: 16px; display: flex; justify-content: space-between; align-items: center">
+        <span style="color: var(--text-secondary); font-size: 13px">
+          共 {{ list.length }} 条记录
+        </span>
+        <el-pagination
+          v-model:current-page="displayPage"
+          :page-size="pageSize"
+          :total="total"
+          layout="prev, pager, next"
+        />
+      </div>
+    </el-card>
+
+    <!-- Create Dialog -->
+    <el-dialog v-model="createVisible" title="新增会员卡" width="520px">
+      <el-form :model="createForm" label-width="110px">
+        <el-form-item label="卡片名称" required>
+          <el-input v-model="createForm.memberCardName" placeholder="请输入卡片名称" maxlength="30" />
+        </el-form-item>
+        <el-form-item label="卡片类型" required>
+          <el-select v-model="createForm.memberCardType" placeholder="请选择" style="width: 100%">
+            <el-option label="时长卡" value="TIME_CARD" />
+            <el-option label="次卡" value="COUNT_CARD" />
+            <el-option label="储值卡" value="STORED_VALUE_CARD" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="价格" required>
+          <el-input-number v-model="createForm.memberCardPrice" :min="0" :precision="2" style="width: 200px" />
+        </el-form-item>
+        <el-form-item label="有效期(天)">
+          <el-input-number v-model="createForm.memberCardValidityDays" :min="1" style="width: 200px" />
+        </el-form-item>
+        <el-form-item label="总次数">
+          <el-input-number v-model="createForm.memberCardTotalTimes" :min="0" style="width: 200px" />
+        </el-form-item>
+        <el-form-item label="储值面额">
+          <el-input-number v-model="createForm.memberCardAmount" :min="0" :precision="2" style="width: 200px" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="createVisible = false">取消</el-button>
+        <el-button type="primary" :loading="saving" @click="doCreate">确定</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- Edit Dialog -->
+    <el-dialog v-model="editVisible" title="编辑会员卡" width="520px" @closed="editForm.adminPassword = ''">
+      <el-form :model="editForm" label-width="110px">
+        <el-form-item label="卡片名称" required>
+          <el-input v-model="editForm.memberCardName" placeholder="请输入卡片名称" maxlength="30" />
+        </el-form-item>
+        <el-form-item label="卡片类型" required>
+          <el-select v-model="editForm.memberCardType" placeholder="请选择" style="width: 100%">
+            <el-option label="时长卡" value="TIME_CARD" />
+            <el-option label="次卡" value="COUNT_CARD" />
+            <el-option label="储值卡" value="STORED_VALUE_CARD" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="价格" required>
+          <el-input-number v-model="editForm.memberCardPrice" :min="0" :precision="2" style="width: 200px" />
+        </el-form-item>
+        <el-form-item label="有效期(天)">
+          <el-input-number v-model="editForm.memberCardValidityDays" :min="1" style="width: 200px" />
+        </el-form-item>
+        <el-form-item label="总次数">
+          <el-input-number v-model="editForm.memberCardTotalTimes" :min="0" style="width: 200px" />
+        </el-form-item>
+        <el-form-item label="储值面额">
+          <el-input-number v-model="editForm.memberCardAmount" :min="0" :precision="2" style="width: 200px" />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-switch
+            v-model="editForm.memberCardStatus"
+            :active-value="1"
+            :inactive-value="0"
+            active-text="上架"
+            inactive-text="下架"
+          />
+        </el-form-item>
+
+        <el-divider content-position="left" style="margin: 8px 0 16px">
+          <span style="color: var(--el-color-danger); font-size: 13px">身份验证</span>
+        </el-divider>
+
+        <el-form-item label="管理员密码" required>
+          <el-input
+            v-model="editForm.adminPassword"
+            type="password"
+            placeholder="请输入当前管理员密码以确认修改"
+            show-password
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="editVisible = false">取消</el-button>
+        <el-button type="primary" :loading="saving" @click="doEdit">保存</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>

gym-manage-cuit/src/views/operationLog/index.vue

@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted, computed } from 'vue'
+import { getOperationLogsByPage, exportOperationLogs } from '@/api/modules/operationLog'
+import { formatDate } from '@/utils/format'
+import { download } from '@/api/request'
+import { ElMessage } from 'element-plus'
+
+const loading = ref(false)
+const list = ref<any[]>([])
+const total = ref(0)
+
+const filters = reactive({
+  page: 0,
+  size: 10,
+  keyword: '',
+  username: '',
+  operation: '',
+  method: '',
+  status: '',
+  startTime: '',
+  endTime: '',
+  sort: 'createdAt',
+  order: 'desc',
+})
+
+const currentPage = computed({
+  get: () => filters.page + 1,
+  set: (val: number) => { filters.page = val - 1 }
+})
+
+async function fetchData() {
+  loading.value = true
+  try {
+    const res = await getOperationLogsByPage(filters)
+    if (res?.content) {
+      list.value = res.content
+      total.value = res.totalElements || 0
+    } else if (Array.isArray(res)) {
+      list.value = res
+      total.value = res.length
+    }
+  } catch {
+    list.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+function handleReset() {
+  Object.assign(filters, {
+    page: 0,
+    keyword: '',
+    username: '',
+    operation: '',
+    method: '',
+    status: '',
+    startTime: '',
+    endTime: '',
+  })
+  fetchData()
+}
+
+function handlePageChange(page: number) {
+  filters.page = page - 1
+  fetchData()
+}
+
+async function handleExport() {
+  try {
+    await download('/api/logs/operation/export', filters, '操作日志.xlsx')
+    ElMessage.success('导出成功')
+  } catch {
+    ElMessage.error('导出失败')
+  }
+}
+
+function formatDuration(ms: number | null) {
+  if (ms == null) return '-'
+  if (ms < 1000) return ms + 'ms'
+  return (ms / 1000).toFixed(2) + 's'
+}
+
+onMounted(() => { fetchData() })
+</script>
+
+<template>
+  <div>
+    <h2 style="margin-bottom:16px">操作日志</h2>
+
+    <!-- Filter -->
+    <el-card class="search-card" shadow="never">
+      <el-form :model="filters" inline>
+        <el-form-item label="操作人">
+          <el-input v-model="filters.username" placeholder="用户名" clearable style="width:140px" />
+        </el-form-item>
+        <el-form-item label="操作">
+          <el-input v-model="filters.operation" placeholder="操作描述" clearable style="width:160px" />
+        </el-form-item>
+        <el-form-item label="请求方式">
+          <el-input v-model="filters.method" placeholder="GET /api/..." clearable style="width:180px" />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="filters.status" placeholder="全部" clearable style="width:100px">
+            <el-option label="成功" value="0" />
+            <el-option label="失败" value="1" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="开始时间">
+          <el-date-picker v-model="filters.startTime" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" placeholder="开始" style="width:180px" />
+        </el-form-item>
+        <el-form-item label="结束时间">
+          <el-date-picker v-model="filters.endTime" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" placeholder="结束" style="width:180px" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="fetchData">查询</el-button>
+          <el-button @click="handleReset">重置</el-button>
+          <el-button @click="handleExport">导出日志</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <!-- Table -->
+    <el-card shadow="never">
+      <el-table :data="list" v-loading="loading" stripe>
+        <el-table-column prop="id" label="ID" width="70" align="center" />
+        <el-table-column prop="username" label="操作人" width="110" />
+        <el-table-column prop="operation" label="操作" width="180" show-overflow-tooltip />
+        <el-table-column prop="method" label="请求地址" min-width="240" show-overflow-tooltip />
+        <el-table-column prop="ip" label="IP" width="140" />
+        <el-table-column label="状态" width="80" align="center">
+          <template #default="{ row }">
+            <el-tag :type="row.status === '0' ? 'success' : 'danger'" size="small">
+              {{ row.status === '0' ? '成功' : '失败' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="耗时" width="80" align="center">
+          <template #default="{ row }">
+            {{ formatDuration(row.duration) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="时间" width="170" align="center">
+          <template #default="{ row }">
+            {{ row.createdAt ? formatDate(row.createdAt) : '-' }}
+          </template>
+        </el-table-column>
+      </el-table>
+      <div v-if="list.length === 0 && !loading" style="color:#909399;font-size:13px;text-align:center;padding:60px">
+        暂无操作日志
+      </div>
+      <div style="margin-top:16px;text-align:right" v-if="total > 0">
+        <el-pagination
+          v-model:current-page="currentPage"
+          :page-size="filters.size"
+          :total="total"
+          layout="prev,pager,next,total"
+          @current-change="handlePageChange"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<style scoped>
+.search-card {
+  margin-bottom: 16px;
+}
+</style>

gym-manage-cuit/src/views/role/index.vue

@@ -0,0 +1,427 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted, computed } from 'vue'
+import { getRolesByPage, createRole, updateRole, deleteRole, getRolePermissions, assignPermissionsToRole, getAllPermissions } from '@/api/modules/role'
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+const loading = ref(false)
+const list = ref<any[]>([])
+const total = ref(0)
+const dialogVisible = ref(false)
+const permVisible = ref(false)
+const isEdit = ref(false)
+const editId = ref<number | null>(null)
+const allPermissions = ref<any[]>([])
+const selectedPermIds = ref<number[]>([])
+const systemCollapsed = ref(true)
+const collapsedGroups = ref<Record<string, boolean>>({})
+
+// 内置超级管理员角色（id=1: '超级管理员', roleKey='admin'）
+const isBuiltinRole = (row: any) => row?.id === 1
+
+function toggleGroup(label: string) {
+  collapsedGroups.value[label] = !collapsedGroups.value[label]
+}
+
+function toggleGroupAll(group: { label: string; items: any[] }) {
+  const ids = group.items.map((p: any) => p.id)
+  const allSelected = ids.every((id: number) => selectedPermIds.value.includes(id))
+  if (allSelected) {
+    selectedPermIds.value = selectedPermIds.value.filter((id: number) => !ids.includes(id))
+  } else {
+    const toAdd = ids.filter((id: number) => !selectedPermIds.value.includes(id))
+    selectedPermIds.value = [...selectedPermIds.value, ...toAdd]
+  }
+}
+
+function isGroupAllSelected(group: { items: any[] }) {
+  if (group.items.length === 0) return false
+  return group.items.every((p: any) => selectedPermIds.value.includes(p.id))
+}
+
+function isGroupPartialSelected(group: { items: any[] }) {
+  if (group.items.length === 0) return false
+  const some = group.items.some((p: any) => selectedPermIds.value.includes(p.id))
+  return some && !isGroupAllSelected(group)
+}
+
+const permCategories: { label: string; prefix: string }[] = [
+  { label: '会员管理', prefix: 'business:member:' },
+  { label: '会员卡管理', prefix: 'business:memberCard:' },
+  { label: '团课管理', prefix: 'business:groupCourse:' },
+  { label: '团课类型管理', prefix: 'business:groupCourseType:' },
+  { label: '团课推荐管理', prefix: 'business:groupCourseRecommend:' },
+  { label: '团课预约管理', prefix: 'business:groupCourseBooking:' },
+  { label: '签到管理', prefix: 'business:checkIn:' },
+  { label: '数据统计', prefix: 'business:dataCount:' },
+  { label: '员工管理', prefix: 'business:employee:' },
+]
+
+const systemPermCategories: { label: string; prefix: string }[] = [
+  { label: '用户管理', prefix: 'system:user:' },
+  { label: '角色管理', prefix: 'system:role:' },
+  { label: '权限管理', prefix: 'system:permission:' },
+  { label: '菜单管理', prefix: 'system:menu:' },
+  { label: '字典管理', prefix: 'system:dict:' },
+  { label: '配置管理', prefix: 'system:config:' },
+  { label: '日志管理', prefix: 'system:log:' },
+  { label: '文件管理', prefix: 'system:file:' },
+  { label: '公告管理', prefix: 'system:notice:' },
+]
+
+const businessPerms = computed(() => {
+  return permCategories.map(cat => ({
+    label: cat.label,
+    items: allPermissions.value.filter((p: any) => p.permissionCode?.startsWith(cat.prefix)),
+  })).filter(g => g.items.length > 0)
+})
+
+const systemPerms = computed(() => {
+  return systemPermCategories.map(cat => ({
+    label: cat.label,
+    items: allPermissions.value.filter((p: any) => p.permissionCode?.startsWith(cat.prefix)),
+  })).filter(g => g.items.length > 0)
+})
+
+const page = reactive({ page: 0, size: 10, sort: 'id', order: 'asc' })
+const currentPage = computed({
+  get: () => page.page + 1,
+  set: (val: number) => { page.page = val - 1 }
+})
+const form = reactive({ roleName: '', roleKey: '', roleSort: 0, status: 1 })
+
+async function fetchData() {
+  loading.value = true
+  try {
+    const res = await getRolesByPage(page)
+    if (res?.content) { list.value = res.content; total.value = res.totalElements || 0 }
+    else if (Array.isArray(res)) { list.value = res; total.value = res.length }
+  } catch { list.value = [] } finally { loading.value = false }
+}
+
+async function handleDelete(row: any) {
+  if (isBuiltinRole(row)) {
+    ElMessage.warning('超级管理员角色不可删除')
+    return
+  }
+  const { value: pwd } = await ElMessageBox.prompt('请输入管理员密码以确认删除', '验证密码', {
+    inputType: 'password',
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+  }).catch(() => {})
+  if (!pwd) {
+    ElMessage.warning('请输入验证密码')
+    return
+  }
+  try {
+    await deleteRole(row.id, { params: { adminPassword: pwd } })
+    ElMessage.success('删除成功')
+    fetchData()
+  } catch (e: any) {
+    const msg = e?.response?.data || e?.message || '删除失败'
+    ElMessage.error(typeof msg === 'string' ? msg : '删除失败')
+  }
+}
+
+function openCreate() {
+  isEdit.value = false
+  editId.value = null
+  Object.assign(form, { roleName: '', roleKey: '', roleSort: 0, status: 1 })
+  dialogVisible.value = true
+}
+
+function openEdit(row: any) {
+  if (isBuiltinRole(row)) {
+    ElMessage.warning('超级管理员角色不可编辑')
+    return
+  }
+  isEdit.value = true
+  editId.value = row.id
+  Object.assign(form, row)
+  dialogVisible.value = true
+}
+
+async function handleSave() {
+  if (isEdit.value && isBuiltinRole(form)) {
+    ElMessage.warning('超级管理员角色不可编辑')
+    return
+  }
+  try {
+    if (isEdit.value) {
+      const { value: pwd } = await ElMessageBox.prompt('请输入管理员密码以确认编辑', '验证密码', {
+        inputType: 'password',
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+      }).catch(() => {})
+      if (!pwd) {
+        ElMessage.warning('请输入验证密码')
+        return
+      }
+      await updateRole(editId.value!, form, { params: { adminPassword: pwd } })
+    } else {
+      await createRole(form)
+    }
+    ElMessage.success(isEdit.value ? '更新成功' : '创建成功')
+    dialogVisible.value = false
+    fetchData()
+  } catch (e: any) {
+    const msg = e?.response?.data || e?.message || '操作失败'
+    ElMessage.error(typeof msg === 'string' ? msg : '操作失败')
+  }
+}
+
+async function openAssignPerms(row: any) {
+  if (isBuiltinRole(row)) {
+    ElMessage.warning('超级管理员角色的权限不可被修改')
+    return
+  }
+  const perms = await getAllPermissions()
+  allPermissions.value = Array.isArray(perms) ? perms : []
+  try {
+    const rolePerms = await getRolePermissions(row.id)
+    selectedPermIds.value = Array.isArray(rolePerms) ? rolePerms.map((p: any) => p.id) : []
+  } catch { selectedPermIds.value = [] }
+  editId.value = row.id
+  permVisible.value = true
+}
+
+async function handleAssignPerms() {
+  const { value: pwd } = await ElMessageBox.prompt('请输入管理员密码以确认分配权限', '验证密码', {
+    inputType: 'password',
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+  }).catch(() => {})
+  if (!pwd) {
+    ElMessage.warning('请输入验证密码')
+    return
+  }
+  try {
+    await assignPermissionsToRole(editId.value!, selectedPermIds.value, { params: { adminPassword: pwd } })
+    ElMessage.success('分配成功')
+    permVisible.value = false
+  } catch (e: any) {
+    const msg = e?.response?.data || e?.message || '分配失败'
+    ElMessage.error(typeof msg === 'string' ? msg : '分配失败')
+  }
+}
+
+onMounted(() => fetchData())
+</script>
+
+<template>
+  <div>
+    <h2 style="margin-bottom:16px">角色管理</h2>
+    <el-card class="search-card"><el-button type="primary" @click="openCreate" v-permission="'system:role:create'">新增角色</el-button></el-card>
+    <el-card>
+      <el-table :data="list" v-loading="loading" stripe>
+        <el-table-column prop="id" label="ID" width="70" align="center" />
+        <el-table-column label="角色信息" min-width="200">
+          <template #default="{ row }">
+            <div style="display:flex;align-items:center;gap:8px">
+              <span style="font-weight:500">{{ row.roleName }}</span>
+              <span v-if="isBuiltinRole(row)" style="font-size:12px;color:#e6a23c">&#9733; 内置</span>
+              <el-tag v-if="isBuiltinRole(row)" type="warning" size="small" effect="dark" style="margin-left:auto">内置</el-tag>
+            </div>
+            <div style="font-size:12px;color:#909399;margin-top:2px;font-family:monospace">{{ row.roleKey }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="roleSort" label="排序" width="70" align="center" />
+        <el-table-column label="状态" width="80" align="center">
+          <template #default="{ row }"><el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">{{ row.status === 1 ? '启用' : '禁用' }}</el-tag></template>
+        </el-table-column>
+        <el-table-column label="操作" width="240" fixed="right">
+          <template #default="{ row }">
+            <el-button type="primary" link @click="openEdit(row)" v-permission="'system:role:edit'">编辑</el-button>
+            <el-button type="primary" link @click="openAssignPerms(row)" v-permission="'system:role:assign'">分配权限</el-button>
+            <el-button type="danger" link @click="handleDelete(row)" v-permission="'system:role:delete'">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div style="margin-top:16px;text-align:right">
+        <el-pagination v-model:current-page="currentPage" :page-size="page.size" :total="total" layout="prev,pager,next,total" @current-change="fetchData" />
+      </div>
+    </el-card>
+
+    <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑角色' : '新增角色'" width="500px" :close-on-click-modal="false">
+      <el-form :model="form" label-width="90px">
+        <el-form-item label="角色名称"><el-input v-model="form.roleName" placeholder="请输入角色名称" /></el-form-item>
+        <el-form-item label="角色标识"><el-input v-model="form.roleKey" placeholder="如: admin" /></el-form-item>
+        <el-form-item label="排序"><el-input-number v-model="form.roleSort" :min="0" style="width:100%" /></el-form-item>
+        <el-form-item label="状态">
+          <el-switch v-model="form.status" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleSave">确定</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog v-model="permVisible" title="分配权限" width="720px" :close-on-click-modal="false">
+      <div v-if="allPermissions.length === 0" style="color:#909399;text-align:center;padding:40px">暂无可用权限</div>
+      <template v-else>
+        <!-- 业务权限 -->
+        <div style="font-weight:600;font-size:14px;color:#303133;margin-bottom:12px">业务权限</div>
+        <el-checkbox-group v-model="selectedPermIds">
+        <div class="perm-scroll" style="max-height:320px;overflow-y:auto;padding-right:4px;margin-bottom:16px">
+          <div v-for="group in businessPerms" :key="group.label" class="perm-group">
+            <div class="perm-group-header" @click="toggleGroup(group.label)">
+              <span class="perm-group-arrow" :class="{ expanded: !collapsedGroups[group.label] }">&#9654;</span>
+              <span class="perm-group-label">{{ group.label }}</span>
+              <span class="perm-group-count">{{ group.items.length }}</span>
+              <span class="perm-group-toggle" @click.stop="toggleGroupAll(group)">
+                {{ isGroupAllSelected(group) ? '取消全选' : '全选' }}
+              </span>
+            </div>
+            <div v-show="!collapsedGroups[group.label]">
+              <div
+                v-for="perm in group.items" :key="perm.id"
+                class="perm-item"
+              >
+                <el-checkbox :label="perm.id" />
+                <span class="perm-name">{{ perm.permissionName }}</span>
+                <span class="perm-code">{{ perm.permissionCode }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        </el-checkbox-group>
+
+        <!-- 系统权限 -->
+        <div
+          class="perm-system-header"
+          @click="systemCollapsed = !systemCollapsed"
+        >
+          <span class="perm-group-arrow" :class="{ expanded: !systemCollapsed }">&#9654;</span>
+          <span style="font-weight:600;font-size:14px;color:#303133">系统权限</span>
+          <span style="font-size:12px;color:#c0c4cc;margin-left:6px">非业务相关，谨慎分配</span>
+        </div>
+        <div v-show="!systemCollapsed" class="perm-scroll" style="max-height:240px;overflow-y:auto;padding-right:4px">
+        <el-checkbox-group v-model="selectedPermIds">
+          <div v-for="group in systemPerms" :key="group.label" class="perm-group">
+            <div class="perm-group-header" @click="toggleGroup(group.label)">
+              <span class="perm-group-arrow" :class="{ expanded: !collapsedGroups[group.label] }">&#9654;</span>
+              <span class="perm-group-label">{{ group.label }}</span>
+              <span class="perm-group-count">{{ group.items.length }}</span>
+              <span class="perm-group-toggle" @click.stop="toggleGroupAll(group)">
+                {{ isGroupAllSelected(group) ? '取消全选' : '全选' }}
+              </span>
+            </div>
+            <div v-show="!collapsedGroups[group.label]">
+              <div
+                v-for="perm in group.items" :key="perm.id"
+                class="perm-item"
+              >
+                <el-checkbox :label="perm.id" />
+                <span class="perm-name">{{ perm.permissionName }}</span>
+                <span class="perm-code">{{ perm.permissionCode }}</span>
+              </div>
+            </div>
+          </div>
+        </el-checkbox-group>
+        </div>
+      </template>
+      <template #footer>
+        <el-button @click="permVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleAssignPerms">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+.search-card { margin-bottom: 16px; }
+
+/* 权限弹窗 */
+.perm-group {
+  margin-bottom: 2px;
+}
+.perm-group-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 10px;
+  background: #f5f7fa;
+  border-radius: 6px;
+  cursor: pointer;
+  user-select: none;
+  transition: background 0.15s;
+}
+.perm-group-header:hover {
+  background: #ebeef5;
+}
+.perm-group-arrow {
+  font-size: 10px;
+  color: #909399;
+  transition: transform 0.2s;
+  display: inline-block;
+  width: 12px;
+}
+.perm-group-arrow.expanded {
+  transform: rotate(90deg);
+}
+.perm-group-label {
+  font-weight: 500;
+  font-size: 13px;
+  color: #303133;
+}
+.perm-group-count {
+  font-size: 11px;
+  color: #c0c4cc;
+  background: #e9ecf1;
+  border-radius: 10px;
+  padding: 0 7px;
+  line-height: 18px;
+}
+.perm-group-toggle {
+  margin-left: auto;
+  font-size: 12px;
+  color: #409eff;
+  cursor: pointer;
+  padding: 0 4px;
+}
+.perm-group-toggle:hover {
+  color: #66b1ff;
+}
+.perm-item {
+  display: flex;
+  align-items: center;
+  padding: 5px 10px 5px 28px;
+  border-bottom: 1px solid #f5f5f5;
+  gap: 6px;
+}
+.perm-item:last-child {
+  border-bottom: none;
+}
+.perm-name {
+  font-size: 13px;
+  color: #303133;
+}
+.perm-code {
+  font-size: 11px;
+  color: #909399;
+  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
+  margin-left: auto;
+}
+.perm-system-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 10px;
+  background: #fdf6ec;
+  border-radius: 6px;
+  cursor: pointer;
+  user-select: none;
+  margin-bottom: 4px;
+  transition: background 0.15s;
+}
+.perm-system-header:hover {
+  background: #faead7;
+}
+.perm-scroll::-webkit-scrollbar {
+  width: 5px;
+}
+.perm-scroll::-webkit-scrollbar-thumb {
+  background: #dcdfe6;
+  border-radius: 3px;
+}
+</style>