maooc · maooc · Apr 12, 2026
diff --git a/.gitignore b/.gitignore
@@ -6,3 +6,32 @@ yarn-debug.log*
 yarn-error.log*
 .vscode
 /src/config.js
+# Dependency and build artifacts
+**/node_modules/
+.pnpm-store/
+**/.pnpm-store/
+.yarn/cache/
+**/.yarn/cache/
+.npm/
+**/.npm/
+bower_components/
+**/bower_components/
+vendor/bundle/
+**/vendor/bundle/
+.venv/
+**/.venv/
+venv/
+**/venv/
+__pycache__/
+**/__pycache__/
+*.pyc
+coverage/
+**/coverage/
+.turbo/
+**/.turbo/
+.cache/
+**/.cache/
+.parcel-cache/
+**/.parcel-cache/
+.vite/
+**/.vite/
diff --git a/组件系统设计分析.md b/组件系统设计分析.md
@@ -0,0 +1,46 @@
+# Adminify 组件系统设计分析报告
+
+## 一、组件协作与数据流
+
+三个核心组件采用分层职责设计，形成清晰的父子嵌套关系：
+
+**Grid.vue → Form.vue → Field.vue**
+
+1. **Grid.vue** 作为列表页面容器，内置筛选区通过 `<v-form>` 组件复用表单能力，搜索时通过 `@submit="doSearch"` 接收 Form 提交事件，将筛选条件序列化到 URL query 中触发数据刷新。
+
+2. **Form.vue** 作为字段管理器，通过 `v-model` 实现与父组件双向绑定，内部遍历 `fields` 配置渲染多个 `<v-field>`，每个 Field 通过 `v-model="model[name]"` 与 Form 的 model 对象对应字段绑定。
+
+3. **Field.vue** 利用计算属性 `model` 的 get/set 实现 `value` prop 到 `input` 事件的转换，遵循 Vue 2 的 v-model 契约完成数据同步。
+
+## 二、Form.vue 的 groupBy 分组设计
+
+**解决场景**：复杂表单字段过多时，通过标签页分组优化用户体验，避免单页过长。
+
+**实现机制**：通过 computed `group()` 将平摊字段配置转换为树形结构：
+- 遍历所有 fields，以 `groupBy` 指定字段（如 `id`）为分组依据
+- `field[this.groupBy] === null` 的字段作为父标签页
+- 其余字段根据 `ref` 值归集到对应父分组下
+- 最终渲染为 `v-tabs` 标签页组件，每个 tab 内渲染归属于它的 Field
+
+## 三、Field.vue 多类型渲染策略
+
+采用**条件渲染策略模式**，在 template 中通过 `v-if/v-else-if` 链式分支根据 `field.type` 渲染不同控件：
+- 基础类型：select、radios、checkboxes、date/time/datetime
+- 复杂类型：html（富文本）、file/image/video（文件上传）
+- 默认降级：v-text-field 支持 textarea
+
+**新增字段类型改动点**：
+1. Field.vue 模板中增加对应 `v-else-if` 分支
+2. 如需特殊交互，补充 methods 或 computed
+
+## 四、Grid.vue 点号路径支持设计
+
+`getColumnData` 通过 `field.split('.')` 解析嵌套对象路径，如 `type.name`。
+
+**设计目的**：支持关联模型数据展示，适配后端 ORM 关联查询返回的嵌套结构。
+
+**优缺点**：
+- ✅ 实现简单，仅支持二级嵌套满足多数后台场景
+- ❌ 不支持更深层级嵌套，硬编码分割健壮性不足
+
+**总结**：该系统通过职责分层 + 约定式配置驱动，实现了高复用的后台 CRUD 基础组件。