djm-ui 0.67.4 → 0.72.0

package/CHANGELOG.md

@@ -1,5 +1,108 @@
 # 更新日志
 
+## 0.72.0
+
+组件库接入 AI 助手（MCP）：
+
+- 新增 MCP 服务 `djm-ui-mcp`：AI 助手可直接查询组件清单、props、事件、插槽、示例与 DSL
+- 提供 8 个工具：组件清单、组件文档、属性表、关键词搜索、使用示例、组件 DSL、安装接入、版本信息
+- manifest 由文档页在构建时生成，随包版本发布，避免文档和代码脱节
+- 新增 `npm run build:mcp` / `check:mcp` / `test:mcp`，`npm test` 增加 MCP 数据校验
+- 文档站新增「AI 助手 · MCP」页，含 Cursor / Trae / Claude Code 配置示例；快速开始补第 9 节
+- README 与文档里的 CDN 示例版本号同步到当前版本
+
+## 0.71.3
+
+- 双列菜单模式下 logo 在 104px 一级列内居中，和下方菜单图标对齐；窄屏退回单列时恢复左对齐与品牌文字
+
+## 0.71.2
+
+- 预设「深蓝侧栏」更名为「深色侧栏」，不再和可自定义的主题色冲突
+- 深色侧栏 / 暗色主题下，侧栏选中态按当前主色推导底色与文字：青碧、紫罗兰、朱砂红、墨绿各呈现本色调，不再统一压成近黑
+- 选中底色按色相自动下压明度，五种预设主色实测对比度均在 4.6:1 以上
+
+## 0.71.1
+
+- 双列菜单收窄：侧栏由 344px 调到 296px，二级列 192px，内容区多出 48px；超长菜单名截断时 hover 可看全称
+
+## 0.71.0
+
+应用外壳支持主题组合与多种导航形态：
+
+- 皮肤面板新增「主题预设」：经典浅色、深海夜色、深蓝侧栏、混合导航、顶部通栏、双列菜单，一键切换
+- 侧栏配色与全局明暗解耦，可选跟随 / 浅色 / 深色 / 品牌色，实现「左深右浅」「左浅右深」；侧栏色阶按当前主色推导，换主色同步变化
+- 新增混合导航：顶部通栏放一级菜单，左侧只放当前一级的二级菜单
+- 新增双列菜单：左侧一级一列、二级一列，三层菜单用分组标题展示；平板宽度自动退回单列
+- 顶部通栏收紧一级菜单内边距，8 个分组不再被省略号截断
+- 皮肤面板补键盘焦点样式；各组合在浅色 / 深色下 axe 扫描均 0 违规
+
+## 0.70.2
+
+全局体检一轮，修掉几处隐藏的样式与无障碍问题：
+
+- 补上 `--djm-tooltip-bg` 令牌。此前变量名写了但没定义，Tooltip 背景是透明的，白字直接浮在页面上；暗色主题单独给一个略亮的灰
+- 新增 `--djm-font-sans` / `--djm-font-mono` 令牌，宿主页面改这两个变量就能换字体
+- 文字按钮改用品牌深色档，批量操作条的「全选 / 取消」在暗色底上恢复 4.5:1
+- 菜单角标底色改用 `--djm-red-strong`，暗色下白字不再发虚
+- 数据字典选中项的编码文字跟随标题变深；登录分栏模板暗色改为深蓝渐变，白字可读
+- 去掉不存在的 `--djm-radius-md`、`--djm-brand-400`，统一使用 `--djm-radius` 与 `--djm-brand-500`
+- 143 个路由浅色 / 暗色 axe 扫描 0 违规，142 项组件单测通过，390 宽无横向溢出
+
+## 0.70.1
+
+- 参数设置页「版权信息」默认值由「东吴科技」改为「多聚米科技」，「恢复默认」也同步生效
+
+## 0.70.0
+
+示例覆盖面与新编辑器能力：
+
+- 富文本工具栏拆出「插入单图」「插入多图」两个按钮，`multiple` 关闭时多图按钮自动隐藏
+- 新增 `media` 属性与「从素材库选择」：复用媒体库选择器（搜索、分页、多选），选中后按顺序插到光标处，地址同样校验协议
+- 新增示例页「文件管理器」：目录切换、搜索、全选、上传、重命名、下载、删除与图片预览
+- 新增示例页「图片相册」：相册分类、多选、上传、批量删除、大图预览与上一张 / 下一张
+- 应用菜单加「内容管理」分组，文档站「示例应用」补两个入口；相册素材使用本地 SVG，离线也能正常显示
+- 新增 1 项编辑器单测（单图 / 多图按钮与素材库插入），浏览器单测 142 项全部通过
+
+## 0.69.0
+
+富文本编辑器补上可配置工具条，并做了一轮安全加固：
+
+- 新增 `toolbar` 预设：`simple` / `basic` / `full`，也可传分组数组（history / format / inline / color / align / list / insert / view）自行组合
+- 文档站提供三档在线示例，并补充工具条配置与安全说明
+- 输出默认开启白名单清洗（`sanitize` 默认 true），内容完全可信时可显式关闭
+- 链接只允许 http(s) / mailto / tel / 站内相对地址；上传接口返回的地址校验协议，拒绝 `javascript:` 等
+- 图片与链接改用 DOM 节点插入，文件名、地址不再拼进 HTML 字符串，避免属性注入
+- `sanitizeHtml` 协议改为白名单（http/https/mailto/tel，图片额外放行 data:image / blob），样式仍按排版白名单过滤
+- 新增 5 项编辑器单测：工具条预设、默认清洗、上传地址校验、文件名注入，浏览器单测 141 项全部通过
+
+## 0.68.1
+
+- 「局部刷新分页 1」页按 DWZ 习惯补上表格工具栏：添加检测、编辑、删除、导出放在表格上方，勾选行后才能操作
+- 表格增加勾选列与选中高亮，新增单行编辑弹窗（改用检测医生 / 结果 / 状态）；删除分单条与批量确认
+- 导出当前筛选结果为 CSV（带 BOM，Excel 直接打开不乱码），切换检测类型、查询、翻页都会清空选择
+
+## 0.68.0
+
+富文本编辑器升级为完整版，对齐主流编辑器的基础能力：
+
+- 工具条补齐段落格式（标题 1–3 / 引用 / 代码块）、字号、文字颜色与背景色、四种对齐、有序 / 无序列表与缩进、行内代码、链接 / 取消链接、分割线、清除格式
+- 图片上传：支持单图与多图，可点击选择、粘贴、拖拽进来；`uploadImage` 接自己的上传接口，不传则转 dataURL 本地预览；带类型与体积校验，失败通过 `upload-error` 抛出
+- 新增全屏编辑、字数统计与上传中占位；工具栏宽屏一行、窄屏自动换行
+- `sanitizeHtml` 增加内联样式白名单（颜色 / 字号 / 对齐 / 缩进等），其余样式、脚本与事件属性仍会被过滤
+- 图标库补充 undo / redo / 对齐 / 列表 / 缩进 / 取消链接
+
+## 0.67.6
+
+- 文档站侧栏改成菜单自己吸顶：品牌行跟菜单一起滚走，不再固定；分组标题（指南 / 基础 / 表单…）滚动时贴在顶部
+- 主题切换由整行按钮收成品牌行右侧 26×26 图标按钮，侧栏顶部占高从 111px 降到 50px，一屏能看到更多菜单
+- 视觉回归脚本支持 `--only=docs`，改局部时只截相关页面，不必整站截图
+
+## 0.67.5
+
+- 用户管理页按 DWZ 的习惯重排操作：把「添加 / 编辑 / 重置密码 / 删除」收进表格上方工具栏，勾选行后才能点，删除按钮显示选中数量
+- 去掉行内操作与整列「操作」，表格多出一列宽度，操作入口只保留工具栏一处；导出仍在工具栏右侧
+- 单行选中时删除走单条确认文案，多选才是批量删除；窄屏隐藏工具栏提示，避免多占一行
+
 ## 0.67.4
 
 - 自动填充清理加严：挂载后按 200 / 600 / 1200 / 2400ms 多次校验，输入框聚焦时再清一次，晚到的自动填充也能清干净

package/README.md

@@ -65,9 +65,9 @@ import DjmCol from 'djm-ui/components/grid/col'
 UMD 产物复用全局 Vue，不会重复打包 Vue。Vue 必须先加载：
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/djm-ui@0.67.4/dist/djm-ui.min.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/djm-ui@0.72.0/dist/djm-ui.min.css" />
 <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/djm-ui@0.67.4/dist/djm-ui.umd.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/djm-ui@0.72.0/dist/djm-ui.umd.min.js"></script>
 
 <script>
   Vue.createApp({
@@ -106,6 +106,42 @@ setPrimaryColor('#12855a')  // 自定义主色，自动推导整套色阶
 resetPrimaryColor()         // 回到默认蓝
 ```
 
+## 外观与导航
+
+示例应用右上角「皮肤」面板可以自由组合，选择写入 localStorage，刷新后保留：
+
+| 项目 | 可选值 |
+|---|---|
+| 主题预设 | 经典浅色 / 深海夜色 / 深色侧栏 / 混合导航 / 顶部通栏 / 双列菜单 |
+| 导航布局 | 侧边、顶部通栏、混合（顶部一级 + 侧栏二级） |
+| 侧栏配色 | 跟随主题、浅色、深色、品牌色，可与全局明暗相反（左深右浅 / 左浅右深） |
+| 菜单样式 | 单列内嵌、双列（一级一列、二级一列，三层菜单用分组标题展示） |
+
+侧栏单独配色时会按当前主色重新推导一套色阶，换主色侧栏同步变化。空间不够时自动降级：≤1320px 混合布局收起顶部一级菜单改抽屉，≤1100px 双列菜单退回单列，≤960px 统一变成抽屉。
+
+## AI 助手（MCP）
+
+组件库内置 MCP（Model Context Protocol）服务，AI 编程助手可以在写页面前查询当前版本的组件清单、props、事件、插槽、示例与 DSL：
+
+```bash
+npm i -D djm-ui
+npx djm-ui-mcp
+```
+
+在 Cursor / Trae / Claude Code 的 MCP 配置里加入：
+
+```json
+{
+  "mcpServers": {
+    "djm-ui": { "command": "npx", "args": ["djm-ui-mcp"] }
+  }
+}
+```
+
+提供 8 个工具：`get_component_list`、`get_component_doc`、`get_component_props`、`search_components`、`get_component_examples`、`get_component_dsl`、`get_installation_guide`、`get_library_info`。
+
+manifest 在每次构建时由文档页生成，随包版本发布；`npm test` 校验数据完整性，`npm run test:mcp` 校验 stdio 服务与工具调用。
+
 ## 国际化
 
 ```js