|
| 1 | +[](https://www.npmjs.com/package/@cosui/cosmic) |
| 2 | +[](https://www.npmjs.com/package/@cosui/cosmic-dynamic-ui) |
| 3 | +[](https://www.npmjs.com/package/marklang) |
| 4 | +[](LICENSE) |
| 5 | +[](https://github.com/baidu/cosui/actions/workflows/deploy.yml) |
| 6 | + |
| 7 | +# COSUI |
| 8 | + |
| 9 | +一套面向 AI 时代的前端 UI 解决方案,包含 UI 协议、解析渲染 SDK 与 UI 组件库等,可应用于生成式 UI、智能体、AI 对话等多种大模型场景。 |
| 10 | + |
| 11 | +特点: |
| 12 | + |
| 13 | +- 数据驱动渲染的 UI 协议 |
| 14 | + - Markdown 扩展协议:Markdown 纯文本基础之上可结构化展现、动态交互 |
| 15 | + - JSON 动态协议:JSON 协议 可灵活重组,动态定制 |
| 16 | + |
| 17 | +- UI 解析渲染 SDK:包含 Markdown 扩展协议解析渲染、JSON 协议解析及渲染的完整 SDK 解决方案 |
| 18 | + |
| 19 | +- 基于 San 的 UI 组件 |
| 20 | + - 基于设计系统: Cosmic Design Token |
| 21 | + - 多端适配:支持移动 H5 和 PC 双端 |
| 22 | + - 主题定制:支持自定义主题 |
| 23 | + - 组件分层:支持基础、行业场景划分 |
| 24 | + - 组件库独立:支持按需加载 |
| 25 | + |
| 26 | +- 平台化管理:设计到代码工具化输出,资产平台化管理,产品设计研发高效协同 |
| 27 | + |
| 28 | +# 安装 |
| 29 | + |
| 30 | +- 安装组件库 |
| 31 | + |
| 32 | +``` |
| 33 | +npm i @cosui/cosmic |
| 34 | +npm i @cosui/icon |
| 35 | +``` |
| 36 | + |
| 37 | +- 按需配置别名 |
| 38 | + |
| 39 | +``` |
| 40 | +// webpack.config.js |
| 41 | +{ |
| 42 | + // ... |
| 43 | + resolve: { |
| 44 | + alias: { |
| 45 | + '@cosui/cosmic': path.join( |
| 46 | + path.dirname(require.resolve('@cosui/cosmic').replace('/dist/mobile', '')), |
| 47 | + `dist/${platform === 'pc' ? 'pc' : 'mobile'}` |
| 48 | + ) |
| 49 | + } |
| 50 | + } |
| 51 | +} |
| 52 | +``` |
| 53 | + |
| 54 | +# 使用 |
| 55 | + |
| 56 | +``` |
| 57 | +// index.ts |
| 58 | +import '@cosui/icon/dist/cos-icon.css'; |
| 59 | +import '@cosui/cosmic/tokens.css'; |
| 60 | +import '@cosui/cosmic/index.css'; |
| 61 | +
|
| 62 | +// demo.ts |
| 63 | +import {Component} from 'san'; |
| 64 | +
|
| 65 | +// 按需引入组件 |
| 66 | +import Avatar from '@cosui/cosmic/avatar'; |
| 67 | +
|
| 68 | +export default class Demo extends Component { |
| 69 | + // ... |
| 70 | +
|
| 71 | + static components = { |
| 72 | + // ... |
| 73 | + 'cos-avatar': Avatar |
| 74 | + }; |
| 75 | +
|
| 76 | + initData() { |
| 77 | + return { |
| 78 | + src: 'https://img1.baidu.com/it/u=130622358,2203931177&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', |
| 79 | + } |
| 80 | + } |
| 81 | +} |
| 82 | +``` |
| 83 | + |
| 84 | +# 贡献 |
| 85 | +欢迎一起共建,[贡献指南](./CONTRIBUTING.md) |
| 86 | + |
| 87 | +# License |
| 88 | +Apache License 2.0 |
0 commit comments