@cimom/ci-web-plugins-commom 1.0.1 → 1.0.3

package/README.en.md

@@ -1,7 +1,7 @@
 
 # Vue3 插件模板
 
-本项目为基于 Vite + Vue3 + TypeScript + TailwindCSS 的插件开发模板，适用于发布到 NPM。
+本项目为基于 Vite + Vue3 + JavaScript + TailwindCSS 的插件开发模板，适用于发布到 NPM。
 
 ## 快速开始
 
@@ -69,7 +69,7 @@ import { HelloPlugin,HelloWorld } from './testPlugins/vxetable/CI.Web.Plugins.Co
 
 ## 主要特性
 - Vue3 组件开发
-- TypeScript 支持
+- JavaScript 支持
 - TailwindCSS 集成
 - 可直接作为插件发布
 

package/README.md

@@ -0,0 +1,82 @@
+
+# Vue3 插件模板
+
+本项目为基于 Vite + Vue3 + JavaScript + TailwindCSS 的插件开发模板，适用于发布到 NPM。
+
+## 快速开始
+
+```bash
+cnpm install
+cnpm run dev
+```
+
+## 打包与发布
+
+### 打包
+```bash
+npm run build
+```
+打包产物会输出到 `dist/` 目录，包括：
+- `CI.Web.Plugins.Commom.umd.js`  (UMD 格式，适合直接 script 标签引用)
+- `CI.Web.Plugins.Commom.es.js`   (ESM 格式，适合现代打包工具)
+- `CI.Web.Plugins.Commom.css`     (包含所有 TailwindCSS 原子类和自定义样式)
+
+### 发布到 NPM
+1. 修改 `package.json` 中的 `name`、`version`、`description` 等信息。
+2. 确认 `main`、`module`、`types` 字段已指向 `dist/` 下的对应文件。
+3. 执行：
+   ```bash
+   npm publish --access public
+   ```
+   > 建议发布前切换为 npm 官方源：`npm config set registry https://registry.npmjs.org/`
+
+### NPM 用户使用方式
+```bash
+npm install @cimom/ci-web-plugins-commom
+```
+在项目入口引入：
+```js
+import YourPlugin from '@cimom/ci-web-plugins-commom'
+import '@cimom/ci-web-plugins-commom/dist/CI.Web.Plugins.Commom.css'
+//app.use(YourPlugin)
+```
+## 实际使用案例:
+import { HelloPlugin,HelloWorld } from './testPlugins/vxetable/CI.Web.Plugins.Commom.es.js'
+```
+<script setup>
+// import HelloPlugin from './components/HelloPlugin.vue'
+// import HelloWorld from './components/HelloWorld.vue'
+import { HelloPlugin,HelloWorld,VxeTablePro } from './testPlugins/vxetable/CI.Web.Plugins.Commom.es.js'
+</script>
+
+<template>
+  <HelloPlugin msg1="Vite + Vue" />
+  <HelloWorld msg="Vite222 + Vue" />
+</template>
+
+<style scoped>
+
+</style>
+```
+
+## 注意事项
+- `main`、`module`、`types` 字段必须指向 `dist/` 下的构建产物，不能指向 `src/`。
+- 发布前请确保已执行 `npm run build`，并包含 `dist/` 目录。
+- TailwindCSS 原子类会自动按组件使用情况生成，无需手动引入。
+- 如需自定义样式，请在 `src/index.css` 中添加。
+- 推荐在 `peerDependencies` 中声明 `vue` 版本要求。
+
+## 主要特性
+- Vue3 组件开发
+- JavaScript 支持
+- TailwindCSS 集成
+- 可直接作为插件发布
+
+## 目录结构
+- `src/index.ts` 插件入口
+- `src/index.css` 插件样式入口
+
+## 参考
+- [Vite](https://vitejs.dev/)
+- [Vue3](https://vuejs.org/)
+- [TailwindCSS](https://tailwindcss.com/)

package/VxeTablePro.md

@@ -0,0 +1,137 @@
+# VxeTablePro 组件使用说明
+
+## 简介
+`VxeTablePro` 是基于 Vue3 + JavaScript 的表格插件模板，集成了 SCSS、CSS、TailwindCSS，适用于 NPM 发布。该组件对 [vxe-table](https://x-extends.github.io/vxe-table/) 进行了二次封装，支持统一扩展功能配置，便于业务快速集成和后续扩展。
+
+## 安装
+
+```bash
+npm install ci-web-plugins-commom-vxetable
+```
+
+或直接复制 `src/components/VxeTablePro` 目录到你的项目中。
+
+## 使用方法
+
+```vue
+<script setup>
+import VxeTablePro from 'ci-web-plugins-commom-vxetable/src/components/VxeTablePro'
+
+const columns = [
+  { field: 'name', title: '姓名' },
+  { field: 'age', title: '年龄' }
+]
+const data = [
+  { name: '张三', age: 18 },
+  { name: '李四', age: 20 }
+]
+const proOptions = {
+  align: 'center' // 统一设置所有列的对齐方式
+}
+</script>
+
+<template>
+  <VxeTablePro :columns="columns" :data="data" :proOptions="proOptions" />
+</template>
+```
+
+### 插槽支持
+
+所有 `vxe-grid` 插槽均可透传，使用方式与原生一致：
+
+```vue
+<VxeTablePro ...>
+  <template #toolbar_buttons>
+    <button>自定义按钮</button>
+  </template>
+</VxeTablePro>
+```
+```
+<script setup>
+// import VxeTablePro from '../../components/VxeTablePro/index.vue'
+import { VxeTablePro } from '@/testPlugins/JS-dll/CI.Web.Plugins.Commom.es.js'
+import { reactive,ref } from 'vue'
+const gridOptions = reactive({
+  columns: [
+    { type: 'seq', width: 70 },
+    { field: 'name', title: 'Name111' ,slots: { header: 'header_name' }},
+    { field: 'sex', title: 'Sex' },
+    { field: 'age', title: 'Age' }
+  ],
+  data: [
+    { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
+    { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
+    { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
+    { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
+  ]
+})
+</script>
+
+<template>
+  <VxeTablePro
+  :stripe="true"
+  :border="false"
+  :rowConfig="{
+    isCurrent: true,
+    isHover: true
+  }" 
+  :columns="gridOptions.columns"
+  :data="gridOptions.data"
+  :proOptions="{ align: 'left' }"
+>
+<template #top>
+  hello top template
+</template>
+ <template #header_name>
+        <div class="first-col">
+          <div class="first-col-top">名称1</div>
+          <div class="first-col-bottom">序号2</div>
+        </div>
+  </template>
+<template #bottom>
+  hello bottom template
+</template>
+</VxeTablePro>
+
+</template>
+
+<style scoped>
+
+</style>
+
+```
+## 属性说明
+
+| 属性        | 说明                       | 类型    | 默认值   |
+| ----------- | -------------------------- | ------- | -------- |
+| columns     | 表格列配置                 | Array   | []       |
+| data        | 表格数据                   | Array   | []       |
+| proOptions  | 扩展功能配置（如统一对齐） | Object  | {}       |
+| ...         | 透传 vxe-grid 所有原有属性 |         |          |
+
+### proOptions 扩展
+- `align`：统一设置所有列的对齐方式（如 'left'、'center'、'right'）。
+
+## 后续功能扩展建议
+
+1. **更多 proOptions 扩展**：
+   - 支持统一设置列宽、表头样式、排序、筛选等。
+   - 支持自定义渲染函数、格式化函数等。
+2. **类型增强**：
+   - 完善 JavaScript 类型定义，提升开发体验。
+3. **主题与样式**：
+   - 支持多主题切换，集成更多 TailwindCSS 实用样式。
+4. **国际化支持**：
+   - 提供多语言配置，适配不同地区需求。
+5. **事件透传与增强**：
+   - 支持更多事件的透传与自定义事件扩展。
+6. **性能优化**：
+   - 针对大数据量表格进行虚拟滚动等优化。
+
+## 贡献与反馈
+
+欢迎提交 issue 或 PR，提出你的建议和需求！
+
+---
+
+> 本项目为 Vue3+JavaScript 插件模板，适用于 NPM 发布，欢迎二次开发和定制。

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@cimom/ci-web-plugins-commom",
   "private": false,
-  "version": "1.0.1",
+  "version": "1.0.3",
   "author": {
     "name": "Andy Huang",
     "email": "57237184@qq.com"
   },
   "files": [
-    "dist"
+    "dist",
+    "*.md"
   ],
   "type": "module",
   "scripts": {