vue2server7 7.0.110 → 7.0.112

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

@@ -1,443 +0,0 @@
-# 表格列配置组件 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

@@ -1,74 +0,0 @@
----
-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

@@ -1,69 +0,0 @@
----
-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. 验证功能正常工作