@cimom/ci-web-plugins-commom 1.0.0

package/.github/copilot-instructions.md

@@ -0,0 +1,3 @@
+<!-- Use this file to provide workspace-specific custom instructions to Copilot. For more details, visit https://code.visualstudio.com/docs/copilot/copilot-customization#_use-a-githubcopilotinstructionsmd-file -->
+
+本项目为Vue3+TypeScript插件模板，集成了SCSS、CSS、TailwindCSS，适用于NPM发布。

package/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

package/README.en.md

@@ -0,0 +1,83 @@
+
+# Vue3 插件模板
+
+本项目为基于 Vite + Vue3 + TypeScript + 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 组件开发
+- TypeScript 支持
+- TailwindCSS 集成
+- 可直接作为插件发布
+
+## 目录结构
+- `src/index.ts` 插件入口
+- `src/index.css` 插件样式入口
+
+## 参考
+- [Vite](https://vitejs.dev/)
+- [Vue3](https://vuejs.org/)
+- [TailwindCSS](https://tailwindcss.com/)

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

@@ -0,0 +1 @@
+/*! 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}

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

@@ -0,0 +1,110 @@
+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

@@ -0,0 +1 @@
+(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

@@ -0,0 +1 @@
+<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>

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@cimom/ci-web-plugins-commom",
+  "private": false,
+  "version": "1.0.0",
+  "author": {
+    "name": "Andy Huang",
+    "email": "57237184@qq.com"
+  },
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "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":{
+    "vue": "^3.5.13",
+    "vxe-table": "4.13.37"
+  },
+  "devDependencies": {
+    "vue": "^3.5.13",
+    "vxe-table": "4.13.37",
+    "@tailwindcss/postcss": "^4.1.8",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "@vue/tsconfig": "^0.7.0",
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.4",
+    "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"
+  }
+}

package/postcss.config.js

@@ -0,0 +1,9 @@
+import tailwindcss from '@tailwindcss/postcss';
+import autoprefixer from 'autoprefixer';
+
+export default {
+  plugins: [
+    tailwindcss(),
+    autoprefixer()
+  ]
+};

package/public/vite.svg

@@ -0,0 +1 @@
+<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>

package/src/App-demo.vue

@@ -0,0 +1,14 @@
+<script setup>
+// import HelloPlugin from './components/HelloPlugin.vue'
+// import HelloWorld from './components/HelloWorld.vue'
+import { HelloPlugin,HelloWorld } from './testPlugins/JS-dll/CI.Web.Plugins.Commom.es.js'
+</script>
+
+<template>
+  <HelloPlugin msg1="Vite + Vue" />
+  <HelloWorld msg="Vite222 + Vue" />
+</template>
+
+<style scoped>
+
+</style>

package/src/App.vue

@@ -0,0 +1,12 @@
+
+<script setup>
+import VxeTableProDemo from './testPlugins/VxeTableProDemo/index.vue'
+</script>
+
+<template>
+  <VxeTableProDemo/>
+</template>
+
+<style scoped>
+
+</style>

package/src/assets/vue.svg

@@ -0,0 +1 @@
+<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="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/src/components/HelloPlugin.vue

@@ -0,0 +1,33 @@
+<script setup>
+// 定义 props
+const props = defineProps({
+  msg1: String
+})
+import { reactive,ref } from 'vue'
+const gridOptions = 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' }
+  ]
+})
+// 定义响应式数据
+const count = ref(0)
+</script>
+
+<template>
+  <div class="card flex flex-col justify-center">
+    <vxe-grid v-bind="gridOptions"></vxe-grid>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/HelloWorld.vue

@@ -0,0 +1,33 @@
+<script setup>
+// 定义 props
+const props = defineProps({
+  msg: String
+})
+import { reactive,ref } from 'vue'
+const gridOptions = 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' }
+  ]
+})
+// 定义响应式数据
+const count = ref(0)
+</script>
+
+<template>
+  <div class="card border text-red-200 flex flex-col justify-center">
+    <vxe-grid v-bind="gridOptions"></vxe-grid>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/VxeTablePro/README.md

@@ -0,0 +1,84 @@
+# 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>
+```
+
+## 属性说明
+
+| 属性        | 说明                       | 类型    | 默认值   |
+| ----------- | -------------------------- | ------- | -------- |
+| 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/src/components/VxeTablePro/README1.md

@@ -0,0 +1,57 @@
+# nvxe-grid.vue 组件功能分析与扩展建议
+## 现有功能总结
+### 1. 基础表格功能
+- 数据展示 ：支持基本的表格数据展示，包括分页、排序、筛选等
+- 自定义列 ：支持列宽调整、列显示/隐藏、列顺序调整等
+- 列格式化 ：根据不同的控件类型（controlType）提供不同的渲染方式
+- 分页功能 ：支持页码切换、页大小设置
+### 2. 高级表格功能
+- 树形结构 ：支持树形数据展示，包括展开/折叠、树节点操作
+- 行拖拽排序 ：支持普通表格和树形表格的行拖拽排序
+- 自定义样式 ：支持行样式和单元格样式的自定义，基于条件规则
+- 表格导出 ：支持本地导出和远程导出功能
+- 表格汇总 ：支持底部汇总行，可计算数值列的合计
+### 3. 数据交互功能
+- 数据加载 ：支持从API获取数据，包括普通数据和历史数据
+- 数据过滤 ：支持客户端数据过滤
+- 数据操作 ：支持数据的增删改查操作
+- 数据缓存 ：支持将当前选中行数据缓存到Vuex中
+### 4. 链接与操作功能
+- 链接处理 ：支持多种链接类型（Link_Window、Link_Iframe、API等）
+- 文件上传下载 ：支持文件上传和API文件下载
+- 自定义操作列 ：支持配置操作按钮列
+### 5. 自定义配置功能
+- 列头配置 ：支持从API加载列头配置
+- 个性化设置 ：支持保存用户的个性化列设置
+- 条件样式 ：支持基于字段值的条件样式设置
+## 可扩展功能推荐
+### 1. 性能优化
+- 虚拟滚动 ：对于大数据量表格，实现虚拟滚动以提高性能
+- 懒加载树节点 ：树形表格中实现按需加载子节点，减少初始加载数据量
+- 数据缓存机制 ：优化数据缓存策略，减少重复请求
+### 2. 交互体验增强
+- 拖拽调整列宽 ：增强列宽调整的交互体验
+- 行内编辑优化 ：提供更丰富的行内编辑控件和验证机制
+- 批量操作增强 ：提供更便捷的批量选择和操作功能
+- 快捷键支持 ：添加键盘快捷键支持，提高操作效率
+### 3. 数据可视化增强
+- 内嵌图表 ：支持在单元格中嵌入迷你图表（如迷你柱状图、趋势线等）
+- 条件格式增强 ：提供更丰富的条件格式设置，如渐变色、图标集等
+- 数据透视功能 ：增加简单的数据透视分析功能
+### 4. 功能扩展
+- 列筛选增强 ：提供更强大的列筛选功能，如区间筛选、多选筛选等
+- 单元格合并 ：支持按条件自动合并相同内容的单元格
+- 行分组 ：支持按字段值对行进行分组显示
+- 列固定优化 ：优化多级表头中的列固定功能
+- 行详情展开 ：支持行展开显示详细信息
+### 5. 集成增强
+- 与表单联动 ：增强与表单组件的联动能力
+- 数据导入功能 ：增加Excel数据导入功能
+- 打印优化 ：提供更好的表格打印支持
+- 移动端适配 ：优化在移动设备上的显示和操作体验
+### 6. 开发便利性
+- 组件API简化 ：简化配置项，提供更直观的API
+- 主题定制 ：提供更灵活的主题定制能力
+- 事件系统增强 ：提供更丰富的事件回调
+- 插件机制 ：设计插件机制，支持功能扩展
+以上扩展建议基于对现有代码的分析，结合了现代表格组件的发展趋势。根据实际业务需求，可以有选择地实施这些功能扩展，以提升表格组件的功能性和用户体验。

package/src/components/VxeTablePro/index.vue

@@ -0,0 +1,52 @@
+
+<script setup>
+// 扩展属性：proOptions 用于统一扩展功能配置
+import { computed } from 'vue'
+
+// 透传所有原有 vxetable 属性
+const props = defineProps({
+  // vxetable 原有属性（如 columns、data、等）
+  columns: Array,
+  data: Array,
+  // ...可继续补充常用属性
+
+  // 扩展属性
+  proOptions: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+// 处理扩展功能（示例：统一设置所有列的对齐方式）
+const mergedColumns = computed(() => {
+  if (!props.proOptions.align) return props.columns
+  return props.columns?.map(col => ({
+    ...col,
+    align: col.align || props.proOptions.align
+  }))
+})
+
+import { useAttrs } from 'vue'
+const attrs = useAttrs()
+// debugger
+// 合并后的配置，包含 $attrs
+const gridOptions = computed(() => ({
+  border:true,// 默认设置边框，外置优先可以覆盖内置属性
+  ...props,
+  ...attrs,
+  columns: mergedColumns.value
+}))
+</script>
+
+<template>
+  <!-- 透传所有属性，合并扩展功能 -->
+  <vxe-grid v-bind="gridOptions">
+    <template v-for="(_, name) in $slots" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps" />
+    </template>
+  </vxe-grid>
+</template>
+
+<style scoped>
+/* 可在此扩展样式 */
+</style>

package/src/index.css

@@ -0,0 +1,5 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* 你的自定义 CSS */

package/src/index.js

@@ -0,0 +1,17 @@
+// 插件入口文件，导出你的Vue插件
+import HelloPlugin from './components/HelloPlugin.vue';
+import HelloWorld from './components/HelloWorld.vue';
+import VxeTablePro from './components/VxeTablePro/index.vue';
+import './index.css';
+
+// 按需导出每个组件，支持 tree-shaking
+export { HelloWorld, HelloPlugin,VxeTablePro };
+
+// 提供全量注册方法，供需要时使用
+export default {
+  install(app) {
+    app.component('HelloPlugin', HelloPlugin);
+    app.component('HelloWorld', HelloWorld);
+    app.component('VxeTablePro', VxeTablePro);
+  }
+};

package/src/main.js

@@ -0,0 +1,57 @@
+import { createApp } from "vue";
+import "./style.css";
+import 'vxe-table/lib/style.css'
+import {
+  VxeUI,
+  VxeButton,
+  VxeButtonGroup,
+  VxeDrawer,
+  VxeForm,
+  VxeFormGroup,
+  VxeFormItem,
+  VxeIcon,
+  VxeLoading,
+  VxeModal,
+  VxePager,
+  VxePrint,
+  VxeTooltip,
+  VxeUpload,
+} from "vxe-pc-ui";
+import {
+  VxeTable,
+  VxeColumn,
+  VxeColgroup,
+  VxeGrid,
+  VxeToolbar,
+} from "vxe-table";
+import zhCN from "vxe-table/lib/locale/lang/zh-CN";
+
+VxeUI.setI18n("zh-CN", zhCN);
+VxeUI.setLanguage("zh-CN");
+
+function lazyVxeUI(app) {
+  app.use(VxeButton);
+  app.use(VxeButtonGroup);
+  app.use(VxeDrawer);
+  app.use(VxeForm);
+  app.use(VxeFormGroup);
+  app.use(VxeFormItem);
+  app.use(VxeIcon);
+  app.use(VxeLoading);
+  app.use(VxeModal);
+  app.use(VxePager);
+  app.use(VxePrint);
+  app.use(VxeTooltip);
+  app.use(VxeUpload);
+}
+
+function lazyVxeTable(app) {
+  app.use(VxeTable);
+  app.use(VxeColumn);
+  app.use(VxeColgroup);
+  app.use(VxeGrid);
+  app.use(VxeToolbar);
+}
+
+import App from "./App.vue";
+createApp(App).use(lazyVxeUI).use(lazyVxeTable).mount('#app')

package/src/style.css

@@ -0,0 +1 @@
+@import './index.css';

package/src/testPlugins/JS-dll/CI.Web.Plugins.Commom.es.js

@@ -0,0 +1,110 @@
+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/src/testPlugins/VxeTableProDemo/index.vue

@@ -0,0 +1,51 @@
+<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>

package/tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    './index.html',
+    './src/**/*.{vue,js,ts,jsx,tsx}'
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

package/tsconfig.app.json

@@ -0,0 +1,15 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.vue"]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src", "types", "*.js"]
+}

package/vite.config.js

@@ -0,0 +1,41 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vite.dev/config/
+import { fileURLToPath, URL } from 'url'
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  },
+  build: {
+    lib: {
+      entry: 'src/index.js',
+      name: 'CI.Web.Plugins.Commom',
+      fileName: (format) => `CI.Web.Plugins.Commom.${format}.js`,
+    },
+    rollupOptions: {
+      // 确保外部化处理那些你不想打包进库的依赖
+      external: ['vue'],
+      output: {
+        globals: {
+          vue: 'Vue',
+        },
+        exports: 'named',
+        assetFileNames: (assetInfo) => {
+          if (assetInfo.name && assetInfo.name.endsWith('.css')) {
+            return 'CI.Web.Plugins.Commom.css';
+          }
+          return '[name][extname]';
+        },
+      },
+    },
+  },
+  server: {
+    host: '0.0.0.0', // 指定 IP，0.0.0.0 表示可从局域网访问
+    port: 5173,      // 指定端口
+  },
+})

package/vue.config.js

@@ -0,0 +1,13 @@
+import { lazyImport, VxeResolver } from "vite-plugin-lazy-import";
+
+export default defineConfig({
+  plugins: [
+    lazyImport({
+      resolvers: [
+        VxeResolver({
+          libraryName: "vxe-table",
+        }),
+      ],
+    }),
+  ],
+});