opendesign-components
OpenDesign 组件库使用指南
OpenDesign 是一个面向 openEuler 生态的 Vue 3 组件库,提供 59 个可复用 UI 组件。组件库有六套独立主题,每个社区项目在初始化时选定一套,运行时只切换 dark/light 模式。
安装
1. 安装依赖包
pnpm add @opensig/opendesign @opensig/opendesign-token
# 或
npm install @opensig/opendesign @opensig/opendesign-token
@opensig/opendesign— 组件库@opensig/opendesign-token— 设计 token(必需),包含主题 CSS 变量
2. 选择主题并引入样式
More from finch-poi/opendesign-skills
opendesign-tokens
OpenDesign 设计 Token 指南。当需要使用 @opensig/opendesign-token 包中的 CSS 变量时使用此 skill。包含六套主题(openEuler/Ascend/Kunpeng/Mindspore/openGauss/openUBMC)的完整 token 体系,支持颜色、间距、圆角、字体、阴影、响应式排版、栅格系统等所有设计令牌。使用场景:(1) 查找颜色值对应的语义 token,(2) 获取间距/圆角/字体的 token 名称,(3) 了解六套主题的差异,(4) 代码中使用 CSS 变量替代硬编码值,(5) 使用响应式 token 实现多断点适配
19opendesign-scripts
OpenDesign 构建脚本工具使用指南。当需要使用 @opensig/open-scripts CLI 工具进行图标生成、SVG 清理、组件构建、样式编译、设计令牌生成时使用此 skill。支持 5 个命令:gen:icon(SVG 转 Vue 图标组件)、clean:svg(SVG 清理优化)、build:component(Vue 组件库构建)、build:style(SCSS 样式编译)、gen:token(设计令牌 CSS 变量生成)。使用场景:(1) 配置和执行构建脚本,(2) 编写图标/令牌配置文件,(3) 了解构建流程和命令用法
17openeuler-frontend-tools
openEuler Portal 前端开发工具和规范集合。当需要使用项目中的通用 composables、SCSS mixins 或工具函数时使用此 skill。使用场景:(1) 需要使用响应式屏幕适配功能时查找 useScreen composable,(2) 需要使用响应式字体 mixin 时查找 font.scss,(3) 需要使用 URL 参数、Cookie 等工具函数时查找 utils/common.ts,(4) 需要使用国际化、剪贴板、防抖搜索等 composables 时查找对应的工具
17