vue2server7 7.0.108 → 7.0.110

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/BaseTable.vue

@@ -0,0 +1,296 @@
+<template>
+  <div class="base-table-wrapper">
+    <!-- 工具栏区域 -->
+    <div class="table-toolbar" v-if="showToolbar">
+      <slot name="toolbar">
+        <!-- 列配置按钮 -->
+        <TableColumnSettings
+          :columns="columnSettings"
+          :selected-keys="selectedKeys"
+          :storage-key="storageKey"
+          @confirm="onColumnConfirm"
+        />
+      </slot>
+    </div>
+
+    <!-- 表格主体 -->
+    <el-table
+      ref="tableRef"
+      :key="tableKey"
+      v-bind="$attrs"
+      :data="data"
+      border
+      stripe
+      size="small"
+      style="width: 100%"
+      v-on="$listeners"
+    >
+      <!-- 序号列（可选） -->
+      <el-table-column
+        v-if="showIndex"
+        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'"
+        :header-align="col.headerAlign || col.align || 'left'"
+        :sortable="col.sortable || false"
+        :fixed="col.fixed || false"
+      >
+        <!-- 自定义列插槽（格式为 column-xxx，xxx 是列的 prop） -->
+        <template #default="scope">
+          <slot :name="'column-' + col.prop" v-bind="scope">
+            {{ scope.row[col.prop] }}
+          </slot>
+        </template>
+      </el-table-column>
+
+      <!-- 操作列（插槽） -->
+      <slot name="action-column" />
+    </el-table>
+
+    <!-- 分页区域（可选） -->
+    <div class="table-pagination" v-if="showPagination && total > 0">
+      <el-pagination
+        layout="total, prev, pager, next"
+        :current-page="currentPage"
+        :page-size="pageSize"
+        :total="total"
+        @current-change="onPageChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, useAttrs } from 'vue'
+import TableColumnSettings from './TableColumnSettings.vue'
+
+// 列配置接口
+interface ColumnConfig {
+  prop: string           // 列唯一标识（必填）
+  label: string          // 列显示名称（必填）
+  width?: number         // 列宽
+  minWidth?: number      // 最小列宽
+  align?: 'left' | 'center' | 'right'  // 对齐方式
+  headerAlign?: 'left' | 'center' | 'right'  // 表头对齐
+  sortable?: boolean | 'custom'  // 是否可排序
+  fixed?: boolean | 'left' | 'right'  // 是否固定
+  disabled?: boolean     // 是否禁用（禁用的列始终显示，不可取消）
+}
+
+// 组件 Props 定义
+const props = defineProps({
+  /**
+   * 表格数据
+   */
+  data: {
+    type: Array,
+    default: () => []
+  },
+  /**
+   * 列配置数组
+   */
+  columns: {
+    type: Array as () => ColumnConfig[],
+    default: () => []
+  },
+  /**
+   * 是否显示序号列
+   */
+  showIndex: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 是否显示工具栏
+   */
+  showToolbar: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 是否显示分页
+   */
+  showPagination: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 当前页码
+   */
+  currentPage: {
+    type: Number,
+    default: 1
+  },
+  /**
+   * 每页条数
+   */
+  pageSize: {
+    type: Number,
+    default: 10
+  },
+  /**
+   * 总条数
+   */
+  total: {
+    type: Number,
+    default: 0
+  },
+  /**
+   * localStorage 存储键名
+   * 用于持久化用户的列配置
+   * 不设置则不持久化
+   */
+  storageKey: {
+    type: String,
+    default: ''
+  }
+})
+
+// 组件 Events 定义
+const emit = defineEmits<{
+  (e: 'update:currentPage', page: number): void
+  (e: 'pageChange', page: number): void
+}>()
+
+// ==================== 响应式状态 ====================
+
+/**
+ * el-table 实例引用
+ * 可以通过 ref 调用 Element Plus 表格的原生方法
+ */
+const tableRef = ref()
+
+/**
+ * 表格 key，用于强制刷新表格
+ * 列配置变更后更新此值，触发表格重新渲染
+ */
+const tableKey = ref(0)
+
+/**
+ * 当前选中的列 key 数组
+ * 存储用户选择显示的列 prop
+ */
+const selectedKeys = ref<string[]>([])
+
+// ==================== 计算属性 ====================
+
+/**
+ * 列配置组件需要的数据格式
+ * 只提取列配置组件需要的三个字段
+ */
+const columnSettings = computed(() => {
+  return props.columns.map(col => ({
+    prop: col.prop,
+    label: col.label,
+    disabled: col.disabled || false
+  }))
+})
+
+/**
+ * 当前可见的列
+ * 根据 selectedKeys 过滤出用户选择显示的列
+ */
+const visibleColumns = computed(() => {
+  return props.columns.filter(col => selectedKeys.value.includes(col.prop))
+})
+
+// ==================== 方法 ====================
+
+/**
+ * 列配置确认回调
+ * @param keys - 用户选中的列 prop 数组
+ *
+ * 逻辑:
+ * 1. 更新选中的列
+ * 2. 更新 tableKey 强制表格重新渲染
+ */
+const onColumnConfirm = (keys: string[]) => {
+  selectedKeys.value = keys
+  tableKey.value += 1  // 强制刷新表格
+}
+
+/**
+ * 分页切换回调
+ * @param page - 目标页码
+ *
+ * 触发两个事件:
+ * 1. update:currentPage - 支持 v-model:currentPage
+ * 2. pageChange - 普通分页变更事件
+ */
+const onPageChange = (page: number) => {
+  emit('update:currentPage', page)
+  emit('pageChange', page)
+}
+
+// ==================== 生命周期 ====================
+
+/**
+ * 组件挂载时初始化
+ *
+ * 逻辑:
+ * 1. 如果设置了 storageKey，从 localStorage 读取保存的配置
+ * 2. 读取失败或没有存储，则默认显示所有列
+ */
+onMounted(() => {
+  if (props.storageKey) {
+    const stored = localStorage.getItem(props.storageKey)
+    if (stored) {
+      try {
+        selectedKeys.value = JSON.parse(stored)
+      } catch {
+        // 解析失败，默认显示所有列
+        selectedKeys.value = props.columns.map(col => col.prop)
+      }
+    } else {
+      // 没有存储，默认显示所有列
+      selectedKeys.value = props.columns.map(col => col.prop)
+    }
+  } else {
+    // 没有设置 storageKey，默认显示所有列
+    selectedKeys.value = props.columns.map(col => col.prop)
+  }
+})
+
+// 暴露 el-table 实例给父组件，方便调用原生方法
+defineExpose({
+  tableRef
+})
+</script>
+
+<style scoped>
+/**
+ * 表格外层容器
+ */
+.base-table-wrapper {
+  width: 100%;
+}
+
+/**
+ * 工具栏样式
+ * 位于表格上方，包含操作按钮等
+ */
+.table-toolbar {
+  margin-bottom: 12px;
+}
+
+/**
+ * 分页容器样式
+ * 位于表格下方，右对齐
+ */
+.table-pagination {
+  margin-top: 12px;
+  text-align: right;
+}
+</style>