vue2server7 7.0.108 → 7.0.110

package/docs/superpowers/plans/2026-05-13-table-column-config-demo-plan.md

@@ -0,0 +1,275 @@
+# 表格列配置演示页面 Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** 在前端项目中新增一个"表格列配置演示"路由页面，提供基础的表格框架和预留列配置扩展点
+
+**Architecture:** 遵循现有项目结构，创建新的 Vue 页面组件并添加路由配置，保持与现有页面一致的代码风格
+
+**Tech Stack:** Vue 3 + Composition API + TypeScript + Element Plus
+
+---
+
+## 文件结构
+
+| 文件 | 操作 | 说明 |
+|------|------|------|
+| `frontEnd/src/pages/ColumnConfigDemoPage.vue` | 创建 | 表格列配置演示页面 |
+| `frontEnd/src/router/routes.js` | 修改 | 添加新路由配置 |
+
+---
+
+### Task 1: 创建列配置演示页面组件
+
+**Files:**
+- Create: `frontEnd/src/pages/ColumnConfigDemoPage.vue`
+
+- [ ] **Step 1: 创建基础页面模板和脚本**
+
+```vue
+<template>
+  <section class="page column-config-demo-page">
+    <h1 class="title">表格列配置演示</h1>
+    
+    <div class="toolbar">
+      <el-button type="primary">查询</el-button>
+      <el-button>重置</el-button>
+      
+      <!-- 列设置按钮 - 预留位置，用户自行实现弹窗逻辑 -->
+      <el-popover placement="bottom" trigger="click" width="300">
+        <template #reference>
+          <el-button>列设置</el-button>
+        </template>
+        <!-- 列配置内容区域 - 用户自行开发 -->
+        <div class="column-settings-panel">
+          <p>列配置区域</p>
+          <p>请在此处实现列配置功能</p>
+        </div>
+      </el-popover>
+    </div>
+
+    <el-table
+      :key="tableKey"
+      :data="tableData"
+      border
+      stripe
+      size="small"
+      style="width: 100%"
+    >
+      <el-table-column type="index" label="序号" width="60" align="center" />
+      <el-table-column
+        v-for="col in visibleColumns"
+        :key="col.key"
+        :prop="col.prop"
+        :label="col.label"
+        :width="col.width"
+        :min-width="col.minWidth"
+        :align="col.align || 'left'"
+        :fixed="col.fixed || false"
+      >
+      </el-table-column>
+    </el-table>
+
+    <div class="pagination">
+      <el-pagination
+        layout="total, prev, pager, next"
+        :current-page="page"
+        :page-size="pageSize"
+        :total="total"
+        @current-change="onPageChange"
+      />
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted } from 'vue'
+
+// 列配置接口
+interface ColumnConfig {
+  key: string
+  prop: string
+  label: string
+  width?: number
+  minWidth?: number
+  align?: 'left' | 'center' | 'right'
+  fixed?: boolean | 'left' | 'right'
+  visible?: boolean
+}
+
+// 表格数据接口
+interface TableRow {
+  id: number
+  name: string
+  department: string
+  position: string
+  phone: string
+  email: string
+  joinDate: string
+  status: string
+}
+
+// 响应式数据
+const tableKey = ref(0)
+const page = ref(1)
+const pageSize = ref(10)
+const total = ref(50)
+const tableData = ref<TableRow[]>([])
+
+// 列配置 - 可在此基础上扩展更多属性
+const columns = reactive<ColumnConfig[]>([
+  { key: 'name', prop: 'name', label: '姓名', width: 100 },
+  { key: 'department', prop: 'department', label: '部门', width: 120 },
+  { key: 'position', prop: 'position', label: '职位', width: 120 },
+  { key: 'phone', prop: 'phone', label: '电话', width: 140 },
+  { key: 'email', prop: 'email', label: '邮箱', minWidth: 180 },
+  { key: 'joinDate', prop: 'joinDate', label: '入职日期', width: 120, align: 'center' },
+  { key: 'status', prop: 'status', label: '状态', width: 100, align: 'center' }
+])
+
+// 可见列计算 - 预留，用户可自行控制显示/隐藏
+const visibleColumns = computed(() => {
+  return columns.filter(col => col.visible !== false)
+})
+
+// 分页切换
+const onPageChange = (p: number) => {
+  page.value = p
+  loadData()
+}
+
+// 加载模拟数据
+const loadData = () => {
+  const data: TableRow[] = []
+  for (let i = 0; i < pageSize.value; i++) {
+    const index = (page.value - 1) * pageSize.value + i + 1
+    data.push({
+      id: index,
+      name: `员工${index}`,
+      department: ['技术部', '产品部', '运营部', '市场部'][index % 4],
+      position: ['开发工程师', '产品经理', '运营专员', '市场专员'][index % 4],
+      phone: `138${String(index).padStart(8, '0')}`,
+      email: `employee${index}@example.com`,
+      joinDate: `2024-${String((index % 12) + 1).padStart(2, '0')}-${String((index % 28) + 1).padStart(2, '0')}`,
+      status: ['在职', '离职', '休假'][index % 3]
+    })
+  }
+  tableData.value = data
+}
+
+onMounted(() => {
+  loadData()
+})
+</script>
+
+<style scoped>
+.page.column-config-demo-page {
+  padding: 16px;
+}
+.title {
+  font-size: 18px;
+  margin-bottom: 12px;
+}
+.toolbar {
+  margin-bottom: 12px;
+}
+.pagination {
+  margin-top: 12px;
+  text-align: right;
+}
+.column-settings-panel {
+  padding: 8px 0;
+}
+</style>
+```
+
+- [ ] **Step 2: 验证文件创建成功**
+
+检查文件是否存在:
+```bash
+ls -la frontEnd/src/pages/ColumnConfigDemoPage.vue
+```
+Expected: 文件存在，大小约 3-4KB
+
+- [ ] **Step 3: 提交**
+
+```bash
+git add frontEnd/src/pages/ColumnConfigDemoPage.vue
+git commit -m "feat: add column config demo page skeleton"
+```
+
+---
+
+### Task 2: 添加路由配置
+
+**Files:**
+- Modify: `frontEnd/src/router/routes.js:8-87`
+
+- [ ] **Step 1: 修改 routes.js 添加导入和路由配置**
+
+在文件顶部导入语句区域添加（第8行后）:
+```javascript
+import ColumnConfigDemoPage from '../pages/ColumnConfigDemoPage.vue'
+```
+
+在 routes 数组末尾添加新路由（第86行前）:
+```javascript
+  {
+    path: '/column-config-demo',
+    name: 'ColumnConfigDemo',
+    component: ColumnConfigDemoPage,
+    meta: {
+      title: '表格列配置演示',
+      showInMenu: true
+    }
+  }
+```
+
+- [ ] **Step 2: 验证路由配置**
+
+检查文件内容:
+```bash
+grep -n "ColumnConfigDemo" frontEnd/src/router/routes.js
+```
+Expected: 至少两行输出（导入语句和路由配置）
+
+- [ ] **Step 3: 提交**
+
+```bash
+git add frontEnd/src/router/routes.js
+git commit -m "feat: add column config demo route"
+```
+
+---
+
+### Task 3: 验证页面功能
+
+**Files:**
+- Test: 手动运行前端项目验证
+
+- [ ] **Step 1: 启动前端开发服务器**
+
+```bash
+npm run front-dev
+```
+Expected: Vite 服务器启动成功，无编译错误
+
+- [ ] **Step 2: 手动验证**
+  1. 浏览器访问页面
+  2. 检查侧边栏菜单是否显示"表格列配置演示"
+  3. 点击菜单项，页面是否正常加载
+  4. 检查表格数据是否显示
+  5. 检查分页是否正常工作
+  6. 检查"列设置"按钮是否可点击
+
+- [ ] **Step 3: 提交验证完成（无代码变更）**
+
+---
+
+## 计划完成检查清单
+
+- [x] 所有文件路径正确
+- [x] 代码示例完整无占位符
+- [x] 命令和预期输出明确
+- [x] 与现有项目风格一致
+- [x] 预留了用户自定义扩展点

package/docs/superpowers/plans/2026-05-13-table-column-settings-plan.md

@@ -0,0 +1,443 @@
+# 表格列配置组件 Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** 集成 TableColumnSettings 列配置组件到项目中，并在演示页面使用
+
+**Architecture:** 创建独立组件文件，在演示页面中引入，实现动态列显示/隐藏功能
+
+**Tech Stack:** Vue 3 + Composition API + Element Plus
+
+---
+
+## 文件结构
+
+| 文件 | 操作 | 说明 |
+|------|------|------|
+| `frontEnd/src/components/TableColumnSettings.vue` | 创建 | 表格列配置组件 |
+| `frontEnd/src/pages/ColumnConfigDemoPage.vue` | 修改/创建 | 演示页面集成组件 |
+| `frontEnd/src/router/routes.js` | 修改 | 添加路由（如未添加） |
+
+---
+
+### Task 1: 创建 TableColumnSettings 组件
+
+**Files:**
+- Create: `frontEnd/src/components/TableColumnSettings.vue`
+
+- [ ] **Step 1: 创建组件文件**
+
+```vue
+<template>
+  <el-button @click="visible = true">
+    <el-icon><Setting /></el-icon>
+    列配置
+  </el-button>
+
+  <el-dialog
+    v-model="visible"
+    title="表格列配置"
+    width="760px"
+    append-to-body
+  >
+    <div class="desc">请选择需要在表格中显示的数据列</div>
+
+    <div class="column-box">
+      <div class="check-all-row">
+        <el-checkbox
+          v-model="checkAll"
+          :indeterminate="isIndeterminate"
+          @change="handleCheckAllChange"
+        >
+          全选
+        </el-checkbox>
+      </div>
+
+      <el-checkbox-group
+        v-model="checkedKeys"
+        class="column-list"
+        @change="updateCheckAllStatus"
+      >
+        <el-checkbox
+          v-for="item in columns"
+          :key="item.prop"
+          :label="item.prop"
+          :disabled="item.disabled"
+        >
+          {{ item.label }}
+        </el-checkbox>
+      </el-checkbox-group>
+    </div>
+
+    <template #footer>
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" @click="handleConfirm">
+        确认
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { Setting } from '@element-plus/icons-vue'
+
+const props = defineProps({
+  columns: {
+    type: Array,
+    default: () => []
+  },
+  selectedKeys: {
+    type: Array,
+    default: () => []
+  },
+  buttonText: {
+    type: String,
+    default: '列配置'
+  }
+})
+
+const emit = defineEmits(['confirm'])
+
+const visible = ref(false)
+const checkedKeys = ref([])
+const checkAll = ref(false)
+const isIndeterminate = ref(false)
+
+const enabledKeys = computed(() => {
+  return props.columns
+    .filter(item => !item.disabled)
+    .map(item => item.prop)
+})
+
+watch(visible, val => {
+  if (val) {
+    checkedKeys.value = [...props.selectedKeys]
+    updateCheckAllStatus()
+  }
+})
+
+function handleCheckAllChange(val) {
+  const disabledCheckedKeys = props.columns
+    .filter(item => item.disabled && checkedKeys.value.includes(item.prop))
+    .map(item => item.prop)
+
+  checkedKeys.value = val
+    ? [...new Set([...disabledCheckedKeys, ...enabledKeys.value])]
+    : disabledCheckedKeys
+
+  updateCheckAllStatus()
+}
+
+function updateCheckAllStatus() {
+  const count = checkedKeys.value.filter(key =>
+    enabledKeys.value.includes(key)
+  ).length
+
+  checkAll.value = count === enabledKeys.value.length
+  isIndeterminate.value = count > 0 && count < enabledKeys.value.length
+}
+
+function handleConfirm() {
+  emit('confirm', checkedKeys.value)
+  visible.value = false
+}
+</script>
+
+<style scoped>
+.desc {
+  margin-bottom: 22px;
+  color: #666;
+  font-size: 16px;
+}
+
+.column-box {
+  border: 1px solid #dcdfe6;
+}
+
+.check-all-row {
+  padding: 18px 24px;
+  border-bottom: 1px solid #dcdfe6;
+}
+
+.column-list {
+  padding: 22px 24px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 22px 28px;
+}
+
+:deep(.el-checkbox) {
+  margin-right: 0;
+}
+</style>
+```
+
+- [ ] **Step 2: 验证文件创建成功**
+
+```bash
+ls -la frontEnd/src/components/TableColumnSettings.vue
+```
+Expected: 文件存在
+
+- [ ] **Step 3: 提交**
+
+```bash
+git add frontEnd/src/components/TableColumnSettings.vue
+git commit -m "feat: add TableColumnSettings component"
+```
+
+---
+
+### Task 2: 创建/更新 ColumnConfigDemoPage 页面
+
+**Files:**
+- Create/Modify: `frontEnd/src/pages/ColumnConfigDemoPage.vue`
+
+- [ ] **Step 1: 创建完整的演示页面（如果文件不存在则创建）**
+
+```vue
+<template>
+  <section class="page column-config-demo-page">
+    <h1 class="title">表格列配置演示</h1>
+    
+    <div class="toolbar">
+      <el-button type="primary">查询</el-button>
+      <el-button>重置</el-button>
+      
+      <!-- 列配置组件 -->
+      <TableColumnSettings
+        :columns="columnSettings"
+        :selected-keys="selectedKeys"
+        @confirm="onColumnConfirm"
+      />
+    </div>
+
+    <el-table
+      :key="tableKey"
+      :data="tableData"
+      border
+      stripe
+      size="small"
+      style="width: 100%"
+    >
+      <el-table-column type="index" label="序号" width="60" align="center" />
+      <el-table-column
+        v-for="col in visibleColumns"
+        :key="col.prop"
+        :prop="col.prop"
+        :label="col.label"
+        :width="col.width"
+        :min-width="col.minWidth"
+        :align="col.align || 'left'"
+        :fixed="col.fixed || false"
+      >
+      </el-table-column>
+    </el-table>
+
+    <div class="pagination">
+      <el-pagination
+        layout="total, prev, pager, next"
+        :current-page="page"
+        :page-size="pageSize"
+        :total="total"
+        @current-change="onPageChange"
+      />
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted } from 'vue'
+import TableColumnSettings from '../components/TableColumnSettings.vue'
+
+// 表格数据接口
+interface TableRow {
+  id: number
+  name: string
+  department: string
+  position: string
+  phone: string
+  email: string
+  joinDate: string
+  status: string
+}
+
+// 响应式数据
+const tableKey = ref(0)
+const page = ref(1)
+const pageSize = ref(10)
+const total = ref(50)
+const tableData = ref<TableRow[]>([])
+
+// 列配置 - 用于表格渲染
+const columns = reactive([
+  { key: 'name', prop: 'name', label: '姓名', width: 100 },
+  { key: 'department', prop: 'department', label: '部门', width: 120 },
+  { key: 'position', prop: 'position', label: '职位', width: 120 },
+  { key: 'phone', prop: 'phone', label: '电话', width: 140 },
+  { key: 'email', prop: 'email', label: '邮箱', minWidth: 180 },
+  { key: 'joinDate', prop: 'joinDate', label: '入职日期', width: 120, align: 'center' },
+  { key: 'status', prop: 'status', label: '状态', width: 100, align: 'center' }
+])
+
+// 列配置 - 用于列配置组件
+const columnSettings = computed(() => {
+  return columns.map(col => ({
+    prop: col.prop,
+    label: col.label,
+    disabled: col.prop === 'name'  // 姓名列强制显示，不可取消
+  }))
+})
+
+// 当前选中的列
+const selectedKeys = ref<string[]>([])
+
+// 可见列
+const visibleColumns = computed(() => {
+  return columns.filter(col => selectedKeys.value.includes(col.prop))
+})
+
+// 列配置确认
+const onColumnConfirm = (keys: string[]) => {
+  selectedKeys.value = keys
+  tableKey.value += 1  // 强制刷新表格
+}
+
+// 分页切换
+const onPageChange = (p: number) => {
+  page.value = p
+  loadData()
+}
+
+// 加载模拟数据
+const loadData = () => {
+  const data: TableRow[] = []
+  for (let i = 0; i < pageSize.value; i++) {
+    const index = (page.value - 1) * pageSize.value + i + 1
+    data.push({
+      id: index,
+      name: `员工${index}`,
+      department: ['技术部', '产品部', '运营部', '市场部'][index % 4],
+      position: ['开发工程师', '产品经理', '运营专员', '市场专员'][index % 4],
+      phone: `138${String(index).padStart(8, '0')}`,
+      email: `employee${index}@example.com`,
+      joinDate: `2024-${String((index % 12) + 1).padStart(2, '0')}-${String((index % 28) + 1).padStart(2, '0')}`,
+      status: ['在职', '离职', '休假'][index % 3]
+    })
+  }
+  tableData.value = data
+}
+
+onMounted(() => {
+  // 默认选中所有列
+  selectedKeys.value = columns.map(col => col.prop)
+  loadData()
+})
+</script>
+
+<style scoped>
+.page.column-config-demo-page {
+  padding: 16px;
+}
+.title {
+  font-size: 18px;
+  margin-bottom: 12px;
+}
+.toolbar {
+  margin-bottom: 12px;
+}
+.pagination {
+  margin-top: 12px;
+  text-align: right;
+}
+</style>
+```
+
+- [ ] **Step 2: 验证文件**
+
+```bash
+ls -la frontEnd/src/pages/ColumnConfigDemoPage.vue
+```
+Expected: 文件存在
+
+- [ ] **Step 3: 提交**
+
+```bash
+git add frontEnd/src/pages/ColumnConfigDemoPage.vue
+git commit -m "feat: update ColumnConfigDemoPage with TableColumnSettings"
+```
+
+---
+
+### Task 3: 添加路由配置（如未添加）
+
+**Files:**
+- Modify: `frontEnd/src/router/routes.js`
+
+- [ ] **Step 1: 检查并添加路由**
+
+如果 routes.js 中还没有 ColumnConfigDemo 路由，添加：
+
+在导入部分添加：
+```javascript
+import ColumnConfigDemoPage from '../pages/ColumnConfigDemoPage.vue'
+```
+
+在 routes 数组中添加：
+```javascript
+  {
+    path: '/column-config-demo',
+    name: 'ColumnConfigDemo',
+    component: ColumnConfigDemoPage,
+    meta: {
+      title: '表格列配置演示',
+      showInMenu: true
+    }
+  }
+```
+
+- [ ] **Step 2: 验证路由配置**
+
+```bash
+grep -n "ColumnConfigDemo" frontEnd/src/router/routes.js
+```
+
+- [ ] **Step 3: 提交**
+
+```bash
+git add frontEnd/src/router/routes.js
+git commit -m "feat: add column config demo route"
+```
+
+---
+
+### Task 4: 验证功能
+
+**Files:**
+- Test: 手动运行测试
+
+- [ ] **Step 1: 启动前端开发服务器**
+
+```bash
+npm run front-dev
+```
+Expected: 无编译错误，服务器正常启动
+
+- [ ] **Step 2: 手动验证功能**
+  1. 访问页面，点击"列配置"按钮
+  2. 确认弹窗显示所有列选项
+  3. 确认"姓名"列是禁用状态（不可取消）
+  4. 测试全选/取消全选
+  5. 测试部分选中，确认半选状态显示
+  6. 点击确认，表格列动态更新
+  7. 再次打开弹窗，确认状态保持
+
+---
+
+## 计划完成检查清单
+
+- [x] 组件代码完整
+- [x] 演示页面集成完整
+- [x] 文件路径正确
+- [x] 功能描述清晰