20260809223428

code/fms/.workbuddy/memory/2026-08-08.md

@@ -0,0 +1,47 @@
+## 2026-08-08
+
+### 创建国外 ERP 布局模式 Demo
+- 在 `erp-layout-patterns-demo.html` 中展示了三种国外 ERP 经典布局模式：
+  1. **Master-Detail（SAP Fiori 风格）**：左侧分类树 + 右侧卡片式表单 + 底部固定操作栏
+  2. **Record Page（Salesforce 风格）**：无边框分段 + 左侧 accent 高亮 + 顶部保存
+  3. **Notebook（Odoo 风格）**：居中纸张式表单
+- Demo 包含可切换的布局模式、可展开/收起的树节点、设计标注开关、粘性保存栏等交互
+- 总结了国外 ERP 好用的核心设计原则：卡片分区、Tab 组织、Toggle 替代下拉、固定操作栏、适量留白
+
+### 创建完整后台管理系统 Demo
+- 在 `admin-panel-full-demo.html` 中实现了完整的后台管理系统布局：
+  - **Topbar**：Logo、全局搜索（focus 展开）、通知铃铛（红点）、语言切换、用户头像下拉菜单
+  - **Sidebar**：可折叠菜单（收起后仅图标 + tooltip 效果）、分组标签（数据管理/系统管理）、展开式子菜单
+  - **Tab 导航**：多页签切换、点击关闭按钮关闭页签、至少保留一个页签
+  - **面包屑**：每页独立的面包屑导航
+  - **分类树**：页面内左侧分类过滤面板（可展开/收起子节点、搜索、新建）
+  - **内容区**：统计卡片行、筛选栏（Filter Bar）、数据表格 + 分页、表单卡片（多列网格 + Toggle 开关）
+  - **底部状态栏**：版本号和版权信息
+- 共 8 个完整页面（工作台、合作伙伴、产品管理、模块管理、用户管理、角色权限、多语言、操作日志）
+
+### 重写为国际化风格（SAP Fiori / Salesforce 风格）
+- 用户反馈第一版"像中国风"，完全重写 `admin-panel-full-demo.html`：
+  - **图标**：所有 emoji 替换为 SVG stroke icon（16x16/18x18 viewBox），保持单色、统一的线条风格
+  - **配色**：去除彩色标签，仅保留蓝色作为 accent color；状态色降低饱和度
+  - **边框**：去除硬边框（`border:1px solid` 改为 `box-shadow` 微阴影），分隔线改用 `border-subtle` (#edf0f5)
+  - **菜单**：英文标签（Partner/Products/Operations 等），分组用全大写 + 字间距（SAP Fiori 惯例）
+  - **间距**：增大页面留白（padding:20px 28px），卡片内部 padding:18px
+  - **表格**：去除斑马纹，仅 hover 高亮；表头用浅灰 `var(--sidebar-bg)`
+  - **按钮**：ghost button（无边框）用于表格操作，hover 时才显示背景
+  - **卡片**：`box-shadow: 0 1px 4px rgba(20,25,40,.04)` 替代 `border`，实现"靠阴影而非线条分隔"
+  - **设计标注**：右下角 `?` 按钮可开关标注提示
+
+### 改写为 shadcn/ui 风格
+- 用户要求"主题色 shadcn"，完全重构设计令牌体系：
+  - **HSL 色彩系统**：使用 shadcn 标准 HSL 分量格式（如 `--primary: 222.2 47.4% 11.2%`）
+  - **Inter 字体**：Google Fonts 引入 Inter，作为首选字体栈
+  - **深色侧栏**：sidebar 背景 `222.2 47.4% 8%`（接近黑），浅色文字
+  - **回归边框**：shadcn 不是无边框设计——卡片、输入框、表格都有 `border:1px solid hsl(var(--border))`
+  - **主色变深**：primary 从亮蓝改为接近黑色的中性色（shadcn default）
+  - **状态色**：HSL 高饱和度低亮度，badge 柔和且清晰
+  - **border-radius**：统一 `var(--radius) = 0.5rem`
+
+### AppToolbar 添加全局搜索占位
+- 在 `AppToolbar.vue` 的面包屑和右侧操作区之间添加了搜索输入框
+- 使用 Lucide `Search` 图标 + pill 形输入框（`border-radius: 15px`），focus 时边框变黑 + 微阴影
+- 仅占位，无实际搜索逻辑