xc-computent 0.3.0 → 0.3.2

package/README.md

@@ -1,121 +1,127 @@
-# Computent Component Library
+# xc-computent
 
-A premium, responsive, and performance-focused Vue 3 component library built with Vite, TypeScript, and native CSS custom properties.
+`xc-computent` 是一个专为现代化工作台（Workbench）和任务管理系统打造的优质、响应式且高性能的 **Vue 3 组件库**。项目基于 Vite、TypeScript 和 WindiCSS 进行构建，提供高开箱即用性与高度可定制的 UI 组件。
 
 ---
 
-## Features
+## 🎨 项目特点
 
-- ⚡ **Vite-powered**: Extremely fast hot-module replacement (HMR) for development and rollup-based bundles.
-- 📦 **Tree-shakeable**: Import only the components you use.
-- 🎨 **Premium Styling**: Sleek, customizable modern dark-theme/slate design tokens.
-- 🏷️ **Type Safe**: First-class TypeScript support with auto-generated declaration (`.d.ts`) files.
-- 🧩 **Zero Globals Leakage**: Component isolation scoped styles.
+- ⚡ **Vite 驱动**：极速的热更新开发体验，基于 Rollup 进行高效打包。
+- 📦 **支持按需引入**：天然支持 Tree-shaking，仅打包你所使用的组件。
+- 🏷️ **类型安全**：原生支持 TypeScript，自动生成完整的类型声明文件 (`.d.ts`)。
+- 🧩 **样式隔离**：组件样式局部作用域隔离，防止全局样式污染。
+- 🛠️ **预置组件**：首期包含精心设计的任务卡片组件 [ToDoCard](file:///Users/tiantian/Desktop/computent/src/lib/components/ToDoCard/ToDoCard.vue)，专为待办、日程等工作流场景优化。
 
 ---
 
-## 🛠️ Local Development & Playground
+## 🔐 NPM 账号信息
 
-To run the interactive component playground and test your changes:
+本项目已与以下 NPM 账号关联，以便于版本的发布与维护：
 
-### 1. Install Dependencies
-```bash
-pnpm install
-```
+- **NPM 账号**: `xiao_ka`
+- **身份验证**: 根目录下的 [.npmrc](file:///Users/tiantian/Desktop/computent/.npmrc) 文件已预配置了专属的安全发布 Token (authToken)。
+  - 在本项目的根目录下执行 npm 相关操作时，会自动加载此 Token，**无需手动执行 `npm login`**。
 
-### 2. Run Local Development Server
-Starts the playground on `http://localhost:5173` using Vite:
-```bash
-pnpm dev
-```
+---
 
-### 3. Build the Library
-Bundles the components into ESM and UMD formats under the `dist/` folder, and generates all `.d.ts` declaration files:
+## 🚀 发布到 npm 的完整流程
+
+当你修改了组件代码并准备发布新版本到 npm 时，请遵循以下流程：
+
+### 1. 确认/更新版本号
+在发布之前，必须更新 [package.json](file:///Users/tiantian/Desktop/computent/package.json) 中的 `"version"` 字段。
+- 例如，从 `0.3.1` 升级到 `0.3.2`：
+  ```json
+  {
+    "name": "xc-computent",
+    "version": "0.3.2",
+    ...
+  }
+  ```
+- 也可以直接在控制台运行以下命令自动升级版本：
+  ```bash
+  # 升级修订号 (e.g., 0.3.1 -> 0.3.2)
+  npm version patch
+  # 升级次版本号 (e.g., 0.3.1 -> 0.4.0)
+  npm version minor
+  # 升级主版本号 (e.g., 0.3.1 -> 1.0.0)
+  npm version major
+  ```
+
+### 2. 构建打包
+发布前必须先编译生成最新的生产包：
 ```bash
 pnpm build
 ```
+编译成功后，将在 `dist/` 目录下生成打包好的 ESM、UMD 格式文件以及 TypeScript 声明文件。
 
-### 4. Local Build Preview
-Previews the bundled output locally:
+### 3. 执行发布
+直接在项目根目录下运行发布命令：
 ```bash
-pnpm preview
+npm publish
 ```
+> **💡 提示**：因为 `.npmrc` 中已配置了发布 Token，此命令会直接将包推送到官方 NPM 镜像源中。
 
 ---
 
-## 🚀 How to Publish to npm
+## 🛠️ 本地开发与预览
 
-Follow these step-by-step instructions to publish this library to the npm registry:
+如果你需要在本地对组件进行开发或调试：
 
-### Step 1: Customize Your Package Name
-Before publishing, open `package.json` and change the `"name"` property to your desired name (e.g. `"my-awesome-components"`). Ensure the name is unique on npm.
-```json
-{
-  "name": "computent",
-  "version": "0.1.0",
-  ...
-}
-```
-
-### Step 2: Log In to npm
-Run the following command in your terminal and follow the prompts to log in (or register):
+### 1. 安装依赖
 ```bash
-npm login
+pnpm install
 ```
 
-### Step 3: Run the Build
-Always compile the latest code before publishing:
+### 2. 运行本地开发服务器 (Playground)
+启动 Vite 开发服务器以调试组件：
 ```bash
-pnpm build
+pnpm dev
 ```
 
-### Step 4: Publish to the Registry
-Publish the package to the npm registry. Since we configured `"files": ["dist"]` in `package.json`, only the bundled production code will be uploaded:
+### 3. 本地预览打包产物
 ```bash
-npm publish
-```
-*Note: If you are using a scoped package name (e.g. `@my-org/computent`), you should publish it as public using:*
-```bash
-npm publish --access public
+pnpm preview
 ```
 
 ---
 
-## 📦 How to Use the Published Library
+## 📦 如何在其他项目中使用
 
-### 1. Installation
-Install the package from npm (replace `computent` with your published package name):
+### 1. 安装组件库
 ```bash
-npm install computent
+npm install xc-computent
+# 或
+pnpm add xc-computent
 ```
 
-### 2. Usage Option A: Global Registration (Vue Plugin)
-Import the library and its styles in your `main.ts` / `main.js`:
+### 2. 全局完整引入
+在 `main.ts` 或 `main.js` 中引入组件库及其样式：
 ```typescript
-import { createApp } from 'vue';
-import App from './App.vue';
+import { createApp } from 'vue'
+import App from './App.vue'
 
-// Import the component library & its styles
-import Computent from 'computent';
-import 'computent/dist/style.css';
+// 引入组件库与样式
+import XcComputent from 'xc-computent'
+import 'xc-computent/dist/style.css'
 
-const app = createApp(App);
-app.use(Computent); // Registers <CButton> and <CBadge> globally
-app.mount('#app');
+const app = createApp(App)
+app.use(XcComputent) // 注册全局组件，如 <CToDoCard>
+app.mount('#app')
 ```
 
-### 3. Usage Option B: Individual Import (Tree-shaking)
-Import only the components you need directly inside your `.vue` files:
-```html
+### 3. 按需引入 (推荐)
+直接在 Vue 组件中引入你需要用到的特定组件：
+```vue
 <template>
-  <div>
-    <Button variant="primary" size="md">Click Me</Button>
-    <Badge type="success" dot>Online</Badge>
+  <div class="workbench">
+    <ToDoCard :data="todoData" @action="handleAction" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { Button, Badge } from 'computent';
-import 'computent/dist/style.css'; // Don't forget to import styles!
+import { ToDoCard } from 'xc-computent'
+import 'xc-computent/dist/style.css' // 引入组件库样式
 </script>
 ```
+

package/dist/components/ToDoCard/ToDoCard.vue.d.ts

@@ -16,6 +16,12 @@ interface ToDoCardProps {
     flowPathTypeList?: any[];
 }
 declare function __VLS_template(): {
+    "read-icon"?(_: {
+        item: any;
+    }): any;
+    "delete-icon"?(_: {
+        item: any;
+    }): any;
     "form-content"?(_: {
         item: any;
     }): any;
@@ -31,12 +37,12 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<
 }>, {
     details: (item: any, type?: number) => void;
 }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    details: (...args: any[]) => void;
     getList: (...args: any[]) => void;
     doScreen: (...args: any[]) => void;
     copy: (...args: any[]) => void;
     delete: (...args: any[]) => void;
     expedite: (...args: any[]) => void;
+    details: (...args: any[]) => void;
 }, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ToDoCardProps>, {
     countList: () => never[];
     typeFlowPath: string;
@@ -46,12 +52,12 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<
     contractTypeLabelMap: () => {};
     flowPathTypeList: () => never[];
 }>>> & {
-    onCopy?: ((...args: any[]) => any) | undefined;
-    onDetails?: ((...args: any[]) => any) | undefined;
     onGetList?: ((...args: any[]) => any) | undefined;
     onDoScreen?: ((...args: any[]) => any) | undefined;
+    onCopy?: ((...args: any[]) => any) | undefined;
     onDelete?: ((...args: any[]) => any) | undefined;
     onExpedite?: ((...args: any[]) => any) | undefined;
+    onDetails?: ((...args: any[]) => any) | undefined;
 }, {
     countList: any[];
     typeFlowPath: string;