样式设置 CYEzero/dsh-style-setting

dsh-style-setting

中文 · English

为 DSH NEXT 提供独立的样式设置页：配色、卡片圆角、字体回退与对话密度。

界面名称： 样式设置 / Style Setting · 当前版本： 0.7.0

功能

- 独立配色：浅色、深色分别设置背景、面板和强调色。
- 主题预设：默认、浅紫、深灰、晨雾、墨青，一键应用配色。
- 卡片效果：调整外间距、共享圆角和阴影；关闭后保留参数。
- 字体回退：按顺序使用本机字体，不下载字体、不改变代码字体。
- 对话密度：紧凑、默认、宽松，不改变字号。
- 对比度提示：检查生效颜色，仅提示、不自动改色。
- 折叠分类：按类别展开设置，折叠保留未保存输入。
- 模型可用：注册 dsh_style_settings 工具，可用 get／set／reset 读写上述设置；该工具会出现在 DSH 的工具列表中。

设置

安装

需要 DSH NEXT。源码构建需要 Node.js 22+ 和 npm。

下载本仓库源码并进入项目目录：

npm ci --ignore-scripts
npm run build

在 DSH 插件管理器中安装本地构建目录，安装来源使用 file:<项目目录的绝对路径>。也可生成安装包：

npm run pack:release

将生成的 local-dsh-style-setting-0.7.0.tgz 作为本地包安装来源。安装或更新后重启 DSH，再打开 设置 → 样式设置。

保持已有本地链接时无需重复安装。新增 Host 配置需要重启加载；仅停用再启用不保证清除缓存。控件提示重启时，请先重启再使用。

包标识保持 @local/dsh-style-setting；不会迁移或重置已有偏好。当前保留 private: true，用于 GitHub 源码发布和本地包安装，不支持直接 npm publish。

使用

| 分类 | 设置 |
| 配色与主题 | 预设、背景、主面板与侧边栏、强调色 |
| 卡片与圆角 | 卡片开关、圆角、外间距、阴影 |
| 对话与字体 | 对话密度、字体回退 |
| 对比度检查 | 生效配色检查与重新测量 |

- 修改后点击 应用；颜色和字体输入支持 Enter 提交。
- 颜色输入为 #RRGGBB；留空恢复该模式的主题默认色。
- 字体示例：Arial, Microsoft YaHei, sans-serif。最多 16 项、512 字符；留空恢复默认。
- 圆角范围 0–32px，外间距 0–24px，阴影 0–30%；默认 18px / 12px / 10%。
- 恢复此组默认 只重置当前组，不影响其他设置。
- 命名预设仅修改对应模式的配色并请求切换模式；默认 仅恢复当前模式配色，不切换模式。

模型工具

插件注册 dsh_style_settings 工具，支持 get、set、reset：

- 分组重置：background、surface、accent、font、card、density、all；all 是默认组。
- card 只重置圆角、外间距与阴影三项，不改变卡片开关；density 只恢复原生对话密度。
- 参数在完整校验后通过官方设置服务原子保存，无效输入不产生写入。
- 兼容旧工具 dsh_background_colors，它只处理背景组。

逐字段说明与开发细节见 工具与重置。

内置配色

| 预设 | 模式 | 背景 | 面板 | 强调色 |
| 浅紫 | 浅色 | #c4b7d7 | #f5f5f5 | #8f00ff |
| 深灰 | 深色 | #393836 | #181616 | #00bfff |
| 晨雾 | 浅色 | #eef5f2 | #f8fcfa | #267568 |
| 墨青 | 深色 | #20292e | #162126 | #67c7b0 |

晨雾深灰

注意事项

- 主面板与侧边栏共用颜色；输入框、历史用户消息及文件卡片跟随自定义背景。
- 共享圆角随卡片开关启用，圆形、胶囊与开关控件保留原生形状；对话密度独立于卡片开关。
- 正文、代码字体及成功／错误／警告语义颜色保持原样。
- 对比度参考文字 4.5:1、图标 3:1。未保存输入不参与；不能测量的颜色显示「无法测量」。这不是完整无障碍检查。
- 配色保存与模式切换是两个步骤；模式切换失败会提示配色已保存，不代表模式已持久化。
- 使用官方设置与主题接口，但部分样式依赖原生 CSS。布局和对话 UI 适配基于 0.2.0-rc.2，DSH 升级后需重新验证。

项目结构

dsh-style-setting/
├── src/ # 32 个 TypeScript / TSX 源文件 │ ├── index.ts # Host 入口 │ ├── client.tsx # Client 入口与生命周期 │ ├── background.ts # 共享公开 API 的兼容入口 │ ├── contracts.ts # Client、表单与行组件类型契约 │ ├── contrast.ts # 颜色解析与 WCAG 对比度计算 │ ├── presets.ts # 配色预设、原子保存与模式切换 │ ├── surfaces.ts # 面板、背景、共享圆角与密度 CSS │ ├── host/ # Host 配置与工具 │ │ ├── config.ts # Config schema │ │ ├── contracts.ts # Host 服务类型契约 │ │ ├── tool-schema.ts # 工具输入和输出 schema │ │ ├── tool-validation.ts # 工具参数校验与写入操作生成 │ │ └── tools.ts # 工具注册、执行和分组重置 │ ├── shared/ # 共享模型、校验与主题同步 │ │ ├── model.ts # 字段、默认值、范围与枚举 │ │ ├── colors.ts # HEX 颜色校验和规范化 │ │ ├── cards.ts # 卡片数值校验 │ │ ├── density.ts # 密度枚举校验 │ │ ├── fonts.ts # 字体列表解析和安全校验 │ │ ├── persisted.ts # 已保存配置读取与兼容回退 │ │ ├── font-css.ts # 字体覆盖 CSS │ │ └── theme-layer.ts # 主题令牌层同步、重入防护与清理 │ └── ui/ # 设置页面与样式贡献 │ ├── StylePage.tsx # 分类布局与组件组合 │ ├── SurfaceStyles.tsx # 将生效设置转换为全局样式 │ ├── localization.ts # 中英文页面文案 │ ├── row-face.ts # 表单保存接口适配 │ ├── styles.ts # 设置页自身 CSS │ └── rows/ # 独立设置行组件 │ ├── ColorRow.tsx # 背景、面板与强调色 │ ├── CardRow.tsx # 卡片效果开关 │ ├── CardParametersRow.tsx # 圆角、间距和阴影 │ ├── DensityRow.tsx # 对话密度 │ ├── FontRow.tsx # 字体回退列表 │ ├── PresetRow.tsx # 配色预设 │ └── ContrastRow.tsx # 生效颜色测量和对比度提示 ├── tests/ # 17 个测试文件；覆盖校验、UI、模块和发布 ├── img/ # 对外文档插图：设置页、晨雾和深灰预设外观 ├── scripts/ │ └── build.mjs # Host ESM / Client ModuleLoader 构建 ├── locale/ # 插件元数据翻译，非设置页文案 │ ├── zh.json # 中文名称与描述 │ └── en.json # 英文名称与描述 ├── cordis.patch.yml # Cordis bundle 插件入口声明 ├── icon.svg # 插件图标 ├── package.json # 包身份、依赖、导出、脚本与打包白名单 ├── package-lock.json # npm 依赖锁定 ├── tsconfig.json # TypeScript 类型检查配置 ├── .gitignore # Git 忽略规则 ├── .gitattributes # 换行和二进制文件规则 ├── .prettierrc.json # 格式规范 ├── .prettierignore # 格式化排除规则 ├── README.md # 项目主页与使用说明 ├── README.en.md # 英文项目主页 ├── DEVELOPMENT.md # 逐文件职责、开发与发布指南 └── LICENSE # MIT 许可证

构建后的 dist/、安装依赖 node_modules/、本地验收 artifacts/ 和生成的 .tgz 不属于源码提交内容。README 引用的插图来自 img/，artifacts/ 中的历史截图含个人内容、不作为公开文档插图。每个源码、测试和配置文件的职责见 逐文件说明。

开发与发布

npm run format:check
npm test
npm run pack:check

测试包含单元测试、真实 DSH 工具注册和 Chromium 样式检查；后两项依赖本机环境，缺失时明确跳过。

开发说明、模块边界和发布清单见 DEVELOPMENT.md，问题反馈请使用 Issues。

许可证

本项目采用 MIT License 许可证授权。