@suzhou-lab/page-components 1.0.0 → 1.0.1

package/README.md

@@ -46,23 +46,23 @@ npm install 装组件 → npx install-skills 部署技能 → 组件和AI技能
 
 ```
 ┌──────────────────────────────────────────┐
-│  #aside（可选）     │  主区域              │
-│  左侧面板           │  ┌────────────────┐ │
-│                    │  │ #filter 筛选区  │ │
-│                    │  ├────────────────┤ │
-│                    │  │ #toolbar 工具栏 │ │
-│                    │  ├────────────────┤ │
-│                    │  │  default slot  │ │
-│                    │  │  <el-table>    │ │
-│                    │  ├────────────────┤ │
-│                    │  │ #pagination    │ │
+│  #aside（可选）     │  主区域              │  #right（可选）      │
+│  左侧面板           │  ┌────────────────┐ │  右侧面板            │
+│                    │  │ #filter 筛选区  │ │                    │
+│                    │  ├────────────────┤ │                    │
+│                    │  │ #toolbar 工具栏 │ │                    │
+│                    │  ├────────────────┤ │                    │
+│                    │  │  default slot  │ │                    │
+│                    │  │  <el-table>    │ │                    │
+│                    │  ├────────────────┤ │                    │
+│                    │  │ #pagination    │ │                    │
 │                    │  └────────────────┘ │
 └──────────────────────────────────────────┘
 ```
 
 核心能力：
 - **自动计算表格高度**：通过 `ResizeObserver` 监听容器变化，提供 `tableHeight` 给表格 `:height` 绑定
-- **插槽驱动**：`#filter`、`#toolbar`、`#pagination`、`#aside` 四个插槽，按需使用
+- **插槽驱动**：`#filter`、`#toolbar`、`#pagination`、`#aside`、`#right` 五个插槽，按需使用
 
 ### 2.3 filter-form：配置驱动筛选
 
@@ -82,7 +82,7 @@ filterItems() {
 
 支持的 `type`：`input`、`select`、`yearpicker`、`monthpicker`、`datepicker`、`daterange`、`cascader`、`custom`。
 
-高级特性：条件显隐（`visible`）、联动回调（`onChange`）、折叠展开（超过一行自动折叠）。
+高级特性：条件显隐（`visible`）、联动回调（`onChange`）、折叠展开（超过一行自动折叠）、列数配置（`columns` 属性）。
 
 ---
 
@@ -497,3 +497,74 @@ npx install-skills
 - `collect-ui`（采集）
 - `review-ui`（评审）
 - 其他基于 Vue 2 + Vue CLI 3 + Element UI + qiankun 的微应用
+
+---
+
+## 9. 组件 API
+
+### 9.1 `<list-page>`
+
+**Props**
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `asideWidth` | `String` | `'240px'` | 左侧面板宽度 |
+
+**Slots**
+
+| 插槽 | 说明 |
+|------|------|
+| `#aside` | 左侧面板，有内容时自动显示 |
+| `#filter` | 筛选区，放 `<filter-form>` |
+| `#toolbar` | 工具栏按钮区 |
+| default | 主内容区，放 `<el-table>` |
+| `#pagination` | 分页区 |
+| `#right` | 右侧面板，如"已选项目列表"等并排面板 |
+
+**Provide**
+
+| 注入值 | 说明 |
+|--------|------|
+| `listPage.tableHeight` | 动态计算的表格可用高度，表格通过 `inject` + `:height="tableHeight"` 绑定 |
+
+### 9.2 `<filter-form>`
+
+**Props**
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `items` | `Array` | `[]` | 筛选项配置数组，每项见下方 Item 字段 |
+| `model` / `v-model` | `Object` | `{}` | 筛选数据双向绑定 |
+| `columns` | `Number` | `4` | 每行列数：`3`（一行 3 个）或 `4`（一行 4 个） |
+| `collapsed` | `Boolean` | `true` | 初始是否折叠 |
+| `defaultRowCount` | `Number` | `1` | 折叠时显示的行数 |
+| `loading` | `Boolean` | `false` | 查询按钮 loading 状态 |
+| `labelWidth` | `String` | `'112px'` | 标签宽度 |
+
+**Events**
+
+| 事件 | 参数 | 说明 |
+|------|------|------|
+| `@search` | `model` | 点击查询按钮，参数为当前筛选数据 |
+| `@reset` | `model` | 点击重置按钮，参数为重置后的筛选数据 |
+
+**Item 配置字段**
+
+| 字段 | 类型 | 说明 |
+|------|------|------|
+| `label` | `String` | 标签文本 |
+| `prop` | `String` | 绑定到 model 的字段名 |
+| `type` | `String` | 控件类型：`input` \| `select` \| `yearpicker` \| `monthpicker` \| `datepicker` \| `daterange` \| `cascader` \| `custom` |
+| `span` | `Number` | 栅格宽度（默认 `24 / columns`），如 `8`（3 列）或 `6`（4 列） |
+| `options` | `Array \| Function` | 选项列表，格式 `[{ value, label }]`，支持函数动态返回 |
+| `visible` | `Boolean \| Function` | 条件显隐，支持函数动态判断 |
+| `onChange` | `Function` | 值变化回调，参数 `(value, model)` |
+| `placeholder` | `String` | 占位文本 |
+| `clearable` | `Boolean` | 是否可清空（默认 `true`） |
+| `filterable` | `Boolean` | 是否可搜索（select/cascader 默认 `true`） |
+| `disabled` | `Boolean` | 是否禁用 |
+| `multiple` | `Boolean` | 是否多选（select） |
+| `cascaderProps` | `Object` | cascader 的 `:props` 配置 |
+| `valueFormat` | `String` | 日期控件值格式 |
+| `component` | `Component` | 自定义组件（type=`custom` 时） |
+| `attrs` | `Object` | 自定义组件的额外属性 |

package/filter-form.vue

@@ -2,7 +2,7 @@
   <div class="filter-form" ref="filterForm">
     <el-form :inline="false" label-position="right">
       <el-row type="flex" :gutter="16">
-        <el-col v-for="(item, idx) in visibleItems" :key="item.prop || idx" :span="item.span || 6"
+        <el-col v-for="(item, idx) in visibleItems" :key="item.prop || idx" :span="item.span || defaultSpan"
           :class="{ 'is-hidden': !getItemVisible(item) }">
           <el-form-item :label="item.label" :label-width="labelWidth">
             <el-input v-if="item.type === 'input'" v-model="internalModel[item.prop]"
@@ -95,6 +95,11 @@ export default {
       type: Boolean,
       default: true
     },
+    // 列数：3（一行3个）或 4（一行4个），默认 4
+    columns: {
+      type: Number,
+      default: 4
+    },
     defaultRowCount: {
       type: Number,
       default: 1
@@ -115,8 +120,11 @@ export default {
     }
   },
   computed: {
+    defaultSpan() {
+      return 24 / this.columns
+    },
     colsPerRow() {
-      return 24 / ((this.items[0] && this.items[0].span) || 6)
+      return this.columns
     },
     maxVisible() {
       return this.defaultRowCount * this.colsPerRow

package/list-page.vue

@@ -22,6 +22,9 @@
         </div>
       </el-card>
     </el-main>
+    <template v-if="$slots.right">
+      <slot name="right" />
+    </template>
   </el-container>
 </template>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suzhou-lab/page-components",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "苏州实验室 UMC 微应用统一列表页面组件 — list-page 布局容器 + filter-form 配置驱动筛选表单，附带 AI 改造技能",
   "main": "index.js",
   "bin": {