vue2server7 7.0.108 → 7.0.109

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] 功能描述清晰

package/docs/superpowers/specs/2026-05-13-table-column-config-demo-design.md

@@ -0,0 +1,74 @@
+---
+name: 表格列配置演示页面设计
+description: 新增表格列配置演示页面的设计文档
+type: project
+---
+
+# 表格列配置演示页面设计
+
+## 概述
+
+为前端项目新增一个"表格列配置演示"路由页面，提供基础的表格页面框架，预留列配置功能的扩展点。
+
+## 功能需求
+
+1. **基础表格页面**：包含标题、工具栏、表格组件、分页
+2. **模拟数据**：提供基础的表格数据和列配置数据结构
+3. **预留扩展点**：列设置按钮、预留列配置功能位置
+4. **路由配置**：在侧边栏菜单中显示"表格列配置演示"
+
+## 架构设计
+
+### 文件结构
+
+```
+frontEnd/src/
+├── pages/
+│   └── ColumnConfigDemoPage.vue    # 新增：列配置演示页面
+└── router/
+    └── routes.js                    # 修改：添加新路由
+```
+
+### 技术栈
+
+- Vue 3 + Composition API + TypeScript
+- Element Plus UI 组件库
+- vue-router 4.x
+
+## 实现步骤
+
+1. 创建 `ColumnConfigDemoPage.vue` 页面文件
+   - 基础页面结构（标题、工具栏、el-table、分页）
+   - 模拟列配置数据（含 key、label、width、align 等属性）
+   - 模拟表格数据
+   - 预留"列设置"按钮及相关 UI 位置
+
+2. 修改 `routes.js` 添加新路由
+   - 路径：/column-config-demo
+   - 名称：ColumnConfigDemo
+   - 菜单标题：表格列配置演示
+   - showInMenu: true
+
+## 数据结构
+
+### 列配置接口
+
+```typescript
+interface ColumnConfig {
+  key: string           // 列唯一标识
+  prop: string          // 数据字段名
+  label: string         // 列标题
+  width?: number        // 列宽
+  minWidth?: number     // 最小列宽
+  align?: 'left' | 'center' | 'right'
+  fixed?: boolean | 'left' | 'right'
+  sortable?: boolean | 'custom'
+  visible?: boolean     // 是否显示
+}
+```
+
+## 注意事项
+
+- 遵循现有页面的代码风格和目录结构
+- 列配置的具体实现逻辑由用户自行开发
+- 页面结构保持简洁，便于后续扩展

package/docs/superpowers/specs/2026-05-13-table-column-settings-component.md

@@ -0,0 +1,69 @@
+---
+name: 表格列配置组件设计
+description: 集成 TableColumnSettings 列配置组件到项目
+type: project
+---
+
+# 表格列配置组件设计
+
+## 概述
+
+将用户提供的 TableColumnSettings 列配置组件集成到项目中，并更新 ColumnConfigDemoPage 演示页面使用该组件。
+
+## 功能需求
+
+1. **TableColumnSettings 组件**
+   - 弹窗形式的列配置面板
+   - 支持全选/反选、多选框组
+   - 支持禁用某些列（不可取消选中）
+   - 确认后触发事件返回选中的列 keys
+   - 自定义按钮文本
+
+2. **演示页面集成**
+   - 在 ColumnConfigDemoPage 中使用列配置组件
+   - 实现列显示/隐藏的动态更新
+   - 支持强制显示的列（disabled）
+
+## 架构设计
+
+### 文件结构
+
+```
+frontEnd/src/
+├── components/
+│   └── TableColumnSettings.vue       # 新增：列配置组件
+└── pages/
+    └── ColumnConfigDemoPage.vue      # 修改：集成组件
+```
+
+## 组件接口
+
+### Props
+
+| 名称 | 类型 | 说明 | 默认值 |
+|------|------|------|--------|
+| columns | Array | 列配置数组，每项需包含 prop、label、disabled | [] |
+| selectedKeys | Array | 当前选中的列 key 数组 | [] |
+| buttonText | String | 按钮显示文本 | '列配置' |
+
+### Events
+
+| 名称 | 参数 | 说明 |
+|------|------|------|
+| confirm | selectedKeys | 用户点击确认时触发，返回选中的列 keys 数组 |
+
+### Column 数据结构
+
+```javascript
+{
+  prop: 'name',        // 列唯一标识
+  label: '姓名',       // 列显示名称
+  disabled: false      // 是否禁用（禁用的列始终显示，不可取消选中）
+}
+```
+
+## 实现步骤
+
+1. 创建 `TableColumnSettings.vue` 组件
+2. 更新 `ColumnConfigDemoPage.vue` 集成组件
+3. 验证功能正常工作

package/frontEnd/src/components/TableColumnSettings.vue

@@ -0,0 +1,296 @@
+<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>
+// 导入 Vue 组合式 API
+import { ref, computed, watch } from 'vue'
+// 导入 Element Plus 图标
+import { Setting } from '@element-plus/icons-vue'
+
+/**
+ * 组件 Props 定义
+ */
+const props = defineProps({
+  /**
+   * 列配置数组
+   * 每个对象包含:
+   *   - prop: 列唯一标识（对应表格列的 prop）
+   *   - label: 列显示名称
+   *   - disabled: 是否禁用（禁用的列始终显示，不可取消选中）
+   */
+  columns: {
+    type: Array,
+    default: () => []
+  },
+  /**
+   * 当前选中的列 key 数组
+   * 用于外部控制初始选中状态
+   */
+  selectedKeys: {
+    type: Array,
+    default: () => []
+  },
+  /**
+   * 按钮显示文本
+   * 可自定义按钮文字，默认"列配置"
+   */
+  buttonText: {
+    type: String,
+    default: '列配置'
+  },
+  /**
+   * localStorage 存储键名
+   * 设置后会自动将列配置持久化到浏览器本地存储
+   * 刷新页面后配置自动恢复
+   */
+  storageKey: {
+    type: String,
+    default: ''
+  }
+})
+
+/**
+ * 组件 Events 定义
+ * confirm: 用户点击确认按钮时触发，参数为选中的列 key 数组
+ */
+const emit = defineEmits(['confirm'])
+
+// ==================== 响应式状态 ====================
+
+/**
+ * 弹窗显示/隐藏状态
+ * true: 弹窗打开
+ * false: 弹窗关闭
+ */
+const visible = ref(false)
+
+/**
+ * 当前选中的列 key 数组
+ * 存储用户在弹窗中勾选的列 prop
+ */
+const checkedKeys = ref([])
+
+/**
+ * 全选复选框状态
+ * true: 全部选中
+ * false: 全部未选中
+ */
+const checkAll = ref(false)
+
+/**
+ * 半选状态标识
+ * true: 部分选中（显示减号）
+ * false: 全选或全不选
+ */
+const isIndeterminate = ref(false)
+
+// ==================== 计算属性 ====================
+
+/**
+ * 可操作的列 key 数组
+ * 过滤掉 disabled = true 的列
+ * 这些列可以被用户自由勾选/取消
+ */
+const enabledKeys = computed(() => {
+  return props.columns
+    .filter(item => !item.disabled)
+    .map(item => item.prop)
+})
+
+// ==================== 监听器 ====================
+
+/**
+ * 监听弹窗打开状态
+ * 弹窗打开时：
+ * 1. 优先从 localStorage 读取保存的配置
+ * 2. 没有存储则使用外部传入的 selectedKeys
+ * 3. 更新全选/半选状态
+ */
+watch(visible, val => {
+  if (val) {
+    // 优先从 localStorage 读取，其次使用 props
+    if (props.storageKey) {
+      const stored = localStorage.getItem(props.storageKey)
+      if (stored) {
+        try {
+          checkedKeys.value = JSON.parse(stored)
+        } catch {
+          // JSON 解析失败时回退到默认值
+          checkedKeys.value = [...props.selectedKeys]
+        }
+      } else {
+        checkedKeys.value = [...props.selectedKeys]
+      }
+    } else {
+      checkedKeys.value = [...props.selectedKeys]
+    }
+    // 更新全选复选框状态
+    updateCheckAllStatus()
+  }
+})
+
+// ==================== 方法 ====================
+
+/**
+ * 全选/取消全选处理函数
+ * @param {boolean} val - 全选框当前值
+ *
+ * 逻辑说明:
+ * - 全选时：所有可操作列 + 已选中的禁用列 都被选中
+ * - 取消全选时：只保留禁用列中已选中的项
+ */
+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()
+}
+
+/**
+ * 更新全选和半选状态
+ *
+ * 计算逻辑:
+ * 1. 统计可操作列中已选中的数量
+ * 2. 数量 = 总数 → 全选
+ * 3. 0 < 数量 < 总数 → 半选
+ * 4. 数量 = 0 → 全不选
+ */
+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
+}
+
+/**
+ * 确认按钮处理函数
+ *
+ * 逻辑:
+ * 1. 如果设置了 storageKey，将配置保存到 localStorage
+ * 2. 触发 confirm 事件，通知父组件
+ * 3. 关闭弹窗
+ */
+function handleConfirm() {
+  // 保存到 localStorage 持久化
+  if (props.storageKey) {
+    localStorage.setItem(props.storageKey, JSON.stringify(checkedKeys.value))
+  }
+  // 通知父组件选中结果
+  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;
+}
+
+/**
+ * 列列表样式
+ * flex 布局自动换行
+ */
+.column-list {
+  padding: 22px 24px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 22px 28px;
+}
+
+/**
+ * 覆盖 Element Plus 默认复选框右边距
+ * 因为使用 gap 控制间距，不需要默认的 margin-right
+ */
+:deep(.el-checkbox) {
+  margin-right: 0;
+}
+</style>

package/frontEnd/src/pages/ColumnConfigDemoPage.vue

@@ -0,0 +1,166 @@
+<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"
+        storage-key="column-config-demo"
+        @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(() => {
+  // 从 localStorage 读取配置，没有则默认全选
+  const storageKey = 'column-config-demo'
+  const stored = localStorage.getItem(storageKey)
+  if (stored) {
+    try {
+      selectedKeys.value = JSON.parse(stored)
+    } catch {
+      selectedKeys.value = columns.map(col => col.prop)
+    }
+  } else {
+    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>

package/frontEnd/src/router/routes.js

@@ -6,6 +6,7 @@ import PositionReportPage from '../pages/PositionReportPage.vue'
 import DateRangePage from '../pages/DateRangePage.vue'
 import OrgTreeSelectPage from '../pages/OrgTreeSelectPage.vue'
 import MoneyInputPage from '../pages/MoneyInputPage.vue'
+import ColumnConfigDemoPage from '../pages/ColumnConfigDemoPage.vue'
 
 export const routes = [
   {
@@ -83,5 +84,14 @@ export const routes = [
       title: '金额输入',
       showInMenu: true
     }
+  },
+  {
+    path: '/column-config-demo',
+    name: 'ColumnConfigDemo',
+    component: ColumnConfigDemoPage,
+    meta: {
+      title: '表格列配置演示',
+      showInMenu: true
+    }
   }
 ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2server7",
-  "version": "7.0.108",
+  "version": "7.0.109",
   "description": "",
   "scripts": {
     "dev": "nodemon --watch src --ext ts --exec \"ts-node src/app.ts\"",