twcpt 0.0.12 → 0.0.13

package/README.md

@@ -1,218 +1,217 @@
-# TWCPT - Vue 3 + Element-plus 组件库
-
-TWCPT 是一个基于 Vue 3、TypeScript 和 Element-plus 构建的现代企业级组件库。
-
-### 分支管理
-
-1. **创建开发分支**: 开发新功能或修复问题时，应基于 `dev` 分支创建对应的功能分支。分支命名格式为 `feat/`、`fix/`、`refactor/`、`docs/`、`perf/` 或 `chore/` 前缀，后跟具体描述。
-
-2. **提交代码审查**: 完成开发后，通过 Pull Request (PR) 或 Merge Request (MR) 提交至 `dev` 分支进行代码审查。提交后可保留自建分支，无需删除。
-
-3. **版本发布流程**: 在 `dev` 分支完成构建后（执行 `npm run build-all`），需先执行 `npm login` 进行身份验证，随后执行 `npm run patch` 发布新版本。
-
-## 项目特点
-
-- 基于 Element-plus 的现代化 UI 组件
-- 全面的 TypeScript 类型支持
-- 开箱即用的企业级业务组件
-- 内置国际化支持 (i18n)
-- 权限控制系统
-- 基于 Chart.js 的数据可视化
-- 高度可定制的主题配置
-
-## 分支命名规范 (Branching Guidelines)
-
-为了保持组件库开发的条理性以及 CI/CD 流程的自动化，本项目采用语义化分支命名规范。
-
-### 1. 核心分支 (Core Branches)
-
-| 分支名   | 说明                             |
-|:------|:-------------------------------|
-| `dev` | 开发分支。日常功能集成的基准分支，所有 PR 默认合并至此。 |
-
----
-
-### 2. 短期协作分支 (Supporting Branches)
-
-所有短期分支应遵循 `类别/描述` 的格式，使用小写字母并以中划线分隔。
-
-#### 功能开发 (Feature)
-
-用于开发新组件或新特性。
-
-- 格式: `feat/description`
-- 示例: `git checkout -b feat/button-component`
-
-#### 缺陷修复 (Bugfix)
-
-用于修复组件 Bug。
-
-- 格式: `fix/description`
-- 示例: `git checkout -b fix/select-dropdown-overflow`
-
-#### 代码重构 (Refactor)
-
-不影响功能逻辑的代码结构调整。
-
-- 格式: `refactor/description`
-- 示例: `git checkout -b refactor/use-callback-optimization`
-
-#### 文档更新 (Docs)
-
-仅涉及文档、注释、Storybook 示例的修改。
-
-- 格式: `docs/description`
-- 示例: `git checkout -b docs/add-api-tables`
-
-#### 性能优化 (Perf)
-
-专门针对组件渲染性能或包体积的优化。
-
-- 格式: `perf/description`
-- 示例: `git checkout -b perf/reduce-bundle-size`
-
-#### 辅助任务 (Chore)
-
-构建流程、依赖库更新、CI 配置等非业务逻辑修改。
-
-- 格式: `chore/description`
-- 示例: `git checkout -b chore/upgrade-react-18`
-
----
-
-### 3. 工作流建议 (Workflow)
-
-1. **同步主分支**: 开发前确保 `dev` 分支是最新的。
-2. **创建分支**: 从 `dev` 拉取新分支。
-   ```bash
-   git checkout -b feat/your-feature-name
-   ```
-3. **提交代码**: 完成开发后提交 PR 到 `dev` 分支。
-4. **代码审查**: 等待代码审查通过后合并。
-
-## 安装使用
-
-### 安装
-
-```bash
-npm install twcpt
-# 或
-yarn add twcpt
-# 或
-pnpm add twcpt
-```
-
-### 基础使用
-
-```typescript
-import { createApp } from 'vue'
-import { twcptInit } from 'twcpt'
-import 'twcpt/dist/index.css'
-
-const app = createApp(App)
-
-// 初始化 TWCPT
-twcptInit({
-  app,
-  defaultLanguage: 'zh-CN', // 可选：设置默认语言
-  colors: {
-    primary: '#FF5722', // 可选：自定义主题色
-    blue: '#2196F3'
-  }
-})
-
-app.mount('#app')
-```
-
-### 样式隔离
-
-为了避免 TWCPT 的颜色配置影响外部项目，所有 TWCPT 组件必须包裹在 `.twcpt-container` 容器内：
-
-```vue
-<template>
-  <div class="twcpt-container">
-    <!-- TWCPT 组件只在此容器内生效 -->
-    <JTWButton type="primary">按钮</JTWButton>
-    <JTWTable :data="tableData" />
-  </div>
-</template>
-```
-
-**重要说明：**
-- `.twcpt-container` 确保 TWCPT 的颜色变量不会影响外部项目
-- 如果 A 项目引用了 B 组件（TWCPT），两者的颜色配置互不影响
-- 每个使用 TWCPT 的区域都需要包裹 `.twcpt-container`
-
-### 按需引入
-
-```typescript
-import { JTWButton, JTWTable } from 'twcpt'
-
-export default {
-  components: {
-    JTWButton,
-    JTWTable
-  }
-}
-```
-
-## 组件列表
-
-- **j-tw series**: 基于 Element Plus 的封装组件
-  - `JTWAutocomplete` - 自动完成输入框
-  - `JTWButton` - 按钮组件
-  - `JTWTable` - 表格组件
-  - 更多组件开发中...
-
-- **j-ch series**: 图表组件
-  - `JCHBar` - 柱状图
-  - `JCHBarLine` - 混合图表
-  - `JCHBubble` - 气泡图
-  - 更多图表组件开发中...
-
-## 开发指南
-
-### 本地开发
-
-```bash
-# 安装依赖
-npm install
-
-# 启动开发服务器
-npm run dev
-
-# 构建组件库
-npm run build
-
-# 发布到 npm
-npm run patch
-```
-
-### 项目结构
-
-```
-src/
-├── components/          # 组件源码
-│   ├── j-tw/           # Element Plus 封装组件
-│   ├── j-ch/           # 图表组件
-│   └── j-c/            # 基础组件
-├── composables/        # 组合式函数
-├── css/               # 样式文件
-└── types.ts           # 类型定义
-```
-
-## 贡献指南
-
-1. Fork 本仓库
-2. 创建你的功能分支 (`git checkout -b feat/AmazingFeature`)
-3. 提交你的修改 (`git commit -m 'Add some AmazingFeature'`)
-4. 推送到分支 (`git push origin feat/AmazingFeature`)
-5. 开启一个 Pull Request
-
-## 许可证
-
-本项目采用 MIT 许可证。详见 [LICENSE](LICENSE) 文件。
-
-## 更新日志
-
+# TWCPT - Vue 3 + Element-plus 组件库
+
+TWCPT 是一个基于 Vue 3、TypeScript 和 Element-plus 构建的现代企业级组件库。
+
+### 分支管理
+
+1. **创建开发分支**: 开发新功能或修复问题时，应基于 `dev` 分支创建对应的功能分支。分支命名格式为 `feat/`、`fix/`、`refactor/`、`docs/`、`perf/` 或 `chore/` 前缀，后跟具体描述。
+
+2. **提交代码审查**: 完成开发后，通过 Pull Request (PR) 或 Merge Request (MR) 提交至 `dev` 分支进行代码审查。提交后可保留自建分支，无需删除。
+
+3. **版本发布流程**: 在 `dev` 分支完成构建后（执行 `npm run build-all`），需先执行 `npm login` 进行身份验证，随后执行 `npm run patch` 发布新版本。
+
+## 项目特点
+
+- 基于 Element-plus 的现代化 UI 组件
+- 全面的 TypeScript 类型支持
+- 开箱即用的企业级业务组件
+- 内置国际化支持 (i18n)
+- 权限控制系统
+- 高度可定制的主题配置
+
+## 分支命名规范 (Branching Guidelines)
+
+为了保持组件库开发的条理性以及 CI/CD 流程的自动化，本项目采用语义化分支命名规范。
+
+### 1. 核心分支 (Core Branches)
+
+| 分支名   | 说明                             |
+|:------|:-------------------------------|
+| `dev` | 开发分支。日常功能集成的基准分支，所有 PR 默认合并至此。 |
+
+---
+
+### 2. 短期协作分支 (Supporting Branches)
+
+所有短期分支应遵循 `类别/描述` 的格式，使用小写字母并以中划线分隔。
+
+#### 功能开发 (Feature)
+
+用于开发新组件或新特性。
+
+- 格式: `feat/description`
+- 示例: `git checkout -b feat/button-component`
+
+#### 缺陷修复 (Bugfix)
+
+用于修复组件 Bug。
+
+- 格式: `fix/description`
+- 示例: `git checkout -b fix/select-dropdown-overflow`
+
+#### 代码重构 (Refactor)
+
+不影响功能逻辑的代码结构调整。
+
+- 格式: `refactor/description`
+- 示例: `git checkout -b refactor/use-callback-optimization`
+
+#### 文档更新 (Docs)
+
+仅涉及文档、注释、Storybook 示例的修改。
+
+- 格式: `docs/description`
+- 示例: `git checkout -b docs/add-api-tables`
+
+#### 性能优化 (Perf)
+
+专门针对组件渲染性能或包体积的优化。
+
+- 格式: `perf/description`
+- 示例: `git checkout -b perf/reduce-bundle-size`
+
+#### 辅助任务 (Chore)
+
+构建流程、依赖库更新、CI 配置等非业务逻辑修改。
+
+- 格式: `chore/description`
+- 示例: `git checkout -b chore/upgrade-react-18`
+
+---
+
+### 3. 工作流建议 (Workflow)
+
+1. **同步主分支**: 开发前确保 `dev` 分支是最新的。
+2. **创建分支**: 从 `dev` 拉取新分支。
+   ```bash
+   git checkout -b feat/your-feature-name
+   ```
+3. **提交代码**: 完成开发后提交 PR 到 `dev` 分支。
+4. **代码审查**: 等待代码审查通过后合并。
+
+## 安装使用
+
+### 安装
+
+```bash
+npm install twcpt
+# 或
+yarn add twcpt
+# 或
+pnpm add twcpt
+```
+
+### 基础使用
+
+```typescript
+import { createApp } from 'vue'
+import { twcptInit } from 'twcpt'
+import 'twcpt/dist/index.css'
+
+const app = createApp(App)
+
+// 初始化 TWCPT
+twcptInit({
+  app,
+  defaultLanguage: 'zh-CN', // 可选：设置默认语言
+  colors: {
+    primary: '#FF5722', // 可选：自定义主题色
+    blue: '#2196F3'
+  }
+})
+
+app.mount('#app')
+```
+
+### 样式隔离
+
+为了避免 TWCPT 的颜色配置影响外部项目，所有 TWCPT 组件必须包裹在 `.twcpt-container` 容器内：
+
+```vue
+<template>
+  <div class="twcpt-container">
+    <!-- TWCPT 组件只在此容器内生效 -->
+    <JTWButton type="primary">按钮</JTWButton>
+    <JTWTable :data="tableData" />
+  </div>
+</template>
+```
+
+**重要说明：**
+- `.twcpt-container` 确保 TWCPT 的颜色变量不会影响外部项目
+- 如果 A 项目引用了 B 组件（TWCPT），两者的颜色配置互不影响
+- 每个使用 TWCPT 的区域都需要包裹 `.twcpt-container`
+
+### 按需引入
+
+```typescript
+import { JTWButton, JTWTable } from 'twcpt'
+
+export default {
+  components: {
+    JTWButton,
+    JTWTable
+  }
+}
+```
+
+## 组件列表
+
+- **j-tw series**: 基于 Element Plus 的封装组件
+  - `JTWAutocomplete` - 自动完成输入框
+  - `JTWButton` - 按钮组件
+  - `JTWTable` - 表格组件
+  - 更多组件开发中...
+
+- **j-ch series**: 图表组件
+  - `JCHBar` - 柱状图
+  - `JCHBarLine` - 混合图表
+  - `JCHBubble` - 气泡图
+  - 更多图表组件开发中...
+
+## 开发指南
+
+### 本地开发
+
+```bash
+# 安装依赖
+npm install
+
+# 启动开发服务器
+npm run dev
+
+# 构建组件库
+npm run build
+
+# 发布到 npm
+npm run patch
+```
+
+### 项目结构
+
+```
+src/
+├── components/          # 组件源码
+│   ├── j-tw/           # Element Plus 封装组件
+│   ├── j-ch/           # 图表组件
+│   └── j-c/            # 基础组件
+├── composables/        # 组合式函数
+├── css/               # 样式文件
+└── types.ts           # 类型定义
+```
+
+## 贡献指南
+
+1. Fork 本仓库
+2. 创建你的功能分支 (`git checkout -b feat/AmazingFeature`)
+3. 提交你的修改 (`git commit -m 'Add some AmazingFeature'`)
+4. 推送到分支 (`git push origin feat/AmazingFeature`)
+5. 开启一个 Pull Request
+
+## 许可证
+
+本项目采用 MIT 许可证。详见 [LICENSE](LICENSE) 文件。
+
+## 更新日志
+
 查看 [CHANGELOG.md](CHANGELOG.md) 了解版本更新详情。

package/dist/components/j-tw-status-img/types.d.ts

@@ -1,3 +1,5 @@
 export interface JTWStatusImgProps {
     name?: string;
+    width?: string | number;
+    height?: string | number;
 }