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

package/README.md

@@ -1,4 +1,3 @@
-
 # Vue3 插件模板
 
 本项目为基于 Vite + Vue3 + JavaScript + TailwindCSS 的插件开发模板，适用于发布到 NPM。
@@ -6,8 +5,7 @@
 ## 快速开始
 
 ```bash
-cnpm install
-cnpm run dev
+npm install @cimom/ci-web-plugins-commom
 ```
 
 ## 打包与发布
@@ -16,37 +14,106 @@ 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 publish
    ```
    > 建议发布前切换为 npm 官方源：`npm config set registry https://registry.npmjs.org/`
 
+## 插件使用说明
+
+### 1. NPM 安装方式
+```bash
+npm install @cimom/ci-web-plugins-commom
+```
+
+#### 在 Vue3 项目中使用
+**全局注册：**
+```js
+// main.ts 或 main.js
+import { createApp } from 'vue'
+import App from './App.vue'
+import { HelloPlugin, HelloWorld, VxeTablePro } from '@cimom/ci-web-plugins-commom'
+import '@cimom/ci-web-plugins-commom/dist/CI.Web.Plugins.Commom.css'
+
+const app = createApp(App)
+app.component('HelloPlugin', HelloPlugin)
+app.component('HelloWorld', HelloWorld)
+app.component('VxeTablePro', VxeTablePro)
+app.mount('#app')
+```
+
+**局部注册：**
+```vue
+<script setup>
+import { HelloPlugin, HelloWorld, VxeTablePro } from '@cimom/ci-web-plugins-commom'
+import '@cimom/ci-web-plugins-commom/dist/CI.Web.Plugins.Commom.css'
+</script>
+
+<template>
+  <HelloPlugin msg1="Vite + Vue" />
+  <HelloWorld msg="Vite222 + Vue" />
+  <VxeTablePro />
+</template>
+```
+
+
+#### UMD 方式（适合 script 标签直接引入）
+```html
+<script src="./dist/CI.Web.Plugins.Commom.umd.js"></script>
+<link rel="stylesheet" href="./dist/CI.Web.Plugins.Commom.css" />
+<script>
+  const { HelloPlugin, HelloWorld, VxeTablePro } = window.CIWebPluginsCommom;
+  // 通过 window.CIWebPluginsCommom 访问导出组件
+</script>
+```
+
+> **注意：**
+> - 组件名称和导出对象以实际 dist 产物为准。
+> - 样式文件需手动引入。
+
+### 3. 单独引入组件（推荐）
+
+自 v1.0.4+ 起，支持通过 `exports` 字段单独引入组件：
+
+```js
+import HelloPlugin from '@cimom/ci-web-plugins-commom/HelloPlugin'
+import VxeTablePro from '@cimom/ci-web-plugins-commom/VxeTablePro'
+import '@cimom/ci-web-plugins-commom/dist/CI.Web.Plugins.Commom.css'
+```
+
+- 只会打包用到的组件，减少体积。
+- 也可用于局部注册：
+
+```vue
+<script setup>
+import HelloWorld from '@cimom/ci-web-plugins-commom/HelloWorld'
+</script>
+<template>
+  <HelloWorld msg="单独引入" />
+</template>
+```
+
+> 依赖 `package.json` 的 `exports` 字段，需升级到支持该特性的 npm/yarn 版本。
+
 ### NPM 用户使用方式
 ```bash
 npm install @cimom/ci-web-plugins-commom
 ```
 在项目入口引入：
 ```js
-import YourPlugin from '@cimom/ci-web-plugins-commom'
+import {HelloPlugin,HelloWorld} 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'
+ import HelloPlugin from './components/HelloPlugin.vue'
+ import HelloWorld from './components/HelloWorld.vue'
 </script>
 
 <template>

package/dist/CI.Web.Plugins.Commom.css

@@ -1 +1,2 @@
-/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}.flex{display:flex}.flex-col{flex-direction:column}.justify-center{justify-content:center}.border{border-style:var(--tw-border-style);border-width:1px}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}
+
+/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */.flex{display:flex}.flex-col{flex-direction:column}.justify-center{justify-content:center}.border{border-style:var(--tw-border-style);border-width:1px}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-border-style:solid}}}

package/dist/HelloPlugin/index.js

@@ -0,0 +1 @@
+import"../components/HelloPlugin.vue/index.js";export{default}from"../components/HelloPlugin.vue/index2.js";

package/dist/HelloWorld/index.js

@@ -0,0 +1 @@
+import"../components/HelloWorld.vue/index.js";export{default}from"../components/HelloWorld.vue/index2.js";

package/dist/VxeGridPro/README.md

@@ -0,0 +1,61 @@
+# VxeGridPro 组件使用说明
+
+## 简介
+`VxeGridPro` 是基于 Vue3 + TypeScript 的表格插件模板，集成了 SCSS、CSS、TailwindCSS，适用于 NPM 发布。该组件对 [vxe-table](https://x-extends.github.io/vxe-table/) 进行了二次封装，支持统一扩展功能配置，便于业务快速集成和后续扩展。
+
+## 安装
+
+```bash
+npm install @cimom/ci-web-plugins-commom
+```
+
+## 使用方法
+
+```vue
+<script setup>
+import VxeGridPro from '@cimom/ci-web-plugins-commom/VxeGridPro'
+import { reactive } from 'vue'
+const gridOptions = reactive({
+  columns: [
+    { type: 'seq', width: 70 },
+    { field: 'name', title: '姓名', slots: { header: 'header_name' } },
+    { field: 'sex', title: '性别' },
+    { field: 'age', title: '年龄' }
+  ],
+  data: [
+    { id: 10001, name: '张三', sex: '男', age: 28 },
+    { id: 10002, name: '李四', sex: '女', age: 22 }
+  ]
+})
+function currentRowChange(params) {
+  alert(params.row.name)
+}
+</script>
+
+<template>
+  <VxeGridPro
+    @current-row-change="currentRowChange"
+    :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>
+      <span style="color: red">自定义表头</span>
+    </template>
+  </VxeGridPro>
+</template>
+```
+
+### 插槽支持
+
+所有 `vxe-grid` 插槽均可透传，使用方式与原生一致。
+
+---
+
+> 组件打包采用 `rollup.config.js`，产物位于 `dist/VxeGridPro` 目录，按需引入即可。

package/dist/VxeGridPro/index.js

@@ -0,0 +1 @@
+import"../components/VxeGridPro/index.vue/index.js";export{default}from"../components/VxeGridPro/index.vue/index2.js";

package/dist/VxeTablePro/README.md

@@ -0,0 +1,56 @@
+# VxeTablePro 组件使用说明
+
+## 简介
+`VxeTablePro` 是基于 Vue3 + TypeScript 的表格插件模板，集成了 SCSS、CSS、TailwindCSS，适用于 NPM 发布。该组件对 [vxe-table](https://x-extends.github.io/vxe-table/) 进行了二次封装，支持统一扩展功能配置，便于业务快速集成和后续扩展。
+
+## 安装
+
+```bash
+npm install @cimom/ci-web-plugins-commom
+```
+
+## 使用方法
+
+```vue
+<script setup>
+import { VxeTablePro } from '@cimom/ci-web-plugins-commom'
+或
+import VxeTablePro from '@cimom/ci-web-plugins-commom/VxeTablePro' // 独立引用 可减少打包体积
+import { reactive } from 'vue'
+const gridOptions = reactive({
+  data: [
+    { id: '10001', name: '张三', role: '开发', sex: '男', num: '28', address: '北京' },
+    { id: '10002', name: '李四', role: '测试', sex: '女', num: '22', address: '上海' }
+  ]
+})
+const footerData = [
+  { seq: '合计', num: '50' },
+  { seq: '平均', num: '25' }
+]
+function currentRowChange(params) {
+  alert(params.row.name)
+}
+</script>
+
+<template>
+  <VxeTablePro
+    @current-row-change="currentRowChange"
+    :rowConfig="{ isCurrent: true, isHover: true }"
+    :data="gridOptions.data"
+    show-footer
+    :footer-data="footerData"
+    border
+    stripe
+    height="400"
+    :column-config="{ resizable: true }"
+  />
+</template>
+```
+
+### 插槽支持
+
+所有 `vxe-table` 插槽均可透传，使用方式与原生一致。
+
+---
+
+> 组件打包采用 `rollup.config.js`，产物位于 `dist/VxeTablePro` 目录，按需引入即可。

package/dist/VxeTablePro/index.js

@@ -0,0 +1 @@
+import"../components/VxeTablePro/index.vue/index.js";export{default}from"../components/VxeTablePro/index.vue/index2.js";

package/dist/components/HelloPlugin.vue/index.js

@@ -0,0 +1 @@
+import e from"./index2.js";e.__file="src/components/HelloPlugin.vue";export{e as default};

package/dist/components/HelloPlugin.vue/index2.js

@@ -0,0 +1 @@
+import{reactive as e,ref as s,resolveComponent as a,createElementBlock as t,openBlock as n,createVNode as l,normalizeProps as r,guardReactiveProps as d}from"vue";const i={class:"card flex flex-col justify-center"};var o={__name:"HelloPlugin",props:{msg1:String},setup(o){const g=e({columns:[{type:"seq",width:70},{field:"name",title:"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"}]});return s(0),(e,s)=>{const o=a("vxe-grid");return n(),t("div",i,[l(o,r(d(g)),null,16)])}}};export{o as default};

package/dist/components/HelloWorld.vue/index.js

@@ -0,0 +1 @@
+import e from"./index2.js";e.__file="src/components/HelloWorld.vue";export{e as default};

package/dist/components/HelloWorld.vue/index2.js

@@ -0,0 +1 @@
+import{reactive as e,ref as s,resolveComponent as a,createElementBlock as t,openBlock as r,createVNode as d,normalizeProps as n,guardReactiveProps as l}from"vue";const o={class:"card border text-red-200 flex flex-col justify-center"};var i={__name:"HelloWorld",props:{msg:String},setup(i){const g=e({columns:[{type:"seq",width:70},{field:"name",title:"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"}]});return s(0),(e,s)=>{const i=a("vxe-grid");return r(),t("div",o,[d(i,n(l(g)),null,16)])}}};export{i as default};

package/dist/components/VxeGridPro/index.vue/index.js

@@ -0,0 +1 @@
+import e from"./index2.js";e.__scopeId="data-v-9a040c52",e.__file="src/components/VxeGridPro/index.vue";export{e as default};

package/dist/components/VxeGridPro/index.vue/index2.js

@@ -0,0 +1 @@
+import{computed as n,useAttrs as r,resolveComponent as o,createElementBlock as s,openBlock as a,Fragment as e,createCommentVNode as l,createVNode as t,normalizeProps as p,guardReactiveProps as u,createSlots as i,renderList as m,withCtx as c,renderSlot as d}from"vue";var g={__name:"index",props:{columns:Array,data:Array,proOptions:{type:Object,default:()=>({})}},setup(g){const v=g,f=n((()=>v.proOptions.align?v.columns?.map((n=>({...n,align:n.align||v.proOptions.align}))):v.columns)),O=r(),x={border:!0,stripe:!0,size:"small"},y=n((()=>({...x,...v,...O,columns:f.value})));return(n,r)=>{const g=o("vxe-grid");return a(),s(e,null,[l(" 透传所有属性，合并扩展功能 "),t(g,p(u(y.value)),i({_:2},[m(n.$slots,((r,o)=>({name:o,fn:c((r=>[d(n.$slots,o,p(u(r)))]))})))]),1040)],2112)}}};export{g as default};

package/dist/components/VxeTablePro/index.vue/index.js

@@ -0,0 +1 @@
+import e from"./index2.js";e.__scopeId="data-v-cb836df6",e.__file="src/components/VxeTablePro/index.vue";export{e as default};

package/dist/components/VxeTablePro/index.vue/index2.js

@@ -0,0 +1 @@
+import{useAttrs as e,useSlots as r,computed as s,ref as t,resolveComponent as o,createBlock as a,openBlock as n,mergeProps as l,toHandlers as f,unref as p,createSlots as u,renderList as m,withCtx as v,renderSlot as i,normalizeProps as x,guardReactiveProps as _}from"vue";var b={__name:"index",props:{},setup(b){const c={border:!0,stripe:!0,size:"small"},d=b,$=e();r();const k=s((()=>({...c,...d,...$}))),y=$,z=t();return(e,r)=>{const s=o("vxe-table");return n(),a(s,l(k.value,f(p(y)),{ref_key:"vxeTableRef",ref:z}),u({_:2},[m(e.$slots,((r,s)=>({name:s,fn:v((r=>[i(e.$slots,s,x(_(r)))]))})))]),1040)}}};export{b as default};

package/dist/index/index.js

@@ -0,0 +1 @@
+import"../components/HelloPlugin.vue/index.js";import"../components/HelloWorld.vue/index.js";import"../components/VxeGridPro/index.vue/index.js";import"../components/VxeTablePro/index.vue/index.js";import o from"../components/HelloPlugin.vue/index2.js";import e from"../components/HelloWorld.vue/index2.js";import n from"../components/VxeGridPro/index.vue/index2.js";import l from"../components/VxeTablePro/index.vue/index2.js";var r={install(r){r.component("HelloPlugin",o),r.component("HelloWorld",e),r.component("VxeGridPro",n),r.component("VxeTablePro",l)}};export{o as HelloPlugin,e as HelloWorld,n as VxeGridPro,l as VxeTablePro,r as default};

package/package.json

@@ -1,44 +1,74 @@
 {
   "name": "@cimom/ci-web-plugins-commom",
   "private": false,
-  "version": "1.0.3",
+  "version": "1.0.5",
+  "license": "MIT",
   "author": {
     "name": "Andy Huang",
     "email": "57237184@qq.com"
   },
   "files": [
-    "dist",
-    "*.md"
+    "dist"
   ],
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc -b && vite build",
+    "build": "rollup -c rollup.config.js",
+    "buildvite": "vue-tsc -b && vite build",
     "lib": "vite build --config vite.config.ts",
     "preview": "vite preview"
   },
   "main": "dist/CI.Web.Plugins.Commom.umd.js",
   "module": "dist/CI.Web.Plugins.Commom.es.js",
-  "publishConfig": {
-    "access": "public"
-  },
-  "peerDependencies":{
+  "peerDependencies": {
     "vue": "^3.5.13",
     "vxe-table": "4.13.37"
   },
   "devDependencies": {
-    "vue": "^3.5.13",
-    "vxe-table": "4.13.37",
+    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.1",
     "@tailwindcss/postcss": "^4.1.8",
     "@vitejs/plugin-vue": "^5.2.3",
     "@vue/tsconfig": "^0.7.0",
     "autoprefixer": "^10.4.21",
     "postcss": "^8.5.4",
+    "rollup": "^4.43.0",
+    "rollup-plugin-css-only": "^4.5.2",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-vue": "^6.0.0",
     "sass": "^1.89.2",
     "tailwindcss": "^4.1.8",
     "typescript": "~5.8.3",
     "vite": "^6.3.5",
     "vite-plugin-lazy-import": "^1.0.7",
-    "vue-tsc": "^2.2.8"
+    "vue": "^3.5.13",
+    "vue-tsc": "^2.2.8",
+    "vxe-table": "4.13.37"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index/index.js"
+    },
+    "./HelloPlugin": {
+      "import": "./dist/HelloPlugin/index.js"
+    },
+    "./HelloWorld": {
+      "import": "./dist/HelloWorld/index.js"
+    },
+    "./VxeTablePro": {
+      "import": "./dist/VxeTablePro/index.js"
+    },
+    "./VxeGridPro": {
+      "import": "./dist/VxeGridPro/index.js"
+    }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
+  "dependencies": {
+    "@cimom/ci-web-plugins-commom": "^1.0.4",
+    "rollup-plugin-copy": "^3.5.0"
   }
 }

package/README.en.md

@@ -1,83 +0,0 @@
-
-# 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 <your-plugin-name>
-```
-在项目入口引入：
-```js
-import YourPlugin from '<your-plugin-name>'
-import '<your-plugin-name>/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 } 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

@@ -1,137 +0,0 @@
-# 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/dist/CI.Web.Plugins.Commom.es.js

@@ -1,110 +0,0 @@
-import { reactive as p, ref as u, resolveComponent as d, createElementBlock as _, openBlock as c, createVNode as x, normalizeProps as a, guardReactiveProps as l, computed as g, useAttrs as v, createBlock as T, createSlots as S, renderList as P, withCtx as b, renderSlot as y } from "vue";
-const O = { class: "card flex flex-col justify-center" }, W = {
-  __name: "HelloPlugin",
-  props: {
-    msg1: String
-  },
-  setup(t) {
-    const e = p({
-      columns: [
-        { type: "seq", width: 70 },
-        { field: "name", title: "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" }
-      ]
-    });
-    return u(0), (n, o) => {
-      const s = d("vxe-grid");
-      return c(), _("div", O, [
-        x(s, a(l(e)), null, 16)
-      ]);
-    };
-  }
-}, H = { class: "card border text-red-200 flex flex-col justify-center" }, M = {
-  __name: "HelloWorld",
-  props: {
-    msg: String
-  },
-  setup(t) {
-    const e = p({
-      columns: [
-        { type: "seq", width: 70 },
-        { field: "name", title: "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" }
-      ]
-    });
-    return u(0), (n, o) => {
-      const s = d("vxe-grid");
-      return c(), _("div", H, [
-        x(s, a(l(e)), null, 16)
-      ]);
-    };
-  }
-}, A = (t, e) => {
-  const n = t.__vccOpts || t;
-  for (const [o, s] of e)
-    n[o] = s;
-  return n;
-}, $ = {
-  __name: "index",
-  props: {
-    // vxetable 原有属性（如 columns、data、等）
-    columns: Array,
-    data: Array,
-    // ...可继续补充常用属性
-    // 扩展属性
-    proOptions: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  setup(t) {
-    const e = t, n = g(() => {
-      var r;
-      return e.proOptions.align ? (r = e.columns) == null ? void 0 : r.map((i) => ({
-        ...i,
-        align: i.align || e.proOptions.align
-      })) : e.columns;
-    }), o = v(), s = g(() => ({
-      border: !0,
-      // 默认设置边框，外置优先可以覆盖内置属性
-      ...e,
-      ...o,
-      columns: n.value
-    }));
-    return (r, i) => {
-      const f = d("vxe-grid");
-      return c(), T(f, a(l(s.value)), S({ _: 2 }, [
-        P(r.$slots, (D, m) => ({
-          name: m,
-          fn: b((h) => [
-            y(r.$slots, m, a(l(h)), void 0, !0)
-          ])
-        }))
-      ]), 1040);
-    };
-  }
-}, k = /* @__PURE__ */ A($, [["__scopeId", "data-v-34a3b5ff"]]), w = {
-  install(t) {
-    t.component("HelloPlugin", W), t.component("HelloWorld", M), t.component("VxeTablePro", k);
-  }
-};
-export {
-  W as HelloPlugin,
-  M as HelloWorld,
-  k as VxeTablePro,
-  w as default
-};

package/dist/CI.Web.Plugins.Commom.umd.js

@@ -1 +0,0 @@
-(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(t=typeof globalThis<"u"?globalThis:t||self,e((t.CI=t.CI||{},t.CI.Web=t.CI.Web||{},t.CI.Web.Plugins=t.CI.Web.Plugins||{},t.CI.Web.Plugins.Commom={}),t.Vue))})(this,function(t,e){"use strict";const _={class:"card flex flex-col justify-center"},l={__name:"HelloPlugin",props:{msg1:String},setup(o){const n=e.reactive({columns:[{type:"seq",width:70},{field:"name",title:"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"}]});return e.ref(0),(r,a)=>{const s=e.resolveComponent("vxe-grid");return e.openBlock(),e.createElementBlock("div",_,[e.createVNode(s,e.normalizeProps(e.guardReactiveProps(n)),null,16)])}}},g={class:"card border text-red-200 flex flex-col justify-center"},c={__name:"HelloWorld",props:{msg:String},setup(o){const n=e.reactive({columns:[{type:"seq",width:70},{field:"name",title:"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"}]});return e.ref(0),(r,a)=>{const s=e.resolveComponent("vxe-grid");return e.openBlock(),e.createElementBlock("div",g,[e.createVNode(s,e.normalizeProps(e.guardReactiveProps(n)),null,16)])}}},m=((o,n)=>{const r=o.__vccOpts||o;for(const[a,s]of n)r[a]=s;return r})({__name:"index",props:{columns:Array,data:Array,proOptions:{type:Object,default:()=>({})}},setup(o){const n=o,r=e.computed(()=>{var i;return n.proOptions.align?(i=n.columns)==null?void 0:i.map(d=>({...d,align:d.align||n.proOptions.align})):n.columns}),a=e.useAttrs(),s=e.computed(()=>({border:!0,...n,...a,columns:r.value}));return(i,d)=>{const u=e.resolveComponent("vxe-grid");return e.openBlock(),e.createBlock(u,e.normalizeProps(e.guardReactiveProps(s.value)),e.createSlots({_:2},[e.renderList(i.$slots,(T,p)=>({name:p,fn:e.withCtx(x=>[e.renderSlot(i.$slots,p,e.normalizeProps(e.guardReactiveProps(x)),void 0,!0)])}))]),1040)}}},[["__scopeId","data-v-34a3b5ff"]]),f={install(o){o.component("HelloPlugin",l),o.component("HelloWorld",c),o.component("VxeTablePro",m)}};t.HelloPlugin=l,t.HelloWorld=c,t.VxeTablePro=m,t.default=f,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>