@qilitt-mickey/vue3-temp-skill 1.0.12 → 1.1.2

package/references/data-mapping.md

@@ -1,213 +1,218 @@
-# JsPlumb 数据映射
-
-## 依赖
-
-`jsplumb` — 拖拽连线、字段映射组件。
-
-## 页面结构
-
-```vue
-<script setup lang="ts">
-import { jsPlumb } from 'jsplumb'
-import { message } from '@/utils/message'
-
-defineOptions({ name: 'FieldMapping' })
-
-interface Field {
-  id: string
-  name: string
-  type: string
-  value?: string
-}
-
-const sourceFields = ref<Field[]>([
-  { id: 'src_1', name: 'id', type: 'int', value: '1001' },
-  { id: 'src_2', name: 'organizationid', type: 'int', value: 'ORG_01' },
-  { id: 'src_3', name: 'brand_id', type: 'int' },
-  { id: 'src_4', name: 'source', type: 'string' },
-])
-
-const targetFields = ref<Field[]>([
-  { id: 'target_1', name: 'id', type: 'BIGINT', value: '' },
-  { id: 'target_2', name: 'pid', type: 'BIGINT', value: '' },
-  { id: 'target_3', name: 'tn_id', type: 'BIGINT' },
-  { id: 'target_4', name: 'vpdm', type: 'STRING' },
-])
-
-let jsPlumbInstance: any = null
-</script>
-```
-
-## 初始化 jsPlumb
-
-```typescript
-const initJsPlumb = () => {
-  jsPlumbInstance = jsPlumb.getInstance({
-    // 连接线：Straight(直线) / Bezier(贝塞尔) / Flowchart(折线) / StateMachine(状态机)
-    Connector: ['Straight', { stub: 0, gap: 1 }],
-    PaintStyle: { stroke: '#409eff', strokeWidth: 2 },
-    HoverPaintStyle: { stroke: '#66b1ff', strokeWidth: 3 },
-    Endpoint: ['Dot', { radius: 6 }],
-    EndpointStyle: { fill: 'transparent', stroke: 'transparent' },
-    EndpointHoverStyle: { fill: '#fff', stroke: '#66b1ff' },
-    Container: 'mapping-container', // 必须指定容器 ID
-    ConnectionOverlays: [
-      ['Arrow', {
-        width: 10, length: 10, location: 1,
-        id: 'arrow', foldback: 0.8,
-      }],
-    ],
-    ConnectionsDetachable: true,   // 允许拖动重连
-    ReattachConnections: false,
-  })
-
-  // 点击连线删除
-  jsPlumbInstance.bind('click', (conn: any) => {
-    jsPlumbInstance.deleteConnection(conn)
-  })
-
-  // 注册源和目标
-  nextTick(() => {
-    sourceFields.value.forEach((item) => {
-      jsPlumbInstance.makeSource(item.id, {
-        anchor: 'Right',
-        allowLoopback: false,
-        maxConnections: 1,
-        filter: 'input, select, textarea, .el-input, .el-select',
-        filterExclude: true,
-      })
-    })
-    targetFields.value.forEach((item) => {
-      jsPlumbInstance.makeTarget(item.id, {
-        anchor: 'Left',
-        allowLoopback: false,
-        maxConnections: 2,
-      })
-    })
-  })
-}
-```
-
-## 常用操作
-
-```typescript
-// 同行映射（按顺序一一对应）
-const handleSameLineMapping = () => {
-  jsPlumbInstance.deleteEveryConnection()
-  const len = Math.min(sourceFields.value.length, targetFields.value.length)
-  for (let i = 0; i < len; i++) {
-    jsPlumbInstance.connect({
-      source: sourceFields.value[i].id,
-      target: targetFields.value[i].id,
-    })
-  }
-}
-
-// 清空所有连线
-const clearAll = () => {
-  jsPlumbInstance.deleteEveryConnection()
-}
-
-// 获取映射结果
-const getMappingResult = () => {
-  const connections = jsPlumbInstance.getAllConnections()
-  return connections.map((conn: any) => ({
-    source: sourceFields.value.find(f => f.id === conn.sourceId),
-    target: targetFields.value.find(f => f.id === conn.targetId),
-  }))
-}
-```
-
-## 模板结构
-
-```vue
-<template>
-  <div class="mapping-page p-4 flex flex-col">
-    <!-- 操作栏 -->
-    <el-card shadow="never" class="mb-4">
-      <div class="flex justify-center gap-4 mt-4">
-        <el-button @click="handleSameLineMapping">同行映射</el-button>
-        <el-button type="danger" plain @click="clearAll">清空所有</el-button>
-        <el-button type="primary" @click="getMappingResult">保存映射</el-button>
-      </div>
-    </el-card>
-
-    <!-- 映射区域 -->
-    <div id="mapping-container" class="flex-1 relative flex justify-between bg-white p-8">
-      <!-- 左侧源字段 -->
-      <div class="w-[40%] flex flex-col border rounded">
-        <div v-for="item in sourceFields" :id="item.id" :key="item.id"
-          class="field-item flex border-b hover:bg-gray-50 cursor-pointer relative">
-          <div class="flex-1 p-2">{{ item.name }}</div>
-          <div class="w-[80px] p-2 text-center">{{ item.type }}</div>
-          <!-- 连接点 -->
-          <div :id="`handle-${item.id}`"
-            class="connector-handle-right absolute right-0 top-1/2 -mt-[6px] translate-x-1/2" />
-        </div>
-      </div>
-
-      <!-- 中间留白给连线 -->
-      <div class="w-[20%]" />
-
-      <!-- 右侧目标字段 -->
-      <div class="w-[40%] flex flex-col border rounded">
-        <div v-for="item in targetFields" :id="item.id" :key="item.id"
-          class="field-item flex border-b hover:bg-gray-50 cursor-pointer relative">
-          <div :id="`handle-${item.id}`"
-            class="connector-handle-left absolute left-0 top-1/2 -mt-[6px] -translate-x-1/2" />
-          <div class="flex-1 p-2">{{ item.name }}</div>
-          <div class="w-[80px] p-2 text-center">{{ item.type }}</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-```
-
-## 样式
-
-```scss
-.connector-handle-right,
-.connector-handle-left {
-  z-index: 10;
-  width: 12px;
-  height: 12px;
-  background-color: #fff;
-  border: 1px solid #409eff;
-  border-radius: 50%;
-}
-.connector-handle-right:hover,
-.connector-handle-left:hover {
-  background-color: #e6f7ff;
-  border-color: #1890ff;
-}
-:deep(.jtk-endpoint) { z-index: 20; }
-:deep(.jtk-connector) { z-index: 10; }
-:deep(.jtk-connector.jtk-hover) { z-index: 30; }
-```
-
-## 生命周期
-
-```typescript
-onMounted(() => {
-  nextTick(() => initJsPlumb())
-})
-
-onUnmounted(() => {
-  jsPlumbInstance?.reset()
-})
-```
-
-## 关键约定
-
-1. `Container` 必须指定为映射区域的 DOM ID，否则连线定位错误。
-2. 源端点用 `makeSource`，目标端点用 `makeTarget`，锚点分别在 `Right` 和 `Left`。
-3. `filter` 排除表单元素，避免点击输入框时触发连线拖动。
-4. 连线删除通过 `bind('click')` 事件实现，点击连线即删除。
-5. `onUnmounted` 中必须调用 `jsPlumbInstance.reset()` 清理。
-6. 字段行必须有唯一 `id`，jsPlumb 通过 ID 绑定源/目标。
-7. 中间留白区域（`w-[20%]`）给连线绘制空间。
-
-## 关联文件
-
-- [src/views/workflow/jsplumb/index.vue](file:///e:/work/vue3-web-temp/src/views/workflow/jsplumb/index.vue)
+# JsPlumb 数据映射
+
+> 按本文件示例编写；必须使用选型表中的 `jsplumb`（见 project-inventory），勿改用同类其他连线库；新依赖须待确认。
+
+## 依赖（缺则先装）
+
+| 包 | 版本 |
+|---|---|
+| `jsplumb` | `2.15.6` |
+
+```bash
+pnpm add jsplumb@2.15.6
+```
+
+## 页面结构
+
+```vue
+<script setup lang="ts">
+import { jsPlumb } from 'jsplumb'
+import { message } from '@/utils/message'
+
+defineOptions({ name: 'FieldMapping' })
+
+interface Field {
+  id: string
+  name: string
+  type: string
+  value?: string
+}
+
+const sourceFields = ref<Field[]>([
+  { id: 'src_1', name: 'id', type: 'int', value: '1001' },
+  { id: 'src_2', name: 'organizationid', type: 'int', value: 'ORG_01' },
+  { id: 'src_3', name: 'brand_id', type: 'int' },
+  { id: 'src_4', name: 'source', type: 'string' },
+])
+
+const targetFields = ref<Field[]>([
+  { id: 'target_1', name: 'id', type: 'BIGINT', value: '' },
+  { id: 'target_2', name: 'pid', type: 'BIGINT', value: '' },
+  { id: 'target_3', name: 'tn_id', type: 'BIGINT' },
+  { id: 'target_4', name: 'vpdm', type: 'STRING' },
+])
+
+let jsPlumbInstance: any = null
+</script>
+```
+
+## 初始化 jsPlumb
+
+```typescript
+const initJsPlumb = () => {
+  jsPlumbInstance = jsPlumb.getInstance({
+    // 连接线：Straight(直线) / Bezier(贝塞尔) / Flowchart(折线) / StateMachine(状态机)
+    Connector: ['Straight', { stub: 0, gap: 1 }],
+    PaintStyle: { stroke: '#409eff', strokeWidth: 2 },
+    HoverPaintStyle: { stroke: '#66b1ff', strokeWidth: 3 },
+    Endpoint: ['Dot', { radius: 6 }],
+    EndpointStyle: { fill: 'transparent', stroke: 'transparent' },
+    EndpointHoverStyle: { fill: '#fff', stroke: '#66b1ff' },
+    Container: 'mapping-container', // 必须指定容器 ID
+    ConnectionOverlays: [
+      ['Arrow', {
+        width: 10, length: 10, location: 1,
+        id: 'arrow', foldback: 0.8,
+      }],
+    ],
+    ConnectionsDetachable: true,   // 允许拖动重连
+    ReattachConnections: false,
+  })
+
+  // 点击连线删除
+  jsPlumbInstance.bind('click', (conn: any) => {
+    jsPlumbInstance.deleteConnection(conn)
+  })
+
+  // 注册源和目标
+  nextTick(() => {
+    sourceFields.value.forEach((item) => {
+      jsPlumbInstance.makeSource(item.id, {
+        anchor: 'Right',
+        allowLoopback: false,
+        maxConnections: 1,
+        filter: 'input, select, textarea, .el-input, .el-select',
+        filterExclude: true,
+      })
+    })
+    targetFields.value.forEach((item) => {
+      jsPlumbInstance.makeTarget(item.id, {
+        anchor: 'Left',
+        allowLoopback: false,
+        maxConnections: 2,
+      })
+    })
+  })
+}
+```
+
+## 常用操作
+
+```typescript
+// 同行映射（按顺序一一对应）
+const handleSameLineMapping = () => {
+  jsPlumbInstance.deleteEveryConnection()
+  const len = Math.min(sourceFields.value.length, targetFields.value.length)
+  for (let i = 0; i < len; i++) {
+    jsPlumbInstance.connect({
+      source: sourceFields.value[i].id,
+      target: targetFields.value[i].id,
+    })
+  }
+}
+
+// 清空所有连线
+const clearAll = () => {
+  jsPlumbInstance.deleteEveryConnection()
+}
+
+// 获取映射结果
+const getMappingResult = () => {
+  const connections = jsPlumbInstance.getAllConnections()
+  return connections.map((conn: any) => ({
+    source: sourceFields.value.find(f => f.id === conn.sourceId),
+    target: targetFields.value.find(f => f.id === conn.targetId),
+  }))
+}
+```
+
+## 模板结构
+
+```vue
+<template>
+  <div class="mapping-page p-4 flex flex-col">
+    <!-- 操作栏 -->
+    <el-card shadow="never" class="mb-4">
+      <div class="flex justify-center gap-4 mt-4">
+        <el-button @click="handleSameLineMapping">同行映射</el-button>
+        <el-button type="danger" plain @click="clearAll">清空所有</el-button>
+        <el-button type="primary" @click="getMappingResult">保存映射</el-button>
+      </div>
+    </el-card>
+
+    <!-- 映射区域 -->
+    <div id="mapping-container" class="flex-1 relative flex justify-between bg-white p-8">
+      <!-- 左侧源字段 -->
+      <div class="w-[40%] flex flex-col border rounded">
+        <div v-for="item in sourceFields" :id="item.id" :key="item.id"
+          class="field-item flex border-b hover:bg-gray-50 cursor-pointer relative">
+          <div class="flex-1 p-2">{{ item.name }}</div>
+          <div class="w-[80px] p-2 text-center">{{ item.type }}</div>
+          <!-- 连接点 -->
+          <div :id="`handle-${item.id}`"
+            class="connector-handle-right absolute right-0 top-1/2 -mt-[6px] translate-x-1/2" />
+        </div>
+      </div>
+
+      <!-- 中间留白给连线 -->
+      <div class="w-[20%]" />
+
+      <!-- 右侧目标字段 -->
+      <div class="w-[40%] flex flex-col border rounded">
+        <div v-for="item in targetFields" :id="item.id" :key="item.id"
+          class="field-item flex border-b hover:bg-gray-50 cursor-pointer relative">
+          <div :id="`handle-${item.id}`"
+            class="connector-handle-left absolute left-0 top-1/2 -mt-[6px] -translate-x-1/2" />
+          <div class="flex-1 p-2">{{ item.name }}</div>
+          <div class="w-[80px] p-2 text-center">{{ item.type }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+```
+
+## 样式
+
+```scss
+.connector-handle-right,
+.connector-handle-left {
+  z-index: 10;
+  width: 12px;
+  height: 12px;
+  background-color: #fff;
+  border: 1px solid #409eff;
+  border-radius: 50%;
+}
+.connector-handle-right:hover,
+.connector-handle-left:hover {
+  background-color: #e6f7ff;
+  border-color: #1890ff;
+}
+:deep(.jtk-endpoint) { z-index: 20; }
+:deep(.jtk-connector) { z-index: 10; }
+:deep(.jtk-connector.jtk-hover) { z-index: 30; }
+```
+
+## 生命周期
+
+```typescript
+onMounted(() => {
+  nextTick(() => initJsPlumb())
+})
+
+onUnmounted(() => {
+  jsPlumbInstance?.reset()
+})
+```
+
+## 关键约定
+
+1. `Container` 必须指定为映射区域的 DOM ID，否则连线定位错误。
+2. 源端点用 `makeSource`，目标端点用 `makeTarget`，锚点分别在 `Right` 和 `Left`。
+3. `filter` 排除表单元素，避免点击输入框时触发连线拖动。
+4. 连线删除通过 `bind('click')` 事件实现，点击连线即删除。
+5. `onUnmounted` 中必须调用 `jsPlumbInstance.reset()` 清理。
+6. 字段行必须有唯一 `id`，jsPlumb 通过 ID 绑定源/目标。
+7. 中间留白区域（`w-[20%]`）给连线绘制空间。
+

package/references/data-screen.md

@@ -1,79 +1,94 @@
-# 数据大屏
-
-规范数据大屏/可视化大屏的等比缩放、响应式适配与布局结构。在开发大屏展示页面时参照。
-
-## 布局结构
-
-大屏页面使用固定设计稿尺寸（默认 `1920x1080`），通过 CSS `transform: scale()` 实现等比缩放。
-
-```vue
-<script setup lang="ts">
-defineOptions({ name: 'DataScreen' })
-
-const dataScreenRef = ref<HTMLElement | null>(null)
-
-onMounted(() => {
-  resize()
-  window.addEventListener('resize', resize)
-})
-
-onBeforeUnmount(() => {
-  window.removeEventListener('resize', resize)
-})
-
-function resize() {
-  if (!dataScreenRef.value) return
-  dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`
-}
-
-function getScale(width = 1920, height = 1080) {
-  const ww = window.innerWidth / width
-  const wh = window.innerHeight / height
-  return ww < wh ? ww : wh
-}
-</script>
-
-<template>
-  <div class="s-container">
-    <div ref="dataScreenRef" class="s-content">
-      <!-- 头部 -->
-      <div class="s-header">...</div>
-      <!-- 主体：左/中/右三栏 -->
-      <div class="s-main">
-        <div class="main-lf">...</div>
-        <div class="main-ct">...</div>
-        <div class="main-ri">...</div>
-      </div>
-    </div>
-  </div>
-</template>
-```
-
-## 样式约定
-
-```scss
-.s-container {
-  position: relative;
-  width: 100vw;
-  height: 100vh;
-  overflow: hidden;
-  background: #000;
-}
-
-.s-content {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 1920px;
-  height: 1080px;
-  transform-origin: 0 0;
-}
-```
-
-## 关键约定
-
-1. 设计稿宽度、高度与 `getScale` 参数保持一致。
-2. 内部元素全部按设计稿像素开发，不要写响应式单位。
-3. 图表组件在 `resize` 时调用 `chart.resize()` 重新自适应（如使用 ECharts）。
-4. 定时器在 `onBeforeUnmount` 中清理。
-5. 大屏通常不需要展示菜单/页头，使用独立布局或全屏路由。
+# 数据大屏
+
+> 按本文件示例编写，复用项目已有布局与图表封装；缩放/适配按本规范实现，勿另起一套大屏方案。
+
+规范数据大屏/可视化大屏的等比缩放、响应式适配与布局结构。在开发大屏展示页面时参照。
+
+## 依赖（缺则先装）
+
+| 包 | 版本 | 说明 |
+|---|---|---|
+| `grid-layout-plus` | `1.1.1` | 拖拽网格 widget（按需） |
+| `echarts` | `6.1.0` | 图表时叠加 `chart-echarts` |
+
+```bash
+pnpm add grid-layout-plus@1.1.1
+# 需要图表时：
+pnpm add echarts@6.1.0
+```
+
+## 布局结构
+
+大屏页面使用固定设计稿尺寸（默认 `1920x1080`），通过 CSS `transform: scale()` 实现等比缩放。
+
+```vue
+<script setup lang="ts">
+defineOptions({ name: 'DataScreen' })
+
+const dataScreenRef = ref<HTMLElement | null>(null)
+
+onMounted(() => {
+  resize()
+  window.addEventListener('resize', resize)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', resize)
+})
+
+function resize() {
+  if (!dataScreenRef.value) return
+  dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`
+}
+
+function getScale(width = 1920, height = 1080) {
+  const ww = window.innerWidth / width
+  const wh = window.innerHeight / height
+  return ww < wh ? ww : wh
+}
+</script>
+
+<template>
+  <div class="s-container">
+    <div ref="dataScreenRef" class="s-content">
+      <!-- 头部 -->
+      <div class="s-header">...</div>
+      <!-- 主体：左/中/右三栏 -->
+      <div class="s-main">
+        <div class="main-lf">...</div>
+        <div class="main-ct">...</div>
+        <div class="main-ri">...</div>
+      </div>
+    </div>
+  </div>
+</template>
+```
+
+## 样式约定
+
+```scss
+.s-container {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background: #000;
+}
+
+.s-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 1920px;
+  height: 1080px;
+  transform-origin: 0 0;
+}
+```
+
+## 关键约定
+
+1. 设计稿宽度、高度与 `getScale` 参数保持一致。
+2. 内部元素全部按设计稿像素开发，不要写响应式单位。
+3. 图表组件在 `resize` 时调用 `chart.resize()` 重新自适应（如使用 ECharts）。
+4. 定时器在 `onBeforeUnmount` 中清理。
+5. 大屏通常不需要展示菜单/页头，使用独立布局或全屏路由。