## 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 时边框变黑 + 微阴影 - 仅占位,无实际搜索逻辑