@yuuuu_ovo/ci-web-plugins-commom 1.1.3

package/dist/DhtmlxGanttPro/README.md

@@ -0,0 +1,360 @@
+# DhtmlxGanttPro 插件
+官网文档：https://docs.dhtmlx.com/
+基于 DHTMLX-Gantt 的 Vue3 封装组件，提供开箱即用的甘特图功能。
+
+## 功能特性
+
+- ✅ **Vue3 Composition API** - 使用最新的 Vue3 语法
+- ✅ **TypeScript 支持** - 完整的类型定义
+- ✅ **响应式数据** - 支持数据动态更新
+- ✅ **事件系统** - 完整的事件回调机制
+- ✅ **配置灵活** - 支持自定义配置和主题
+- ✅ **中文本地化** - 内置中文界面支持
+- ✅ **只读模式** - 支持只读和编辑模式切换
+- ✅ **生命周期管理** - 自动处理组件初始化和销毁
+- ✅ **错误处理** - 完善的错误处理和恢复机制
+
+## 安装
+
+```bash
+npm install @cimom/ci-web-plugins-commom dhtmlx-gantt
+```
+
+## 基础用法
+
+```vue
+<template>
+  <div>
+    <DhtmlxGanttPro
+      :data="ganttData"
+      :links="ganttLinks"
+      :height="'500px'"
+      @task-click="onTaskClick"
+      @task-change="onTaskChange"
+    />
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue'
+import { DhtmlxGanttPro } from '@cimom/ci-web-plugins-commom'
+
+export default {
+  components: {
+    DhtmlxGanttPro
+  },
+  setup() {
+    const ganttData = ref([
+      { id: 1, text: '任务1', start_date: '2024-01-01', duration: 5, progress: 0.6 },
+      { id: 2, text: '任务2', start_date: '2024-01-08', duration: 3, progress: 0.3 }
+    ])
+
+    const ganttLinks = ref([
+      { id: 1, source: 1, target: 2, type: '0' }
+    ])
+
+    const onTaskClick = ({ task }) => {
+      console.log('点击任务:', task)
+    }
+
+    const onTaskChange = ({ id, task }) => {
+      console.log('任务变更:', id, task)
+    }
+
+    return {
+      ganttData,
+      ganttLinks,
+      onTaskClick,
+      onTaskChange
+    }
+  }
+}
+</script>
+```
+
+## 按需引入
+
+```javascript
+import { DhtmlxGanttPro } from '@cimom/ci-web-plugins-commom/DhtmlxGanttPro'
+```
+
+## 全局注册
+
+```javascript
+import { createApp } from 'vue'
+import CIWebPlugins from '@cimom/ci-web-plugins-commom'
+import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
+
+const app = createApp(App)
+app.use(CIWebPlugins)
+```
+
+## Props
+
+| 参数 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| width | String/Number | '100%' | 甘特图宽度 |
+| height | String/Number | '500px' | 甘特图高度 |
+| data | Array | [] | 任务数据 |
+| links | Array | [] | 任务依赖关系数据 |
+| config | Object | {} | 甘特图配置 |
+| readonly | Boolean | false | 是否只读模式 |
+| locale | String | 'cn' | 本地化语言 |
+| theme | String | 'default' | 主题样式 |
+
+## 数据格式
+
+### 任务数据 (data)
+
+```javascript
+[
+  {
+    id: 1,                    // 任务ID (必需)
+    text: '任务名称',          // 任务名称 (必需)
+    start_date: '2024-01-01', // 开始日期 (必需)
+    duration: 5,              // 工期 (必需)
+    progress: 0.6,            // 进度 0-1
+    parent: 0,                // 父任务ID
+    type: 'task',             // 任务类型
+    color: '#3498db',         // 颜色
+    priority: 1,              // 优先级
+    // ... 其他自定义字段
+  }
+]
+```
+
+### 依赖关系数据 (links)
+
+```javascript
+[
+  {
+    id: 1,        // 链接ID (必需)
+    source: 1,    // 源任务ID (必需)
+    target: 2,    // 目标任务ID (必需)
+    type: '0'     // 链接类型: '0'-'结束到开始', '1'-'开始到开始', '2'-'结束到结束', '3'-'开始到结束'
+  }
+]
+```
+
+## 事件
+
+| 事件名 | 参数 | 说明 |
+|--------|------|------|
+| task-click | { task, event } | 任务点击 |
+| task-dblclick | { task, event } | 任务双击 |
+| task-change | { id, task } | 任务变更 |
+| task-add | { id, task } | 任务添加 |
+| task-delete | { id } | 任务删除 |
+| data-loaded | { data, links } | 数据加载完成 |
+| data-error | error | 数据加载错误 |
+| view-change | { mode } | 视图变更 |
+| scale-change | - | 时间尺度变更 |
+
+## 配置选项
+
+```javascript
+const config = {
+  // 日期格式
+  date_format: '%Y-%m-%d',
+  
+  // 时间尺度
+  scale_unit: 'day',        // 'minute', 'hour', 'day', 'week', 'month', 'year'
+  date_scale: '%m/%d',
+  step: 1,
+  
+  // 子尺度
+  subscales: [
+    { unit: 'month', step: 1, date: '%Y年%m月' }
+  ],
+  
+  // 列配置
+  columns: [
+    { name: 'text', label: '任务名称', width: 150, tree: true },
+    { name: 'start_date', label: '开始时间', width: 80 },
+    { name: 'duration', label: '工期', width: 60 },
+    { name: 'progress', label: '进度', width: 60 }
+  ],
+  
+  // 其他配置...
+}
+```
+
+## 方法
+
+通过 ref 可以调用以下方法：
+
+```javascript
+const ganttRef = ref(null)
+
+// 获取甘特图实例
+const ganttInstance = ganttRef.value.getGanttInstance()
+
+// 刷新甘特图 - 重新应用配置
+ganttRef.value.refresh()
+
+// 获取选中的任务
+const selectedTask = ganttRef.value.getSelectedTask()
+
+// 添加任务
+ganttRef.value.addTask({
+  text: '新任务',
+  start_date: '2024-01-01',
+  duration: 3
+})
+
+// 更新任务
+ganttRef.value.updateTask(1, {
+  text: '更新的任务',
+  progress: 0.8
+})
+
+// 删除任务
+ganttRef.value.deleteTask(1)
+
+// 缩放到适应所有任务
+ganttRef.value.fitToTask()
+```
+
+### 配置更新
+
+为了避免递归更新问题，配置变更不会自动应用到甘特图。如需更新配置，请调用 `refresh()` 方法：
+
+```javascript
+const ganttRef = ref(null)
+const ganttConfig = ref({
+  scale_unit: 'day',
+  date_scale: '%m/%d'
+})
+
+// 更新配置后刷新
+const updateConfig = () => {
+  ganttConfig.value.scale_unit = 'week'
+  ganttConfig.value.date_scale = '%W周'
+  
+  // 手动刷新以应用新配置
+  nextTick(() => {
+    ganttRef.value?.refresh()
+  })
+}
+```
+
+## 高级用法
+
+### 自定义主题
+
+```vue
+<template>
+  <DhtmlxGanttPro
+    :data="ganttData"
+    :theme="'dark'"
+    :config="customConfig"
+  />
+</template>
+
+<script>
+const customConfig = {
+  // 自定义样式配置
+  grid_width: 350,
+  add_column: false,
+  autosize: 'y',
+  details_on_create: true,
+  // 更多配置...
+}
+</script>
+```
+
+### 动态数据加载
+
+```javascript
+const loadProjectData = async (projectId) => {
+  try {
+    const response = await fetch(`/api/projects/${projectId}`)
+    const { data, links } = await response.json()
+    
+    ganttData.value = data
+    ganttLinks.value = links
+  } catch (error) {
+    console.error('数据加载失败:', error)
+  }
+}
+```
+
+### 只读模式
+
+```vue
+<template>
+  <div>
+    <button @click="toggleReadonly">
+      {{ readonly ? '编辑模式' : '只读模式' }}
+    </button>
+    
+    <DhtmlxGanttPro
+      :data="ganttData"
+      :readonly="readonly"
+    />
+  </div>
+</template>
+```
+
+## 样式定制
+
+```css
+/* 容器样式 */
+.dhtmlx-gantt-pro {
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+/* 任务条样式 */
+:deep(.gantt_task_line) {
+  border-radius: 4px;
+}
+
+/* 进度条样式 */
+:deep(.gantt_task_progress) {
+  border-radius: 4px;
+  background: linear-gradient(90deg, #4CAF50, #45a049);
+}
+
+/* 网格头部样式 */
+:deep(.gantt_grid_scale) {
+  background: #f8f9fa;
+  border-bottom: 2px solid #e9ecef;
+}
+```
+
+## 注意事项
+
+1. **依赖版本**: 确保安装了正确版本的 `dhtmlx-gantt`
+2. **CSS 样式**: 需要导入 `dhtmlx-gantt/codebase/dhtmlxgantt.css`
+3. **数据格式**: 严格按照文档格式提供数据
+4. **性能优化**: 大量数据时建议使用分页或虚拟滚动
+5. **浏览器兼容**: 支持现代浏览器，IE 需要额外 polyfill
+
+## 常见问题
+
+### Q: 甘特图不显示？
+A: 检查是否正确导入了 CSS 文件，确保容器有正确的宽高。
+
+### Q: 数据更新后视图不刷新？
+A: 确保使用响应式数据，或者调用 `refresh()` 方法。
+
+### Q: 如何自定义列？
+A: 在 `config.columns` 中配置列定义。
+
+### Q: 如何处理大量数据？
+A: 建议使用分页加载，或者启用虚拟滚动。
+
+## 更新日志
+
+### v1.0.0
+- 🎉 初始版本发布
+- ✨ 支持 Vue3 Composition API
+- ✨ 完整的事件系统
+- ✨ 中文本地化支持
+- ✨ 只读模式
+- ✨ TypeScript 类型定义
+
+## 许可证
+
+MIT License

package/dist/DhtmlxGanttPro/index.js

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

package/dist/HeaderDropdown/README.md

@@ -0,0 +1,302 @@
+# HeaderDropdown 组件使用说明
+
+## 简介
+
+`HeaderDropdown` 是一个用于表格列头的下拉菜单组件，提供了丰富的表格操作功能，包括导入导出、排序、列设置、样式调整等。该组件与 `VxeTablePro` 配合使用，通过传入 `tableRef` 来操作底层表格实例。
+
+## 安装
+
+```bash
+npm install @cimom/ci-web-plugins-commom
+```
+
+## 使用方法
+
+### 基础用法
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import HeaderDropdown from '@cimom/ci-web-plugins-commom/HeaderDropdown'
+import VxeTablePro from '@cimom/ci-web-plugins-commom/VxeTablePro'
+
+const tableRef = ref(null)
+
+// 自定义导出
+function handleExport() {
+  console.log('自定义导出逻辑')
+}
+
+// 自定义导入
+function handleImport() {
+  console.log('自定义导入逻辑')
+}
+</script>
+
+<template>
+  <VxeTablePro ref="tableRef" :data="tableData">
+    <vxe-column field="name" title="姓名">
+      <template #header>
+        <HeaderDropdown
+          :table-ref="tableRef"
+          title="姓名"
+          :column="{ field: 'name' }"
+          :header-config="{
+            import: true,
+            export: true,
+            custom: true,
+            lineHeight: true,
+            fullscreen: true
+          }"
+          :on-export="handleExport"
+          :on-import="handleImport"
+        />
+      </template>
+    </vxe-column>
+  </VxeTablePro>
+</template>
+```
+
+## Props 参数说明
+
+### 必需参数
+
+| 参数名 | 类型 | 说明 |
+|--------|------|------|
+| `tableRef` | Object | VxeTablePro 组件的 ref 实例，用于操作表格 |
+
+### 可选参数
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `title` | String | `null` | 列头标题文本 |
+| `column` | Object | `null` | 列配置对象，包含 `field` 等属性，用于锁定/解锁列功能 |
+
+### headerConfig 配置项
+
+通过 `headerConfig` 对象控制菜单项的显示，所有配置项均为 `Boolean` 类型：
+
+| 配置项 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `import` | Boolean | `false` | 显示"导入"菜单项 |
+| `export` | Boolean | `false` | 显示"导出"菜单项 |
+| `lineHeight` | Boolean | `false` | 显示"行高"设置菜单项 |
+| `custom` | Boolean | `false` | 显示"列设置"菜单项 |
+| `resetCustom` | Boolean | `false` | 显示"重置列"菜单项 |
+| `save` | Boolean | `false` | 显示"保存布局"菜单项 |
+| `feedback` | Boolean | `false` | 显示"样式"菜单项（斑马纹、边框） |
+| `chart` | Boolean | `false` | 显示"排版"菜单项（表格尺寸） |
+| `fullscreen` | Boolean | `false` | 显示"全屏"菜单项 |
+| `print` | Boolean | `false` | 显示"打印"菜单项 |
+| `lock` | Boolean | `false` | 显示"锁定"菜单项（固定列到左侧） |
+| `unlock` | Boolean | `false` | 显示"解锁"菜单项（取消固定列） |
+
+### 回调函数
+
+所有回调函数均为可选，如果提供了函数则显示对应菜单项并执行自定义逻辑，否则使用默认行为：
+
+| 函数名 | 参数 | 说明 |
+|--------|------|------|
+| `onImport` | `()` | 自定义导入逻辑 |
+| `onExport` | `()` | 自定义导出逻辑 |
+| `onAsc` | `()` | 正序排序回调 |
+| `onDesc` | `()` | 倒序排序回调 |
+| `onFullscreen` | `()` | 全屏回调 |
+| `onPrint` | `()` | 打印回调 |
+| `onCustom` | `()` | 列设置回调 |
+| `onIndividual` | `(tableId, storeData)` | 保存个人布局回调，参数：表格ID、存储数据 |
+| `onAll` | `(tableId, storeData)` | 保存所有布局回调，参数：表格ID、存储数据 |
+| `refreshCustom` | `(tableId)` | 刷新布局回调，参数：表格ID |
+| `searchCustom` | `()` | 刷新回调 |
+
+## 功能说明
+
+### 1. 导入/导出
+
+- **导入**：点击后触发 `onImport` 回调，如果未提供则调用 `tableRef.openImport()`
+- **导出**：点击后触发 `onExport` 回调，如果未提供则调用 `tableRef.exportData()` 进行默认导出
+
+### 2. 排序
+
+- **正序(接口)**：触发 `onAsc` 回调，用于服务端排序
+- **倒序(接口)**：触发 `onDesc` 回调，用于服务端排序
+
+### 3. 行高设置
+
+当 `headerConfig.lineHeight` 为 `true` 时显示，支持通过数字输入框调整表格行高（范围：1-200）。
+
+### 4. 列设置
+
+- **列设置**：打开列自定义配置弹窗（需要 VxeTablePro 支持）
+- **重置列**：重置列配置为默认状态，并保存到 localStorage
+
+### 5. 保存布局
+
+当 `headerConfig.save` 为 `true` 时显示，包含子菜单：
+- **保存个人**：调用 `onIndividual(tableId, storeData)` 保存个人配置
+- **保存所有**：调用 `onAll(tableId, storeData)` 保存全局配置
+
+存储数据结构：
+```javascript
+{
+  resizableData: {},      // 列宽配置
+  sortData: {},          // 列排序顺序
+  visibleData: {},        // 列显示/隐藏
+  fixedData: {},         // 固定列配置
+  basicConfig: {         // 基础配置（边框、行高、斑马纹、尺寸）
+    border: true,
+    lineHeight: 36,
+    stripe: false,
+    cellStyle: 'mini'
+  }
+}
+```
+
+### 6. 样式设置
+
+当 `headerConfig.feedback` 为 `true` 时显示，包含：
+- **启用斑马纹**：切换表格斑马纹样式
+- **启用边框**：切换表格边框显示
+
+### 7. 排版设置
+
+当 `headerConfig.chart` 为 `true` 时显示，支持切换表格尺寸：
+- **默认**：`default`
+- **中**：`medium`
+- **小**：`small`
+- **迷你**：`mini`
+
+### 8. 其他功能
+
+- **更新布局**：刷新表格布局配置
+- **刷新**：触发 `searchCustom` 回调
+- **全屏**：切换表格全屏显示
+- **打印**：触发 `onPrint` 回调
+- **锁定/解锁**：固定/取消固定当前列到左侧
+
+## 完整示例
+
+```vue
+<script setup>
+import { ref, reactive } from 'vue'
+import HeaderDropdown from '@cimom/ci-web-plugins-commom/HeaderDropdown'
+import VxeTablePro from '@cimom/ci-web-plugins-commom/VxeTablePro'
+
+const tableRef = ref(null)
+const tableData = reactive([
+  { id: '10001', name: '张三', sex: '男', age: 28 },
+  { id: '10002', name: '李四', sex: '女', age: 22 }
+])
+
+// 自定义导出
+function handleExport() {
+  tableRef.value?.exportData({
+    filename: '用户数据',
+    type: 'xlsx'
+  })
+}
+
+// 保存个人布局
+function handleSaveIndividual(tableId, storeData) {
+  console.log('保存个人布局:', tableId, storeData)
+  // 发送到服务器保存
+  // api.saveUserLayout(tableId, storeData)
+}
+
+// 保存所有布局
+function handleSaveAll(tableId, storeData) {
+  console.log('保存所有布局:', tableId, storeData)
+  // 发送到服务器保存
+  // api.saveGlobalLayout(tableId, storeData)
+}
+</script>
+
+<template>
+  <VxeTablePro 
+    ref="tableRef" 
+    :data="tableData"
+    id="my-table"
+  >
+    <vxe-column field="name" title="姓名" width="120">
+      <template #header>
+        <HeaderDropdown
+          :table-ref="tableRef"
+          title="姓名"
+          :column="{ field: 'name' }"
+          :header-config="{
+            import: true,
+            export: true,
+            custom: true,
+            resetCustom: true,
+            save: true,
+            lineHeight: true,
+            feedback: true,
+            chart: true,
+            fullscreen: true,
+            print: true,
+            lock: true,
+            unlock: true
+          }"
+          :on-export="handleExport"
+          :on-individual="handleSaveIndividual"
+          :on-all="handleSaveAll"
+        />
+      </template>
+    </vxe-column>
+    <vxe-column field="sex" title="性别" width="80" />
+    <vxe-column field="age" title="年龄" width="80" />
+  </VxeTablePro>
+</template>
+```
+
+## 数据持久化
+
+组件会自动将以下配置保存到 `localStorage`：
+
+- **基础配置**：存储在 `tableId` 键下，包含边框、行高、斑马纹、尺寸等
+- **列配置**：存储在 `VXE_CUSTOM_STORE` 键下，包含列宽、排序、显示状态、固定列等
+
+### 读取配置
+
+```javascript
+// 读取基础配置
+const basicConfig = JSON.parse(localStorage.getItem(tableId))
+
+// 读取列配置
+const customStorageKey = 'VXE_CUSTOM_STORE'
+const storage = JSON.parse(localStorage.getItem(customStorageKey))
+const columnConfig = storage[tableId]
+```
+
+## 注意事项
+
+1. **tableRef 必需**：组件需要 `tableRef` 才能正常工作，确保传入正确的 VxeTablePro 实例
+2. **列配置对象**：使用锁定/解锁功能时，需要传入 `column` 对象，包含 `field` 属性
+3. **表格 ID**：确保 VxeTablePro 设置了 `id` 属性，用于数据持久化
+4. **回调函数**：所有回调函数都是可选的，未提供时会使用默认行为
+
+## 与 VxeTablePro 集成
+
+HeaderDropdown 组件设计用于与 VxeTablePro 配合使用：
+
+```vue
+<template>
+  <VxeTablePro ref="tableRef" id="my-table" :data="data">
+    <vxe-column field="name" title="姓名">
+      <template #header>
+        <HeaderDropdown :table-ref="tableRef" :header-config="{ export: true }" />
+      </template>
+    </vxe-column>
+  </VxeTablePro>
+</template>
+```
+
+通过 `tableRef` 可以访问 VxeTablePro 的所有方法，包括：
+- `exportData()` - 导出数据
+- `openImport()` - 打开导入
+- `toggleFullscreen()` - 切换全屏
+- `vxeTableProRef` - 底层 vxe-table 实例
+
+---
+
+> 组件打包采用 `rollup.config.js`，产物位于 `dist/HeaderDropdown` 目录，按需引入即可。

package/dist/HeaderDropdown/index.js

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

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";