@rhino-design/vue 0.2.7 → 0.2.9

package/README.md

@@ -1,16 +1,53 @@
-# Rhino Design Vue
+[简体中文](./README.zh-CN.md)
 
-> ⚠️ **新版组件已趋于正常使用，文档：http://doc.xitask.com ！**
+<div align="center">
+  <h1>Rhino Design Vue</h1>
+  <p>A business-oriented Vue 3 component library for modern applications.</p>
+  <p>
+    <a href="http://doc.xitask.com">Documentation</a>
+    ·
+    <a href="https://github.com/Yuppiezero/Rhino-Design">GitHub</a>
+    ·
+    <a href="https://github.com/Yuppiezero/Rhino-Design/issues">Issues</a>
+  </p>
+  <p>
+    <img src="https://img.shields.io/badge/Vue-3.4%2B-42b883" alt="Vue 3.4+" />
+    <img src="https://img.shields.io/badge/TypeScript-friendly-3178c6" alt="TypeScript friendly" />
+    <img src="https://img.shields.io/badge/Theme-light%20%7C%20dark%20%7C%20auto-111827" alt="Theme support" />
+    <img src="https://img.shields.io/badge/License-MIT-0f766e" alt="MIT License" />
+  </p>
+</div>
 
-全面开箱即用的高质量组件，可以覆盖绝大部分的业务场景。所有组件都是用 TypeScript 编写的，所以天然的类型友好。
+Rhino Design Vue is a high-quality Vue 3 component library focused on practical business scenarios. It ships with TypeScript-friendly APIs, built-in theme support, internationalization helpers, and an optional standalone icons package.
 
-## 安装
+## Homepage
+```bash
+http://doc.xitask.com
+```
+
+## Features
+
+- 80+ Vue 3 components and examples covering common business scenarios.
+- TypeScript-first component APIs and service APIs.
+- Built-in locale support for `zh-CN`, `en-US`, `ja-JP`, `zh-TW`, `pt-PT`, `es-ES`, `id-ID`, `fr-FR`, `da-DK`, `de-DE`, `ko-KR`, `it-IT`, `ms-MY`, `nl-NL`, `th-TH`, `vi-VN`, `km-KH`, `ar-EG`, and `ru-RU`.
+- Built-in `light`, `dark`, and `auto` theme modes.
+- Service-style APIs for `Message`, `Notification`, `Modal`, and `Drawer`.
+- Optional `@rhino-design/icons` package for expanded icon support and on-demand loading.
+- Full CSS output with optional Less and SCSS style entrypoints.
+
+## Installation
 
 ```bash
-npm i @rhino-design/vue
+npm install @rhino-design/vue
 ```
 
-## 使用
+Optional icons package:
+
+```bash
+npm install @rhino-design/icons
+```
+
+## Usage
 
 ```ts
 import { createApp } from 'vue';
@@ -18,22 +55,67 @@ import App from './App.vue';
 import RhinoDesignVue from '@rhino-design/vue';
 import '@rhino-design/vue/dist/style.css';
 
-createApp(App).use(RhinoDesignVue).mount('#app');
+createApp(App)
+  .use(RhinoDesignVue)
+  .mount('#app');
 ```
-## 当前新增组件
 
-- 真正重写的基础层、主题层、图标层
-- table表自动合并优化，input语音识别文字输入，图片裁剪，图片预览等
-- 首批核心组件：`Cropper`、`Richtext`、`ChatInput`、`QrCode`等。
+You can also configure the locale during installation:
 
-## 当前重构范围
+```ts
+import { createApp } from 'vue';
+import App from './App.vue';
+import RhinoDesignVue from '@rhino-design/vue';
+import '@rhino-design/vue/dist/style.css';
 
-- 真正重写的基础层、主题层、图标层
-- 首批优化组件：`Button`、`Table`、`ConfigProvider`、`Form`、`FormItem`、`Icon`、`Input`、`Modal`、`Segmented`、`Space`、`Tag`
+createApp(App)
+  .use(RhinoDesignVue, {
+    locale: 'en-US',
+  })
+  .mount('#app');
+```
 
-- 文档示例站和 npm 构建配置
+## Theme
 
-```bash
-npm run dev
-npm i @rhino-design/vue
+```ts
+import { setTheme } from '@rhino-design/vue';
+
+setTheme('dark');
+```
+
+Supported values are `light`, `dark`, and `auto`.
+
+## Icons
+
+If you want the full icon package, install and register it separately:
+
+```ts
+import { createApp } from 'vue';
+import App from './App.vue';
+import RhinoDesignVue from '@rhino-design/vue';
+import { RhinoDesignIcons } from '@rhino-design/icons';
+
+createApp(App)
+  .use(RhinoDesignVue)
+  .use(RhinoDesignIcons)
+  .mount('#app');
 ```
+
+## Style Entrypoints
+
+```ts
+import '@rhino-design/vue/dist/style.css';
+// or
+import '@rhino-design/vue/style.css';
+import '@rhino-design/vue/style.less';
+import '@rhino-design/vue/style.scss';
+```
+
+## Highlights
+
+Rhino Design Vue covers foundational and business-facing components such as `Button`, `Table`, `Form`, `Input`, `Modal`, `Segmented`, `Tag`, `Cropper`, `RichTextEditor`, `ChatInput`, and `QRCode`.
+
+
+## License
+
+[MIT](./LICENSE)

package/README.zh-CN.md

@@ -0,0 +1,120 @@
+[English](./README.md)
+
+<div align="center">
+  <h1>Rhino Design Vue</h1>
+  <p>面向现代业务场景的 Vue 3 组件库。</p>
+  <p>
+    <a href="http://doc.xitask.com">文档站</a>
+    ·
+    <a href="https://github.com/Yuppiezero/Rhino-Design">GitHub</a>
+    ·
+    <a href="https://github.com/Yuppiezero/Rhino-Design/issues">问题反馈</a>
+  </p>
+  <p>
+    <img src="https://img.shields.io/badge/Vue-3.4%2B-42b883" alt="Vue 3.4+" />
+    <img src="https://img.shields.io/badge/TypeScript-friendly-3178c6" alt="TypeScript friendly" />
+    <img src="https://img.shields.io/badge/Theme-light%20%7C%20dark%20%7C%20auto-111827" alt="Theme support" />
+    <img src="https://img.shields.io/badge/License-MIT-0f766e" alt="MIT License" />
+  </p>
+</div>
+
+Rhino Design Vue 是一个面向业务开发的高质量 Vue 3 组件库，强调开箱即用、类型友好和实际落地能力。它内置主题能力、国际化支持，并提供可选安装的独立图标包。
+
+## 文档站点：
+```bash
+http://doc.xitask.com
+```
+
+## 特性
+
+- 提供 `80+` 个 Vue 3 组件与示例，覆盖大部分常见业务场景。
+- 基于 TypeScript 编写，组件 API 与服务式 API 都具备良好的类型支持。
+- 内置 `zh-CN`、`en-US`、`ja-JP`、`zh-TW`、`pt-PT`、`es-ES`、`id-ID`、`fr-FR`、`da-DK`、`de-DE`、`ko-KR`、`it-IT`、`ms-MY`、`nl-NL`、`th-TH`、`vi-VN`、`km-KH`、`ar-EG`、`ru-RU` 多语言能力。
+- 内置 `light`、`dark`、`auto` 三种主题模式。
+- 提供 `Message`、`Notification`、`Modal`、`Drawer` 等服务式调用能力。
+- 提供可选的 `@rhino-design/icons` 独立图标包，支持更完整的图标能力和按需加载。
+- 提供完整 CSS 产物，同时支持 Less 与 SCSS 样式入口。
+
+## 安装
+
+```bash
+npm install @rhino-design/vue
+```
+
+如需完整图标能力，可额外安装：
+
+```bash
+npm install @rhino-design/icons
+```
+
+## 使用
+
+```ts
+import { createApp } from 'vue';
+import App from './App.vue';
+import RhinoDesignVue from '@rhino-design/vue';
+import '@rhino-design/vue/dist/style.css';
+
+createApp(App)
+  .use(RhinoDesignVue)
+  .mount('#app');
+```
+
+也可以在安装时指定语言：
+
+```ts
+import { createApp } from 'vue';
+import App from './App.vue';
+import RhinoDesignVue from '@rhino-design/vue';
+import '@rhino-design/vue/dist/style.css';
+
+createApp(App)
+  .use(RhinoDesignVue, {
+    locale: 'zh-CN',
+  })
+  .mount('#app');
+```
+
+## 主题
+
+```ts
+import { setTheme } from '@rhino-design/vue';
+
+setTheme('dark');
+```
+
+支持的主题值为 `light`、`dark`、`auto`。
+
+## 图标包
+
+如果你需要更完整的图标集合，可以单独安装并注册：
+
+```ts
+import { createApp } from 'vue';
+import App from './App.vue';
+import RhinoDesignVue from '@rhino-design/vue';
+import { RhinoDesignIcons } from '@rhino-design/icons';
+
+createApp(App)
+  .use(RhinoDesignVue)
+  .use(RhinoDesignIcons)
+  .mount('#app');
+```
+
+## 样式入口
+
+```ts
+import '@rhino-design/vue/dist/style.css';
+// 或
+import '@rhino-design/vue/style.css';
+import '@rhino-design/vue/style.less';
+import '@rhino-design/vue/style.scss';
+```
+
+## 组件亮点
+
+Rhino Design Vue 当前已经覆盖 `Button`、`Table`、`Form`、`Input`、`Modal`、`Segmented`、`Tag` 等基础与业务组件，并提供 `Cropper`、`RichTextEditor`、`ChatInput`、`QRCode` 等更贴近业务场景的能力。
+
+## License
+
+[MIT](./LICENSE)