创建会员管理页面 - 实现完整的会员列表管理功能，包含表格、筛选、分页等

demo/frontend/src/router/index.js

@@ -25,6 +25,7 @@ import ImageToVideo from '@/views/ImageToVideo.vue'
 import ImageToVideoCreate from '@/views/ImageToVideoCreate.vue'
 import StoryboardVideo from '@/views/StoryboardVideo.vue'
 import StoryboardVideoCreate from '@/views/StoryboardVideoCreate.vue'
+import MemberManagement from '@/views/MemberManagement.vue'
 
 const routes = [
   {
@@ -162,6 +163,12 @@ const routes = [
     name: 'AdminDashboard',
     component: AdminDashboard,
     meta: { title: '后台管理', requiresAuth: true, requiresAdmin: true }
+  },
+  {
+    path: '/member-management',
+    name: 'MemberManagement',
+    component: MemberManagement,
+    meta: { title: '会员管理', requiresAuth: true, requiresAdmin: true }
   }
 ]
 

demo/frontend/src/views/Home.vue

@@ -319,7 +319,7 @@ const handlePointClick = (point) => {
 
 // 导航功能
 const goToUsers = () => {
-  ElMessage.info('跳转到会员管理')
+  router.push('/member-management')
 }
 
 const goToOrders = () => {

demo/frontend/src/views/MemberManagement.vue

@@ -0,0 +1,509 @@
+<template>
+  <div class="member-management">
+    <!-- 左侧导航栏 -->
+    <aside class="sidebar">
+      <div class="logo">
+        <div class="logo-icon"></div>
+        <span>LOGO</span>
+      </div>
+      <nav class="nav-menu">
+        <div class="nav-item" @click="goToDashboard">
+          <el-icon><Grid /></el-icon>
+          <span>数据仪表台</span>
+        </div>
+        <div class="nav-item active">
+          <el-icon><User /></el-icon>
+          <span>会员管理</span>
+        </div>
+        <div class="nav-item" @click="goToOrders">
+          <el-icon><ShoppingCart /></el-icon>
+          <span>订单管理</span>
+        </div>
+        <div class="nav-item" @click="goToAPI">
+          <el-icon><Code /></el-icon>
+          <span>API管理</span>
+        </div>
+        <div class="nav-item" @click="goToTasks">
+          <el-icon><Document /></el-icon>
+          <span>生成任务记录</span>
+        </div>
+        <div class="nav-item" @click="goToSettings">
+          <el-icon><Setting /></el-icon>
+          <span>系统设置</span>
+        </div>
+      </nav>
+      <div class="sidebar-footer">
+        <div class="online-users">
+          当前在线用户: <span class="highlight">87/500</span>
+        </div>
+        <div class="system-uptime">
+          系统运行时间: <span class="highlight">48小时32分</span>
+        </div>
+      </div>
+    </aside>
+
+    <!-- 主内容区域 -->
+    <main class="main-content">
+      <!-- 顶部搜索栏 -->
+      <header class="top-header">
+        <div class="search-bar">
+          <el-icon class="search-icon"><Search /></el-icon>
+          <input type="text" placeholder="搜索你的想要的内容" class="search-input" />
+        </div>
+        <div class="header-actions">
+          <el-icon class="notification-icon"><Bell /></el-icon>
+          <el-icon class="help-icon"><QuestionFilled /></el-icon>
+          <div class="user-avatar">
+            <img src="/images/backgrounds/welcome.jpg" alt="用户头像" />
+          </div>
+        </div>
+      </header>
+
+      <!-- 会员列表内容 -->
+      <section class="member-content">
+        <div class="content-header">
+          <h2>会员列表</h2>
+          <div class="selection-info" v-if="selectedMembers.length > 0">
+            已选择{{ selectedMembers.length }}项
+          </div>
+        </div>
+
+        <div class="table-toolbar">
+          <div class="toolbar-left">
+            <el-select v-model="selectedLevel" placeholder="全部等级" size="small">
+              <el-option label="全部等级" value="all" />
+              <el-option label="专业会员" value="professional" />
+              <el-option label="标准会员" value="standard" />
+            </el-select>
+          </div>
+          <div class="toolbar-right">
+            <el-button type="danger" size="small" @click="deleteSelected" :disabled="selectedMembers.length === 0">
+              <el-icon><Delete /></el-icon>
+              删除
+            </el-button>
+          </div>
+        </div>
+
+        <div class="table-container">
+          <el-table 
+            :data="memberList" 
+            @selection-change="handleSelectionChange"
+            class="member-table">
+            <el-table-column type="selection" width="55" />
+            <el-table-column prop="id" label="用户ID" width="100" />
+            <el-table-column prop="username" label="用户名" width="120" />
+            <el-table-column prop="level" label="会员等级" width="120">
+              <template #default="{ row }">
+                <el-tag :type="row.level === '专业会员' ? 'danger' : 'primary'" size="small">
+                  {{ row.level }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column prop="points" label="剩余资源点" width="140">
+              <template #default="{ row }">
+                {{ row.points.toLocaleString() }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="expiryDate" label="到期时间" width="120" />
+            <el-table-column label="编辑" width="80">
+              <template #default="{ row }">
+                <el-button type="primary" text size="small" @click="editMember(row)">
+                  编辑
+                </el-button>
+              </template>
+            </el-table-column>
+            <el-table-column label="删除" width="80">
+              <template #default="{ row }">
+                <el-button type="danger" text size="small" @click="deleteMember(row)">
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+
+        <!-- 分页 -->
+        <div class="pagination-container">
+          <el-pagination
+            v-model:current-page="currentPage"
+            :page-size="pageSize"
+            :total="totalMembers"
+            layout="prev, pager, next"
+            :pager-count="5"
+            @current-change="handlePageChange"
+          />
+        </div>
+      </section>
+    </main>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+const router = useRouter()
+
+// 数据状态
+const selectedMembers = ref([])
+const selectedLevel = ref('all')
+const currentPage = ref(1)
+const pageSize = ref(10)
+const totalMembers = ref(50)
+
+// 模拟会员数据
+const memberList = ref([
+  { id: 1001, username: 'Apple', level: '专业会员', points: 1234, expiryDate: '2025-12-31' },
+  { id: 1002, username: 'Apple', level: '标准会员', points: 500, expiryDate: '2025-12-31' },
+  { id: 1003, username: 'Apple', level: '标准会员', points: 789, expiryDate: '2025-12-31' },
+  { id: 1004, username: 'Apple', level: '标准会员', points: 2342, expiryDate: '2025-12-31' },
+  { id: 1005, username: 'Samsung', level: '标准会员', points: 90, expiryDate: '2025-12-31' },
+  { id: 1006, username: 'Samsung', level: '专业会员', points: 3456, expiryDate: '2025-12-31' },
+  { id: 1007, username: 'Apple', level: '专业会员', points: 1200, expiryDate: '2025-12-31' },
+  { id: 1008, username: 'Apple', level: '专业会员', points: 800, expiryDate: '2025-12-31' },
+  { id: 1009, username: 'Apple', level: '专业会员', points: 1500, expiryDate: '2025-12-31' },
+  { id: 1010, username: 'Apple', level: '专业会员', points: 2000, expiryDate: '2025-12-31' }
+])
+
+// 导航功能
+const goToDashboard = () => {
+  router.push('/')
+}
+
+const goToOrders = () => {
+  router.push('/orders')
+}
+
+const goToAPI = () => {
+  ElMessage.info('跳转到API管理')
+}
+
+const goToTasks = () => {
+  ElMessage.info('跳转到生成任务记录')
+}
+
+const goToSettings = () => {
+  ElMessage.info('跳转到系统设置')
+}
+
+// 表格操作
+const handleSelectionChange = (selection) => {
+  selectedMembers.value = selection
+}
+
+const editMember = (member) => {
+  ElMessage.info(`编辑用户: ${member.username}`)
+}
+
+const deleteMember = async (member) => {
+  try {
+    await ElMessageBox.confirm(
+      `确定要删除用户 ${member.username} 吗？`,
+      '确认删除',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+    )
+    ElMessage.success('删除成功')
+  } catch {
+    ElMessage.info('已取消删除')
+  }
+}
+
+const deleteSelected = async () => {
+  try {
+    await ElMessageBox.confirm(
+      `确定要删除选中的 ${selectedMembers.value.length} 个用户吗？`,
+      '确认删除',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+    )
+    ElMessage.success('批量删除成功')
+    selectedMembers.value = []
+  } catch {
+    ElMessage.info('已取消删除')
+  }
+}
+
+const handlePageChange = (page) => {
+  currentPage.value = page
+  // 这里应该重新加载数据
+  ElMessage.info(`切换到第 ${page} 页`)
+}
+
+onMounted(() => {
+  // 初始化数据
+})
+</script>
+
+<style scoped>
+.member-management {
+  display: flex;
+  min-height: 100vh;
+  background: #f8fafc;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+/* 左侧导航栏 */
+.sidebar {
+  width: 320px;
+  background: white;
+  border-right: 1px solid #e2e8f0;
+  display: flex;
+  flex-direction: column;
+  padding: 24px 0;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  padding: 0 28px;
+  margin-bottom: 32px;
+}
+
+.logo-icon {
+  width: 24px;
+  height: 24px;
+  background: #3b82f6;
+  border-radius: 4px;
+  margin-right: 12px;
+}
+
+.logo span {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.nav-menu {
+  flex: 1;
+  padding: 0 24px;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  padding: 18px 24px;
+  margin-bottom: 6px;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: #64748b;
+  font-size: 16px;
+}
+
+.nav-item:hover {
+  background: #f1f5f9;
+  color: #334155;
+}
+
+.nav-item.active {
+  background: #eff6ff;
+  color: #3b82f6;
+}
+
+.nav-item .el-icon {
+  margin-right: 16px;
+  font-size: 22px;
+}
+
+.nav-item span {
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.sidebar-footer {
+  padding: 0 32px 20px;
+  margin-top: auto;
+}
+
+.online-users,
+.system-uptime {
+  font-size: 14px;
+  color: #64748b;
+  margin-bottom: 10px;
+  line-height: 1.5;
+}
+
+.highlight {
+  color: #3b82f6;
+  font-weight: 600;
+  font-size: 15px;
+}
+
+/* 主内容区域 */
+.main-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: #f8fafc;
+}
+
+/* 顶部搜索栏 */
+.top-header {
+  background: white;
+  border-bottom: 1px solid #e2e8f0;
+  padding: 16px 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.search-bar {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.search-icon {
+  position: absolute;
+  left: 12px;
+  color: #94a3b8;
+  font-size: 16px;
+}
+
+.search-input {
+  width: 300px;
+  padding: 8px 12px 8px 40px;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  font-size: 14px;
+  background: #f8fafc;
+  outline: none;
+}
+
+.search-input:focus {
+  border-color: #3b82f6;
+  background: white;
+}
+
+.search-input::placeholder {
+  color: #94a3b8;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.notification-icon,
+.help-icon {
+  font-size: 20px;
+  color: #64748b;
+  cursor: pointer;
+}
+
+.user-avatar {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.user-avatar img {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+/* 会员内容区域 */
+.member-content {
+  padding: 24px;
+  flex: 1;
+}
+
+.content-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+}
+
+.content-header h2 {
+  font-size: 24px;
+  font-weight: 600;
+  color: #1e293b;
+  margin: 0;
+}
+
+.selection-info {
+  font-size: 14px;
+  color: #64748b;
+  background: #f1f5f9;
+  padding: 8px 16px;
+  border-radius: 6px;
+}
+
+.table-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.toolbar-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.table-container {
+  background: white;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.member-table {
+  width: 100%;
+}
+
+.pagination-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 24px;
+}
+
+/* 响应式设计 */
+@media (max-width: 1024px) {
+  .member-management {
+    flex-direction: column;
+  }
+  
+  .sidebar {
+    width: 100%;
+    height: auto;
+  }
+  
+  .nav-menu {
+    display: flex;
+    overflow-x: auto;
+    padding: 0 16px;
+  }
+  
+  .nav-item {
+    white-space: nowrap;
+    margin-right: 16px;
+    margin-bottom: 0;
+  }
+  
+  .sidebar-footer {
+    display: none;
+  }
+  
+  .search-input {
+    width: 200px;
+  }
+  
+  .member-content {
+    padding: 16px;
+  }
+}
+</style>