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

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