@complex-suite/component-antd 4.10.12

package/LayoutResizeObserver.ts

@@ -0,0 +1,104 @@
+import { Life } from "@complex-suite/utils"
+import { PluginLayout } from "@complex-suite/plugin"
+
+export type LayoutResizeObserverType = (entries: ResizeObserverEntry[], observer: LayoutResizeObserver) => void
+
+export interface LayoutResizeObserverSupplement {
+  unCount?: boolean // 不计算entry
+}
+
+// ResizeObserver 在开始观察一个元素时，确实会立即触发回调一次，即使在观察开始时元素的尺寸没有发生变化。这个立即触发的回调提供了元素的初始尺寸信息。
+class LayoutResizeObserver {
+  static life = new Life()
+  static init(layout: PluginLayout) {
+    layout.onLife('main', {
+      handler: () => {
+        LayoutResizeObserver.life.trigger('mainChange', 'main')
+      }
+    })
+  }
+  static createResizeObserverEntry(target: Element, rect?: DOMRect): ResizeObserverEntry {
+    if (!rect) {
+      rect = target.getBoundingClientRect()
+    }
+    const computedStyle = getComputedStyle(target)
+    const paddingWidth = parseFloat(computedStyle.paddingLeft || '0') + parseFloat(computedStyle.paddingRight || '0')
+    const paddingHeight = parseFloat(computedStyle.paddingTop || '0') + parseFloat(computedStyle.paddingBottom || '0')
+    const borderWidth = parseFloat(computedStyle.borderLeftWidth || '0') + parseFloat(computedStyle.borderRightWidth || '0')
+    const borderHeight = parseFloat(computedStyle.borderTopWidth || '0') + parseFloat(computedStyle.borderBottomWidth || '0')
+    const contentBoxSize = {
+      inlineSize: rect.width - paddingWidth - borderWidth,
+      blockSize: rect.height - paddingHeight - borderHeight
+    }
+
+    const borderBoxSize = {
+      inlineSize: rect.width,
+      blockSize: rect.height
+    }
+    return {
+      target: target,
+      contentRect: rect,
+      borderBoxSize: [borderBoxSize],
+      contentBoxSize: [contentBoxSize],
+      devicePixelContentBoxSize: [contentBoxSize]
+    }
+  }
+  private observer: LayoutResizeObserverType
+  private supplement: LayoutResizeObserverSupplement
+  private targetElements: Map<Element, DOMRect>
+  private lifeId: string
+  constructor(observer: LayoutResizeObserverType, supplement?: LayoutResizeObserverSupplement) {
+    this.observer = observer
+    this.supplement = supplement || {}
+    this.targetElements = new Map()
+    this.lifeId = LayoutResizeObserver.life.on('mainChange', {
+      handler: () => {
+        this.check()
+      }
+    })!
+  }
+
+  observe(target: Element) {
+    // 初始化目标元素的尺寸缓存
+    this.targetElements.set(target, target.getBoundingClientRect())
+    this.check()
+  }
+
+  unobserve(target: Element) {
+    this.targetElements.delete(target)
+  }
+
+  disconnect() {
+    this.targetElements.clear()
+    LayoutResizeObserver.life.off('mainChange', this.lifeId)
+    this.lifeId = ''
+  }
+
+  private check() {
+    const entries: ResizeObserverEntry[] = []
+    this.targetElements.forEach((lastRect, target) => {
+      const rect = target.getBoundingClientRect()
+      if (rect.width !== lastRect.width || rect.height !== lastRect.height) {
+        // 尺寸变化，更新缓存并收集变更条目
+        if (!this.supplement.unCount) {
+          this.targetElements.set(target, rect)
+          entries.push(LayoutResizeObserver.createResizeObserverEntry(target, rect))
+        } else {
+          entries.push({
+            target: target,
+            contentRect: rect,
+            borderBoxSize: [],
+            contentBoxSize: [],
+            devicePixelContentBoxSize: []
+          } as ResizeObserverEntry)
+        }
+      }
+    })
+
+    if (entries.length > 0) {
+      this.observer(entries, this)
+    }
+  }
+}
+
+export default LayoutResizeObserver

package/LocalResizeObserver.ts

@@ -0,0 +1,46 @@
+import LayoutResizeObserver from "./LayoutResizeObserver"
+import type { LayoutResizeObserverSupplement } from "./LayoutResizeObserver"
+
+export type LocalResizeObserverType = (entry: ResizeObserverEntry) => void
+
+class LocalResizeObserver {
+  observer: ResizeObserver | LayoutResizeObserver
+  $observer: LocalResizeObserverType
+  targetElements: Element[]
+  constructor(observer: LocalResizeObserverType, supplement?: LayoutResizeObserverSupplement) {
+    this.$observer = observer
+    const observers = (entries: ResizeObserverEntry[]) => {
+      entries.forEach(entry => {
+        this.trigger(entry)
+      })
+    }
+    if (window.ResizeObserver) {
+      this.observer = new ResizeObserver(observers)
+    } else {
+      this.observer = new LayoutResizeObserver(observers, supplement)
+    }
+    this.targetElements = []
+  }
+  trigger(entry: ResizeObserverEntry) {
+    if (this.targetElements.indexOf(entry.target) > -1) {
+      this.$observer(entry)
+    }
+  }
+  observe(target: Element) {
+    this.observer.observe(target)
+    this.targetElements.push(target)
+  }
+  unobserve(target: Element) {
+    this.observer.unobserve(target)
+    const index = this.targetElements.indexOf(target)
+    if (index > -1) {
+      this.targetElements.splice(index, 1)
+    }
+  }
+  disconnect() {
+    this.observer.disconnect()
+    this.targetElements = []
+  }
+}
+
+export default LocalResizeObserver

package/README.md

@@ -0,0 +1,67 @@
+# Complex Component Antd
+
+一套基于 Ant Design Vue v4 封装的复杂组件库，旨在与 `complex-data` 深度集成，帮助您快速构建功能强大的数据驱动型用户界面。
+
+## ✨ 功能特性
+
+- **数据驱动**: 组件设计紧密围绕 `complex-data` 的数据结构，通过数据字典即可驱动大部分 UI 的生成。
+- **功能丰富的表格**: 提供强大的 `TableView` 组件，内置分页、排序、行选择、操作菜单等常用功能。
+- **灵活的表单**: 包含 `SearchArea`、`EditArea`、`InfoArea` 等组件，轻松应对搜索、编辑、详情展示等多种场景。
+- **高级封装**: `quick` 系列组件（如 `QuickTable`, `QuickModal`）提供了更高层次的抽象，进一步简化开发流程，提升开发效率。
+- **实用工具组件**: 包含 `ModalView`、`ImageViewer`、`SingleImport`、`MultipleImport` 等一系列开箱即用的通用组件。
+- **高度可定制**: 提供丰富的属性和插槽，允许开发者对组件的外观和行为进行深度定制。
+
+## 核心组件
+
+- **`TableView`**: 核心表格组件，用于展示列表数据。支持复杂的列配置、排序、筛选、行选择和操作列。
+- **`SearchArea`**: 搜索区域组件，用于构建数据筛选表单。
+- **`EditArea` / `InfoArea`**: 编辑和详情展示组件，用于创建数据编辑表单和只读信息展示。
+- **`ModalView`**: 模态框组件，封装了 Ant Design Vue 的 `Modal`，并集成了更便捷的菜单和布局管理。
+- **`quick` 系列**: `QuickTable`, `QuickSearch`, `QuickModal` 等，这些组件将 `complex-data` 的数据管理能力与 UI 组件相结合，实现了更高程度的自动化。
+
+## 📦 安装
+
+```bash
+npm install complex-component-antd
+```
+
+## 🚀 快速上手
+
+以下是一个使用 `TableView` 的基本示例：
+
+```vue
+<template>
+  <TableView :list-data="userList" />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { TableView } from 'complex-component-antd';
+import { ComplexList } from 'complex-data';
+import userDictionary from './dictionary/user'; // 假设这是您的用户数据字典
+
+export default defineComponent({
+  name: 'UserList',
+  components: {
+    TableView
+  },
+  setup() {
+    // 使用 complex-data 创建一个列表数据实例
+    const userList = new ComplexList(userDictionary);
+
+    // 加载数据
+    userList.loadData();
+
+    return {
+      userList
+    };
+  }
+});
+</script>
+```
+
+## 依赖
+
+- `ant-design-vue`: ^4.2.6
+- `complex-data`: 4.10.1 - 4.10.99
+- `complex-component`: 4.10.1 - 4.10.99

package/antdConfig.ts

@@ -0,0 +1,361 @@
+import { h, reactive } from "vue"
+import { Button } from "ant-design-vue"
+import type { ButtonType } from "ant-design-vue/es/button"
+import { getType, camelToLine, downloadFile, parseColor } from "@complex-suite/utils"
+import { notice, PluginLayout } from "@complex-suite/plugin"
+import { ChoiceData, PaginationData, AttrsValue, DictionaryData, DictionaryValue, DefaultInfo, dataConfig, DefaultList, DefaultEdit, FileValue } from "@complex-suite/data"
+import type { GridValue } from "@complex-suite/data"
+import type { collapseType } from "@complex-suite/data"
+import type { defaultFileOption, MenuValue } from "@complex-suite/data"
+import { AutoIndex, FileView, componentConfig } from "@complex-suite/component"
+import AutoText from "./src/AutoText.vue"
+import type { modalLayoutOption } from "./src/ModalView"
+import type { tablePayload } from "./src/TableView"
+import MultipleImport from "./src/MultipleImport"
+import SingleImport from "./src/SingleImport"
+import MenuView from "./src/MenuView"
+import ImageViewer from "./src/ImageViewer"
+import type { QuickListProps } from "./quick/QuickList"
+import $icon from "./icon"
+
+export class LayoutLifeData {
+  life: string
+  data: number
+  constructor() {
+    this.life = ''
+    this.data = 0
+  }
+  bind(layout: PluginLayout) {
+    this.life = layout.onLife('resize', {
+      handler: () => {
+        this.data++
+      }
+    })!
+  }
+  unbind(layout: PluginLayout) {
+    layout.offLife('resize', this.life)
+    this.data = 0
+    this.life = ''
+  }
+}
+
+const antdConfig = reactive({
+  componentConfig: componentConfig,
+  dataConfig: dataConfig,
+  pluginLayout: null as null | PluginLayout,
+  isEdit(target: DefaultInfo) {
+    return target instanceof DefaultEdit && target.$editable === true
+  },
+  parseMenuConfirm(confirm: MenuValue['confirm'], next: () => void) {
+    if (!confirm) {
+      next()
+    } else {
+      const confirmOption = typeof confirm === 'string' ? { content: confirm } : confirm
+      notice.confirm(confirmOption.content, confirmOption.title, (act => {
+        if (act === 'ok') {
+          next()
+        }
+      }), confirmOption.okText, confirmOption.cancelText)
+    }
+  },
+  parseCollapse(collapse: boolean, dictionaryCollapse?: collapseType) {
+    if (collapse) {
+      return !!dictionaryCollapse
+    } else {
+      return true
+    }
+  },
+  collapseMenuRender(collapse: boolean, dictionary: DictionaryData) {
+    if (collapse) {
+      return h(MenuView, {
+        data: {
+          icon: 'down',
+          type: 'primary',
+          name: '展开'
+        },
+        onClick() {
+          dictionary.$collapse = false
+        }
+      })
+    } else {
+      return h(MenuView, {
+        data: {
+          icon: 'up',
+          type: 'primary',
+          name: '折叠'
+        },
+        onClick() {
+          dictionary.$collapse = true
+        }
+      })
+    }
+  },
+  style: {
+    element: undefined as undefined | HTMLStyleElement
+  },
+  initStyle() {
+    let rootInnerHTML = ":root{"
+    let styleInnerHTML = ""
+    for (const name in dataConfig.style.color) {
+      const styleName = camelToLine(name, '-')
+      const styleProp = 'complex-color-' + styleName
+      const styleVarProp = '--' + styleProp
+      const styleValue = dataConfig.style.color[name]
+      const rgba = parseColor(styleValue)
+      const rgbStr = `${rgba?.r},${rgba?.g},${rgba?.b}`
+      rootInnerHTML += `\n${styleVarProp}-rgb:${rgbStr};`
+      rootInnerHTML += `\n${styleVarProp}-rgba:${rgbStr},${rgba?.a};`
+      rootInnerHTML += `\n${styleVarProp}:${styleValue};`
+      styleInnerHTML += `\n.${styleProp}{color:var(${styleVarProp});}`
+      styleInnerHTML += `\n.complex-bg-color-${styleName}{background-color:var(${styleVarProp});}`
+    }
+    dataConfig.style.data.animateTime = componentConfig.animateTime
+    for (const name in dataConfig.style.data) {
+      const styleVarProp = '--complex-style-' + camelToLine(name, '-')
+      const styleValue = dataConfig.style.data[name]
+      rootInnerHTML += `\n${styleVarProp}:${styleValue};`
+    }
+    rootInnerHTML += "\n}"
+    // 设置样式规则
+    if (!antdConfig.style.element) {
+      antdConfig.style.element = document.createElement('style')
+      antdConfig.style.element.innerHTML =rootInnerHTML + styleInnerHTML
+      // 将样式元素节点添加到页面头部
+      document.head.appendChild(antdConfig.style.element)
+    } else {
+      antdConfig.style.element.innerHTML =rootInnerHTML + styleInnerHTML
+    }
+  },
+  parseGrid(gridValue: GridValue) {
+    return gridValue
+  },
+  showValue(value: unknown): string | number | undefined {
+    if (!['object', 'array'].includes(getType(value))) {
+      return value as string | number | undefined
+    } else {
+      return (value as Record<PropertyKey, any> | any[]).toString()
+    }
+  },
+  search: {
+    inline: false,
+    collapse: true, // 是否展示折叠
+    lineHeight: 81
+  },
+  edit: {
+    inline: false,
+    observe: false
+  },
+  info: {
+    inline: false,
+    observe: false
+  },
+  table: {
+    size: 'default',
+    bordered: true,
+    auto: {
+      expandWidth: 50,
+      choiceWidth: 60,
+      index: {
+        prop: '$index',
+        pagination: true
+      },
+      pagination: {
+        auto: true,
+        default: 'choice',
+        front: 'total',
+        end: false
+      },
+      sort: {
+        auto: true
+      }
+    },
+    renderTableValue(text: unknown, payload: tablePayload) {
+      const column = payload.payload.column
+      if (column.parse) {
+        text = column.parse(text, payload)
+      }
+      const parent = column.$getParent() as DictionaryValue
+      if (parent && parent.parse) {
+        text = parent.parse(text, payload)
+      }
+      return antdConfig.showValue(text)
+    },
+    renderAutoText(text: string, column: DefaultList | DefaultInfo, payload: tablePayload, attrs?: AttrsValue) {
+      return h(AutoText, {
+        text: text,
+        auto: true,
+        tip: column.$tip,
+        ...componentConfig.parseAttrs(attrs, payload)
+      })
+    },
+    renderIndex(record: Record<PropertyKey, unknown>, index: number, pagination?: PaginationData) {
+      let buildPagination = !!pagination
+      if (pagination) {
+        const depth = record[DictionaryData.$depth]
+        if (depth != undefined && depth !== 0) {
+          buildPagination = false
+        }
+      }
+      return h(AutoIndex, {
+        index: index,
+        pagination: buildPagination ? pagination : undefined
+      })
+    }
+  },
+  choice: {
+    show: true,
+    menu: true,
+    emptyContent: '未选择',
+    formatInfo(payload: { choice: ChoiceData, size: number, menu: boolean }) {
+      return `已选择 ${payload.size}条数据`
+    }
+  },
+  pagination: {
+    formatInfo(payload: { pagination: PaginationData }) {
+      return `共${payload.pagination.page.total}页/${payload.pagination.count}条`
+    }
+  },
+  form: {
+    checkOnRuleChange: true,
+    checkOnInit: false,
+    clearCheckOnInit: true
+  },
+  modal: {
+    width: 520,
+    destroyOnClose: true,
+    layout: {
+      type: 'auto',
+      top: 100,
+      bottom: 100,
+      header: 24 + 8,
+      menu: 32 + 12,
+      padding: [24, 24, 24, 24],
+      mainPadding: [20, 24, 20, 24]
+    } as modalLayoutOption,
+    menu: {
+      close: {
+        type: 'default',
+        name: '关闭',
+        prop: 'close',
+        debounce: 200
+      },
+      cancel: {
+        type: 'default',
+        name: '取消',
+        prop: 'close',
+        debounce: 200
+      },
+      submit: {
+        type: 'primary',
+        name: '确认',
+        prop: 'submit',
+        debounce: 200
+      }
+    } as Record<string, MenuValue>,
+    getMenu(prop: string, targetOption?: Partial<MenuValue>): MenuValue {
+      const data = this.menu[prop as keyof typeof antdConfig.modal.menu]
+      if (data) {
+        return {
+          ...data,
+          ...targetOption
+        }
+      } else {
+        console.error(`${prop}未获取到menu初始化参数，请检查代码！`)
+        return {
+          type: 'default',
+          name: prop,
+          prop: prop,
+          ...targetOption
+        }
+      }
+    }
+  },
+  list: {
+    components: ['spin', 'search', 'table', 'edit'] as ('spin' | 'search' | 'table' | 'info' | 'edit' | 'child')[],
+    editDebounce: {
+      value: 200,
+      start: true
+    } as QuickListProps['editDebounce']
+  },
+  import: {
+    renderMenu(target: (InstanceType<typeof MultipleImport> | InstanceType<typeof SingleImport>)) {
+      const { icon = 'import', type = 'default', name = '上传' } = target.button || {}
+      const props = {
+        class: 'complex-import-menu',
+        loading: target.loading || target.operate,
+        type: type === 'danger' ? 'primary' : type as ButtonType,
+        danger: type === 'danger',
+        icon: $icon.parse(icon),
+        disabled: target.disabled,
+        onClick: () => {
+          (target.$refs.file as InstanceType<typeof FileView>).$el.click()
+        }
+      }
+      const menuRender = target.$slots.menu || (target.render && target.render.menu)
+      if (menuRender) {
+        return menuRender({
+          props,
+          name: name,
+          payload: {
+            value: target.currentValue
+          }
+        })
+      }
+      return h(Button, props, {
+        default: () => name
+      })
+    },
+    renderContent(file: FileValue, disabled: boolean, image: defaultFileOption['image'], onDelete: (file: FileValue) => void) {
+      if (!image) {
+        return h('div', {
+          class: 'complex-import-content'
+        }, {
+          default: () => [
+            h('span', {
+              class: file.url ? 'complex-import-content-name complex-color-link' : 'complex-import-content-name',
+              onClick: () => {
+                if (file.url) {
+                  // 文件对象类型以及存在下载链接时，点击下载
+                  downloadFile(file.url, file.name)
+                }
+              }
+            }, {
+              default: () => file.name
+            }),
+            h('span', {
+              class: 'complex-import-content-delete complex-color-danger',
+              onClick () {
+                onDelete(file)
+              }
+            }, disabled ? [] : [$icon.parse('close')]),
+          ]
+        })
+      } else {
+        const width = antdConfig.componentConfig.dataConfig.formatPixel(image.width)
+        return h('div', {
+          class: 'complex-import-image',
+          style: {
+            width
+          }
+        }, {
+          default: () => [
+            h(ImageViewer, {
+              class: 'complex-import-image-viewer',
+              src: file.url,
+              ...image
+            }),
+            h('span', {
+              class: 'complex-import-content-delete complex-color-danger',
+              onClick () {
+                onDelete(file)
+              }
+            }, disabled ? [] : [$icon.parse('close')]),
+          ]
+        })
+      }
+    }
+  }
+})
+
+
+export default antdConfig