xkit-editor 2.0.0-alpha.0

package/src/config.ts

@@ -0,0 +1,51 @@
+import type { ComponentConfig } from './component-configs/types'
+import { inputComponentConfig } from './component-configs/input'
+import { selectComponentConfig } from './component-configs/select'
+import { radioComponentConfig } from './component-configs/radio'
+import { checkboxComponentConfig, checkboxesComponentConfig } from './component-configs/checkbox'
+import { switchComponentConfig } from './component-configs/switch'
+import { cascaderComponentConfig } from './component-configs/cascader'
+import { groupComponentConfig } from './component-configs/group'
+import { inputNumberComponentConfig } from './component-configs/input-number'
+import { inputNumberRangeComponentConfig } from './component-configs/input-number-range'
+import { datePickerComponentConfig } from './component-configs/date-picker'
+import { dateRangePickerComponentConfig, dateRangePickerV2ComponentConfig } from './component-configs/date-range-picker'
+import { textareaComponentConfig } from './component-configs/textarea'
+import { inputUploadComponentConfig } from './component-configs/input-upload'
+import { iconSelectComponentConfig } from './component-configs/icon-select'
+import { inputTableComponentConfig } from './component-configs/input-table'
+import { inputArrayComponentConfig } from './component-configs/input-array'
+
+export interface ComponentPaletteGroup {
+  label: string
+  items: ComponentConfig[]
+}
+
+export const componentPaletteGroups: ComponentPaletteGroup[] = [
+  {
+    label: '组合容器',
+    items: [groupComponentConfig, inputTableComponentConfig, inputArrayComponentConfig]
+  },
+  {
+    label: '基础控件',
+    items: [
+      inputComponentConfig,
+      textareaComponentConfig,
+      inputNumberComponentConfig,
+      inputNumberRangeComponentConfig,
+      selectComponentConfig,
+      cascaderComponentConfig,
+      radioComponentConfig,
+      checkboxesComponentConfig,
+      datePickerComponentConfig,
+      dateRangePickerComponentConfig,
+      dateRangePickerV2ComponentConfig,
+      checkboxComponentConfig,
+      switchComponentConfig,
+      inputUploadComponentConfig,
+      iconSelectComponentConfig
+    ]
+  }
+]
+
+export const componentList: ComponentConfig[] = componentPaletteGroups.flatMap((group) => group.items)

package/src/editor-item-wrapper.vue

@@ -0,0 +1,254 @@
+<template>
+  <div 
+    class="editor-item-wrapper" 
+    :class="{ 'is-active': isActive, 'is-container': variant === 'container', 'has-visible-mark': showVisibleMark }"
+    @click.stop="handleSelect"
+  >
+    <!-- 拖拽句柄 -->
+    <div v-if="showDrag" class="editor-item-drag">
+      <i class="ri-drag-move-fill"></i>
+    </div>
+    <!-- 操作按钮 -->
+    <div class="editor-item-actions" v-if="isActive && showActions">
+      <div class="action-btn" @click.stop="handleAction('copy')" title="复制">
+        <i class="ri-file-copy-line"></i>
+      </div>
+      <div class="action-btn delete" @click.stop="handleAction('delete')" title="删除">
+        <i class="ri-delete-bin-line"></i>
+      </div>
+    </div>
+
+    <!-- 标识类型 -->
+    <div class="editor-item-tag" v-if="isActive && showTag">
+      {{ displayTag }}
+    </div>
+    <!-- 可见性条件标识 -->
+    <div class="editor-item-visible-flag" v-if="showVisibleMark" title="编辑显示条件" @click.stop="handleEditVisibleCondition">条件</div>
+
+    <!-- 内容插槽 (FormItem) -->
+    <div class="editor-item-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, type Ref } from 'vue'
+
+const props = withDefaults(defineProps<{
+  item?: any
+  node?: any
+  nodeId?: string | number
+  editorPath?: Array<string | number>
+  parentEditorId?: string | number
+  static?: boolean
+  tag?: string
+  emitCustomEvent: (event: any) => void
+  showActions?: boolean
+  showDrag?: boolean
+  showTag?: boolean
+  selectable?: boolean
+  variant?: 'item' | 'container'
+}>(), {
+  showActions: true,
+  showDrag: true,
+  showTag: true,
+  selectable: true,
+  variant: 'item'
+})
+
+// 从 XEditor 注入当前选中的 id
+const selectedId = inject<Ref<string | number | undefined>>('selectedId')
+const EDITOR_ID_FIELD = '__editorId'
+
+const currentNode = computed(() => props.node ?? props.item)
+const currentNodeId = computed(() => {
+  return props.nodeId ?? currentNode.value?.[EDITOR_ID_FIELD] ?? currentNode.value?._id
+})
+const eventMeta = computed(() => ({
+  variant: props.variant,
+  nodeId: currentNodeId.value,
+  editorPath: props.editorPath,
+  parentEditorId: props.parentEditorId
+}))
+const displayTag = computed(() => {
+  return props.tag ?? currentNode.value?.type ?? currentNode.value?.name ?? 'component'
+})
+
+const showVisibleMark = computed(() => {
+  const node = currentNode.value
+  if (!node || typeof node !== 'object') return false
+  const hasVisible = Object.prototype.hasOwnProperty.call(node, 'visible')
+  if (!hasVisible) return false
+  return node.visible !== true
+})
+
+const isActive = computed(() => {
+  return selectedId?.value && selectedId.value === currentNodeId.value
+})
+
+const handleSelect = () => {
+  if (!props.selectable) return
+  props.emitCustomEvent({
+    name: 'select',
+    payload: currentNode.value,
+    meta: eventMeta.value
+  })
+}
+
+const handleAction = (type: string) => {
+  props.emitCustomEvent({
+    name: type,
+    payload: currentNode.value,
+    meta: eventMeta.value
+  })
+}
+
+const handleEditVisibleCondition = () => {
+  if (props.selectable) handleSelect()
+  props.emitCustomEvent({
+    name: 'edit-visible-condition',
+    payload: currentNode.value,
+    meta: eventMeta.value
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.editor-item-wrapper {
+  position: relative;
+  padding: 2px;
+  border: 1px dashed #dcdfe6;
+  margin-bottom: 2px;
+  background: #fff;
+  cursor: pointer;
+  transition: all 0.2s;
+  min-height: 40px;
+
+  &.is-container {
+    border-style: solid;
+    padding: 6px;
+    margin-bottom: 0;
+  }
+
+  &.has-visible-mark {
+    border-color: #e6a23c;
+    background: #fffaf0;
+  }
+
+  &:hover {
+    border-color: #409eff;
+    background: #f5f7fa;
+    
+    .editor-item-drag {
+      opacity: 1;
+    }
+  }
+
+  &.is-active {
+    outline: 2px solid #409eff;
+    border-color: transparent;
+    background: #ecf5ff;
+    z-index: 10;
+  }
+
+  .editor-item-drag {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 20px;
+    height: 20px;
+    background: #409eff;
+    color: #fff;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    cursor: move;
+    font-size: 12px;
+    z-index: 11;
+  }
+
+  &:hover > .editor-item-drag,
+  &.is-active > .editor-item-drag {
+    display: flex;
+  }
+
+  .editor-item-tag {
+    position: absolute;
+    top: -20px;
+    left: 0;
+    background: #409eff;
+    color: #fff;
+    font-size: 11px;
+    padding: 0 6px;
+    height: 20px;
+    line-height: 20px;
+    border-radius: 2px 2px 0 0;
+  }
+
+  .editor-item-visible-flag {
+    position: absolute;
+    top: -10px;
+    right: 0;
+    height: 18px;
+    line-height: 18px;
+    padding: 0 6px;
+    font-size: 11px;
+    color: #b88230;
+    background: #fdf6ec;
+    border: 1px solid #f3d19e;
+    border-radius: 0 0 0 4px;
+    cursor: pointer;
+    z-index: 12;
+
+    &:hover {
+      color: #ffffff;
+      background: #e6a23c;
+      border-color: #e6a23c;
+    }
+  }
+
+  .editor-item-actions {
+    position: absolute;
+    bottom: -24px;
+    right: -2px;
+    display: flex;
+    background: #409eff;
+    border-radius: 0 0 2px 2px;
+    overflow: hidden;
+    z-index: 11;
+
+    .action-btn {
+      width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      font-size: 14px;
+      cursor: pointer;
+
+      &:hover {
+        background: #66b1ff;
+      }
+
+      &.delete:hover {
+        background: #f56c6c;
+      }
+    }
+  }
+
+  .editor-item-content {
+    // 防止内部 FormItem 自身的点击或边距干扰
+    :deep(.el-form-item) {
+      margin-bottom: 0 !important;
+      padding: 10px;
+      pointer-events: none; // 编辑状态下不触发内部组件交互
+    }
+
+    :deep(.el-form-item.is-editor-container-item) {
+      pointer-events: auto;
+    }
+  }
+}
+</style>

package/src/group-title-styles.ts

@@ -0,0 +1,82 @@
+import { ref } from 'vue'
+
+export interface EditorGroupTitleStyle {
+  key: string
+  label: string
+  className: string
+  description?: string
+}
+
+const styleMap = new Map<string, EditorGroupTitleStyle>()
+const groupTitleStyleVersion = ref(0)
+
+const trackGroupTitleStyleVersion = () => groupTitleStyleVersion.value
+
+export const registerEditorGroupTitleStyle = (style: EditorGroupTitleStyle) => {
+  const previous = styleMap.get(style.key)
+  styleMap.set(style.key, { ...style })
+  groupTitleStyleVersion.value += 1
+
+  return () => {
+    if (previous) {
+      styleMap.set(style.key, previous)
+    } else {
+      styleMap.delete(style.key)
+    }
+    groupTitleStyleVersion.value += 1
+  }
+}
+
+export const getEditorGroupTitleStyles = () => {
+  trackGroupTitleStyleVersion()
+  return Array.from(styleMap.values())
+}
+
+registerEditorGroupTitleStyle({
+  key: 'default',
+  label: '默认标题',
+  className: '',
+  description: '保持组件默认标题展示'
+})
+
+registerEditorGroupTitleStyle({
+  key: 'section',
+  label: '章节标题',
+  className: 'x-group-title--section',
+  description: '适合常规表单分区'
+})
+
+registerEditorGroupTitleStyle({
+  key: 'bar',
+  label: '左边线标题',
+  className: 'x-group-title--bar',
+  description: '强调当前区域层级'
+})
+
+registerEditorGroupTitleStyle({
+  key: 'gradient-bar',
+  label: '渐变条标题',
+  className: 'x-group-title--gradient-bar',
+  description: '主题色淡出背景，适合醒目的分区标题'
+})
+
+registerEditorGroupTitleStyle({
+  key: 'solid',
+  label: '背景条标题',
+  className: 'x-group-title--solid',
+  description: '适合较强的分组分隔'
+})
+
+registerEditorGroupTitleStyle({
+  key: 'underline',
+  label: '分割线标题',
+  className: 'x-group-title--underline',
+  description: '适合信息密度较高的表单'
+})
+
+registerEditorGroupTitleStyle({
+  key: 'quiet',
+  label: '紧凑标题',
+  className: 'x-group-title--quiet',
+  description: '适合弱化标题存在感'
+})

package/src/index.ts

@@ -0,0 +1,6 @@
+export { default as XEditor } from './x-editor.vue'
+export { default as DefaultDictOptionsPanel } from './components/options/default-dict-options-panel.vue'
+export * from './option-sources'
+export * from './group-title-styles'
+export * from './validation-rules'
+export * from './utils/local-dict-center'

package/src/option-sources.ts

@@ -0,0 +1,45 @@
+import { markRaw, ref, type Component } from 'vue'
+
+export interface EditorOptionSource {
+  type: string
+  label: string
+  component?: Component
+}
+
+const sourceMap = new Map<string, EditorOptionSource>()
+const optionSourceVersion = ref(0)
+
+const trackOptionSourceVersion = () => optionSourceVersion.value
+
+export const registerEditorOptionSource = (source: EditorOptionSource) => {
+  const previous = sourceMap.get(source.type)
+  sourceMap.set(source.type, {
+    ...source,
+    component: source.component ? markRaw(source.component) : undefined
+  })
+  optionSourceVersion.value += 1
+
+  return () => {
+    if (previous) {
+      sourceMap.set(source.type, previous)
+    } else {
+      sourceMap.delete(source.type)
+    }
+    optionSourceVersion.value += 1
+  }
+}
+
+export const getEditorOptionSources = () => {
+  trackOptionSourceVersion()
+  return Array.from(sourceMap.values())
+}
+
+export const getEditorOptionSource = (type: string) => {
+  trackOptionSourceVersion()
+  return sourceMap.get(type)
+}
+
+registerEditorOptionSource({
+  type: 'static',
+  label: '直接配置'
+})

package/src/root-configs.ts

@@ -0,0 +1,278 @@
+import { markRaw } from 'vue'
+import type { XFormItem } from 'xkit-ui'
+import FormLayoutEditor from './components/form-layout-editor.vue'
+import type { EditorConfigTab } from './component-configs/types'
+import { fieldRowsToRecord, recordToFieldRows } from './utils/record-field'
+
+export interface RootComponentConfig {
+  label: string
+  value: string
+  configTabs?: EditorConfigTab[]
+  configSchema: {
+    body: XFormItem[]
+  }
+}
+
+const rootBasicConfig: XFormItem[] = [
+  {
+    title: '表单属性',
+    type: 'group',
+    titleClass: 'config-group-title',
+    label: false
+  },
+  {
+    label: '表单标题',
+    name: 'title',
+    type: 'textarea',
+    rows: 3,
+    placeholder: '可选，支持换行'
+  },
+  {
+    label: '标题对齐',
+    name: 'titleAlign',
+    type: 'x-radios',
+    mode: 'button',
+    size: 'small',
+    options: [
+      { label: '左', value: 'left' },
+      { label: '中', value: 'center' },
+      { label: '右', value: 'right' }
+    ],
+    visible(row) {
+      return Boolean(row.title)
+    },
+    pipeIn(value: string | undefined) {
+      return value ?? 'left'
+    },
+    pipeOut(value: string) {
+      return value === 'left' ? undefined : value
+    }
+  },
+  {
+    label: '标签宽度',
+    name: 'labelWidth',
+    type: 'input',
+    placeholder: '例如 100'
+  },
+  {
+    label: '标签位置',
+    name: 'labelPosition',
+    type: 'x-radios',
+    mode: 'button',
+    size: 'small',
+    options: [
+      { label: '左', value: 'left' },
+      { label: '上', value: 'top' },
+      { label: '右', value: 'right' }
+    ],
+    defaultValue: 'right'
+  },
+  {
+    label: '表单尺寸',
+    name: 'size',
+    type: 'x-radios',
+    mode: 'button',
+    size: 'small',
+    options: [
+      { label: '默认', value: '' },
+      { label: '小', value: 'small' },
+      { label: '大', value: 'large' }
+    ]
+  },
+  {
+    label: '全局可清空',
+    name: 'clearable',
+    type: 'switch'
+  },
+  {
+    label: '显示边框',
+    name: 'border',
+    type: 'switch'
+  },
+  {
+    title: '按钮与提交',
+    type: 'group',
+    titleClass: 'config-group-title',
+    label: false
+  },
+  {
+    label: '显示按钮组',
+    name: 'showButtonGroup',
+    type: 'switch',
+    defaultValue: true
+  },
+  {
+    label: '显示提交按钮',
+    name: 'submitButtonVisible',
+    type: 'switch',
+    defaultValue: true
+  },
+  {
+    label: '提交按钮文本',
+    name: 'submitButtonText',
+    type: 'input'
+  },
+  {
+    label: '显示重置按钮',
+    name: 'resetButtonVisible',
+    type: 'switch',
+    defaultValue: true
+  },
+  {
+    label: '按钮对齐方式',
+    name: 'buttonAlign',
+    type: 'x-radios',
+    mode: 'button',
+    size: 'small',
+    options: [
+      { label: '左', value: 'left' },
+      { label: '中', value: 'center' },
+      { label: '右', value: 'right' }
+    ],
+    defaultValue: 'center'
+  }
+]
+
+const rootLayoutConfig: XFormItem[] = [
+  {
+    title: '表单布局',
+    name: 'layout',
+    type: 'custom',
+    component: markRaw(FormLayoutEditor),
+    titleClass: 'config-group-title',
+    label: false,
+    rootKey: 'layout',
+    attrs(row) {
+      return {
+        formSchema: row
+      }
+    }
+  }
+]
+
+const rootDataConfig: XFormItem[] = [
+  {
+    title: '数据与行为',
+    type: 'group',
+    titleClass: 'config-group-title',
+    label: false
+  },
+  {
+    label: '默认值',
+    name: 'defaultValues',
+    type: 'x-input-array',
+    labelPosition: 'top',
+    useScaffoldValue: false,
+    showFooterAddButton: true,
+    addable: true,
+    deletable: true,
+    useLayout: true,
+    layout: {
+      row: { gutter: 8 },
+      col: { span: 12 }
+    },
+    items: [
+      {
+        label: false,
+        name: 'key',
+        type: 'input',
+        clearable: false,
+        placeholder: '字段名',
+        span: 12
+      },
+      {
+        label: false,
+        name: 'value',
+        type: 'input',
+        clearable: true,
+        placeholder: '默认值',
+        span: 12
+      }
+    ],
+    pipeIn: recordToFieldRows,
+    pipeOut: fieldRowsToRecord
+  },
+  {
+    label: '提交后清空',
+    name: 'clearOnSubmit',
+    type: 'switch'
+  },
+  {
+    label: '提交完成后清空',
+    name: 'clearOnSubmitDone',
+    type: 'switch'
+  },
+  {
+    label: '显示提交加载',
+    name: 'showLoading',
+    type: 'switch'
+  },
+  {
+    label: '值实时同步',
+    name: 'valueReactive',
+    type: 'switch'
+  },
+  {
+    label: '自动提交',
+    name: 'autoSubmit',
+    type: 'switch'
+  }
+]
+
+const rootAdvancedConfig: XFormItem[] = [
+  {
+    title: '高级',
+    type: 'group',
+    titleClass: 'config-group-title',
+    label: false
+  },
+  {
+    label: '动作配置',
+    name: 'actions',
+    type: 'input',
+    placeholder: 'JSON'
+  },
+  {
+    label: '表单类型',
+    name: 'formType',
+    type: 'input'
+  },
+  {
+    label: '静态表单',
+    name: 'static',
+    type: 'switch'
+  },
+  {
+    label: '隐藏必填星号',
+    name: 'hideRequiredAsterisk',
+    type: 'switch'
+  },
+  {
+    label: '显示动静切换',
+    name: 'showToggleButton',
+    type: 'switch'
+  },
+  {
+    label: '调试模式',
+    name: 'debug',
+    type: 'switch'
+  }
+]
+
+const rootConfigTabs: EditorConfigTab[] = [
+  { key: 'basic', body: rootBasicConfig },
+  { key: 'layout', body: rootLayoutConfig },
+  { key: 'data', body: rootDataConfig },
+  { key: 'advanced', body: rootAdvancedConfig }
+]
+
+export const rootComponentConfigMap: Record<string, RootComponentConfig> = {
+  'x-form': {
+    label: '表单',
+    value: 'x-form',
+    configTabs: rootConfigTabs,
+    configSchema: {
+      body: [...rootBasicConfig, ...rootLayoutConfig, ...rootDataConfig, ...rootAdvancedConfig]
+    }
+  }
+}