# Opendesign Components > OpenDesign 组件库使用指南。当需要使用 OpenDesign Vue 组件库快速搭建页面时使用此 skill。支持所有 OpenDesign 组件（46 个），包括按钮、表单、表格、对话框、卡片、图标、滑块、步骤条、轻提示等常用 UI 组件。使用场景：(1) 使用 OpenDesign 组件构建 Vue 页面，(2) 查找组件使用方法和属性说明，(3) 获取组件代码示例 - Skill: `finch-poi/opendesign-components` (Agent Skill, multi-file: 153 files) - Install (CLI): `npx skillmds@latest add finch-poi/opendesign-components` - Raw SKILL.md: https://api.skillmd.com/api/skills/finch-poi/opendesign-components/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: finch-poi (https://skillmd.com/u/finch-poi) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/finch-poi/opendesign-components --- # OpenDesign 组件库使用指南 > 本 Skill 对应 @opensig/opendesign **v1.2.6**（2026-07 生成），最低依赖版本 ≥1.2.6。具体组件 API 在哪个版本引入/变更/废弃，查 [`ReleaseNote`](https://raw.atomgit.com/openeuler/opendesign-components/blobs/bb8e66ef9d79e2fd08fb841de9340ef00e5a841d/ReleaseNote.opendesign.md)。 OpenDesign 是一个面向 openEuler 生态的 Vue 3 组件库，提供 59 个可复用 UI 组件。组件库有六套独立主题，**每个社区项目在初始化时选定一套，运行时只切换 dark/light 模式**。 ## 安装 ### 1. 安装依赖包 ```bash pnpm add @opensig/opendesign @opensig/opendesign-token # 或 npm install @opensig/opendesign @opensig/opendesign-token ``` - `@opensig/opendesign` — 组件库（最低版本见各组件 Skill 头部标注） - `@opensig/opendesign-token` — 设计 token（必需），最低版本见 Token Skill 头部标注（当前为 `≥0.1.1`） ### 2. 选择主题并引入样式首先引入样式 ```typescript // main.ts import '@opensig/opendesign/es/index.css' // 引入组件样式文件 ``` 六套主题对应不同社区，**项目初始化时选定其中一套**，引入对应的 token 文件： **openEuler 社区项目：** ```typescript // main.ts import '@opensig/opendesign-token/themes/e.dark.token.css' // openEuler 主题 token import '@opensig/opendesign-token/themes/e.light.token.css' // openEuler 主题 token ``` **Ascend 社区项目：** ```typescript // main.ts import '@opensig/opendesign-token/themes/a.dark.token.css' // Ascend 主题 token import '@opensig/opendesign-token/themes/a.light.token.css' // Ascend 主题 token ``` **Kunpeng 社区项目：** ```typescript // main.ts import '@opensig/opendesign-token/themes/k.dark.token.css' // Kunpeng 主题 token import '@opensig/opendesign-token/themes/k.light.token.css' // Kunpeng 主题 token ``` **MindSpore 社区项目：** ```typescript // main.ts import '@opensig/opendesign-token/themes/m.dark.token.css' // MindSpore 主题 token import '@opensig/opendesign-token/themes/m.light.token.css' // MindSpore 主题 token ``` **Gauss 社区项目：** ```typescript // main.ts import '@opensig/opendesign-token/themes/g.dark.token.css' // Gauss 主题 token import '@opensig/opendesign-token/themes/g.light.token.css' // Gauss 主题 token ``` **UBMC 社区项目：** ```typescript // main.ts import '@opensig/opendesign-token/themes/u.dark.token.css' // UBMC 主题 token import '@opensig/opendesign-token/themes/u.light.token.css' // UBMC 主题 token ``` ### 3. 切换 dark/light 模式引入 token 文件后，通过 `data-o-theme` 属性（设置在 `` 或 `` 上）在浅色/深色间切换： | 社区 | 浅色模式 | 深色模式 | |------|--------------------------|-------------------------| | openEuler | `data-o-theme="e.light"` | `data-o-theme="e.dark"` | | Ascend | `data-o-theme="a.light"` | `data-o-theme="a.dark"` | | Kunpeng | `data-o-theme="k.light"` | `data-o-theme="k.dark"` | | MindSpore | `data-o-theme="m.light"` | `data-o-theme="m.dark"` | | Gauss | `data-o-theme="g.light"` | `data-o-theme="g.dark"` | | UBMC | `data-o-theme="u.light"` | `data-o-theme="u.dark"` | ```javascript // 切换深色模式（以 openEuler 项目为例） document.documentElement.setAttribute('data-o-theme', 'e.dark') // 切换回浅色模式 document.documentElement.setAttribute('data-o-theme', 'e.light') ``` ### 4. 设置组件默认圆角引入组件后，可以通过 `initRound` 来全局设置大部分组件的圆角 ```javascript import {initRound} from '@opensig/opendesign' initRound('pill') // 'pill'代表全圆角，通常在Ascend社区使用 ``` ### 5. 引入鸿蒙字体 ```typescript // main.ts import '@opensig/opendesign-token/fonts/css' // 鸿蒙字体 ``` --- ## 快速开始所有组件都从 `@opensig/opendesign` 导入： ```vue ``` --- ## 全局编码原则 > ⚠️ 以下原则适用于 **所有** OpenDesign 组件，不可违反。 ### 优先使用 OpenDesign 生态 **在编写任何 UI 代码之前，第一步是识别需求是否已由 OpenDesign 覆盖。** 拿到需求或设计稿时，按以下顺序决策： 1. **识别视觉结构** → 将设计稿中的每个视觉区域/交互元素与 OpenDesign 组件列表对比 2. **优先使用现有组件** → 凡是 OpenDesign 已提供的能力，**必须**通过组件 props / slots / events 实现，不允许绕过自行实现同类功能 3. **扩展而非重写** → 若现有组件不能完全满足需求，优先通过 slot 插入自定义内容，或通过 CSS 变量覆盖样式，而不是重新实现整个组件 4. **最后才考虑自定义** → 只有在 OpenDesign 确实没有对应能力时，才编写完全自定义的代码，并在注释中说明原因 ``` 需求/设计稿 ↓ ① 能否用 OpenDesign 组件覆盖？ ├─ 是 → 使用组件 props/slots/events ✅ ├─ 部分 → slot 插入 + CSS 变量覆盖 ✅ └─ 否 → 自定义实现（注明理由）⚠️ ``` > **核心精神**：不要在已有轮子的情况下重新造轮子。OpenDesign 组件经过响应式、无障碍、多主题的完整打磨，自行实现同等功能的成本远高于学习组件 API 的成本。 --- ### 禁止使用 `:deep` 修改组件内部样式在 Vue scoped 样式（`