{"id":13560705,"url":"https://github.com/zhaoyuuu/violet-design","last_synced_at":"2026-07-28T11:01:10.460Z","repository":{"id":65739316,"uuid":"590000478","full_name":"zhaoyuuu/violet-design","owner":"zhaoyuuu","description":"A high quality UI Toolkit built on React.","archived":false,"fork":false,"pushed_at":"2023-03-12T08:02:55.000Z","size":13411,"stargazers_count":59,"open_issues_count":0,"forks_count":11,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-11-18T17:23:38.228Z","etag":null,"topics":["components","react","react-components","ts","ui-library","violet"],"latest_commit_sha":null,"homepage":"https://zhaoyuuu.github.io/violet-design","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zhaoyuuu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2023-01-17T12:46:07.000Z","updated_at":"2025-07-01T08:13:51.000Z","dependencies_parsed_at":null,"dependency_job_id":"688c6cf2-cc9e-4724-84ed-a1eb0df03804","html_url":"https://github.com/zhaoyuuu/violet-design","commit_stats":{"total_commits":301,"total_committers":13,"mean_commits":"23.153846153846153","dds":0.7009966777408638,"last_synced_commit":"40336e7dc3988c4fe763656e6248b87411e86524"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/zhaoyuuu/violet-design","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhaoyuuu%2Fviolet-design","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhaoyuuu%2Fviolet-design/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhaoyuuu%2Fviolet-design/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhaoyuuu%2Fviolet-design/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zhaoyuuu","download_url":"https://codeload.github.com/zhaoyuuu/violet-design/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhaoyuuu%2Fviolet-design/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35989243,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-07-20T02:08:10.276Z","status":"online","status_checked_at":"2026-07-28T02:00:06.341Z","response_time":109,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","react","react-components","ts","ui-library","violet"],"created_at":"2024-08-01T13:00:48.872Z","updated_at":"2026-07-28T11:01:10.429Z","avatar_url":"https://github.com/zhaoyuuu.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://zhaoyuuu.github.io/violet-design\"\u003e\n    \u003cimg width=\"320\" src=\"https://github.com/zhubeijia/source/blob/main/srclogo/violet-logo.svg?raw=true\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n![pipeline](https://img.shields.io/badge/pipeline-passing-%238990f9)\n![lisence](https://img.shields.io/badge/lisence-MIT-slateblue.svg)\n![docs](https://img.shields.io/badge/docsby-storybook-purple.svg)\n![test](https://img.shields.io/badge/test-passing-%238b6ccc)\n\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n基于「 React 」框架的个性化 UI 组件库，主要用于企业级中后台系统。\n\u003c/div\u003e\n\n## 目录\n\n- [目录](#目录)\n- [介绍](#介绍)\n  - [特性](#特性)\n  - [兼容性](#兼容性)\n- [安装](#安装)\n  - [使用 npm 安装](#使用npm安装)\n  - [使用 yarn 安装](#使用-yarn-安装)\n  - [浏览器引入](#浏览器引入)\n- [示例](#示例)\n  - [按需加载](#按需加载)\n  - [TypeScript](#typescript)\n- [组件](#组件)\n- [链接](#链接)\n- [开发人员](#开发人员)\n\n## 介绍\n\n为了满足设计规范要求，本团队自行开发了「 Violet Design 」—— 一套基于 React 的 UI 组件库。 Violet Design 提供了丰富的组件和功能，在满足不同业务需求的同时，也极具美观和协调性。\n\n### 特性\n\n- 🌈 自主设计的符合直觉的交互语言和视觉风格。\n- 📦 开箱即用的高质量 `React` 组件。\n- 🛡️ 使用 `TypeScript` 开发，提供完整的类型定义文件。\n- ☀️ 友好的 API ，自由灵活地使用空间。\n- 🎨 细致、漂亮的 UI。\n- 📁 清晰明了的演示站点，细致的文档。\n\n### 兼容性\n\n| \u003cimg src=\"https://github.com/zhubeijia/source/blob/main/srclogo/icon-edge.06c7aa18.svg?raw=true\" width=\"20px\"\u003eEdge | \u003cimg src=\"https://github.com/zhubeijia/source/blob/main/srclogo/icon-firefox.ffa00c88.svg?raw=true\" width=\"20px\"\u003eFirefox | \u003cimg src=\"https://github.com/zhubeijia/source/blob/main/srclogo/icon-chrome.99f0b30c.svg?raw=true\" width=\"20px\"\u003eChrome | \u003cimg src=\"https://github.com/zhubeijia/source/blob/main/srclogo/icon-safari.1bf88a3e.svg?raw=true\" width=\"20px\"\u003eSafari | \u003cimg src=\"https://github.com/zhubeijia/source/blob/main/srclogo/icon-opera.de286680.svg?raw=true\" width=\"20px\"\u003eOpera |\n| ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |\n| Edge                                                                                                               | Last two versions                                                                                                        | Last two versions                                                                                                      | Last two versions                                                                                                      | Last two versions                                                                                                    |\n\n## 安装\n\n### 使用 npm 安装\n\n推荐使用 npm 来安装，享受生态圈和工具带来的便利，可以在开发环境轻松调试，也可以在生态环境打包部署使用。\n\n`$ npm install violet-design`\n\n### 使用 yarn 安装\n\n`$ yarn add violet-design`\n\n### 浏览器引入\n\n在浏览器中使用 `script` 和 `link` 标签直接引入文件，并使用全局变量 `VioletDesign`。\n\n**引入 CSS：**\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/violet-design/dist/index.css\"\u003e\n```\n\n**引入 JS：**\n\n```html\n\u003cscript src=\"https://unpkg.com/violet-design/dist/index.umd.js\"\u003e\u003c/script\u003e\n```\n\n## 示例\n\n### 1. 引入样式\n\n在`index.tsx(.jsx)`中：\n\n```js\nimport 'violet-design/dist/index.css'\n```\n\n### 2. 使用组件\n\n```js\nimport React from 'react';\nimport { Button } from 'violet-design';\n\nconst App = () =\u003e (\n  \u003c\u003e\n    \u003cButton btnType=\"primary\" size=\"lg\"\u003ePRESS ME\u003c/Button\u003e\n  \u003c/\u003e\n);\n```\n\n### 按需加载\n\n`violet-design` 默认支持基于 ES modules 的 tree shaking。\n\n### TypeScript\n\n`violet-design`使用 TypeScript 进行书写并提供了完整的定义文件。\n\n## 组件\n\n- 🔘 通用型组件：Button 按钮、Icon 图标\n- 🗂️ 导航型组件：Menu 导航菜单\n- 🪄 数据录入型组件：AutoComplete 自动完成、Cascader 级联选择、CheckBox 多选框、DatePicker 日期选择器、RangeDatePicker 日期范围选择器、Form 表单、Input 输入框、InputNumber 数字输入框、RadioGroup 单选按钮组、Select 选择器、Switch 开关、Upload 上传\n- 📆 数据展示型组件：Calendar 日历、Tabs 标签页\n- 📈 反馈型组件：Progress 进度条\n- 🧱 布局组件：Grid 栅格\n- 📌 其他组件：Affix 图钉、Transition 过渡\n\n## 链接\n\n- [文档站](https://zhaoyuuu.github.io/violet-design)\n- [组件库](https://github.com/zhaoyuuu/violet-design)\n\n## 开发人员\n\n[@ZhaoYuhang](https://github.com/zhaoyuuu). [@LiWei](https://github.com/5liwei). [@WangZijun](https://github.com/violetwzj). [@YangJiawei](https://github.com/666laoyang). [@WanYuhui](https://github.com/wyuhuiNJU). [@ZhuBeijia](https://github.com/zhubeijia). [@ChenXinyi](https://github.com/quas-modo).\n\n如果你希望参与贡献，欢迎 Pull Request ！\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhaoyuuu%2Fviolet-design","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzhaoyuuu%2Fviolet-design","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhaoyuuu%2Fviolet-design/lists"}