xkit-editor 2.0.0-alpha.0

package/src/components/form-layout-editor.vue

@@ -0,0 +1,263 @@
+<template>
+  <div class="form-layout-editor">
+    <div class="form-layout-editor__header">
+      <span class="form-layout-editor__title">{{ title || '表单布局' }}</span>
+      <el-radio-group :model-value="activeType" size="small" @update:modelValue="handleTypeChange">
+        <el-radio-button label="grid">栅格</el-radio-button>
+        <el-radio-button label="descriptions">描述表</el-radio-button>
+        <el-radio-button label="table">表格</el-radio-button>
+      </el-radio-group>
+    </div>
+
+    <ObjectSectionEditor
+      :key="activeType"
+      :model-value="activeProfile"
+      :title="activeProfileTitle"
+      :root-key="`layout.${activeType}`"
+      :value-mode="activeValueMode"
+      section-mode="plain"
+      :sections="activeSections"
+      @update:modelValue="handleProfileChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ElMessageBox, ElRadioButton, ElRadioGroup } from 'element-plus'
+import ObjectSectionEditor from './object-section-editor.vue'
+import { containerLayoutSections, descriptionsLayoutSections, tableLayoutSections } from '../component-configs/layout-sections'
+
+type LayoutType = 'grid' | 'descriptions' | 'table'
+
+interface LayoutValue {
+  type?: LayoutType
+  row?: Record<string, any>
+  col?: Record<string, any>
+  grid?: Record<string, any>
+  descriptions?: Record<string, any>
+  table?: Record<string, any>
+}
+
+const props = defineProps<{
+  modelValue?: LayoutValue
+  title?: string
+  formSchema?: Record<string, any>
+}>()
+
+const emit = defineEmits<(event: 'update:modelValue', value: LayoutValue | undefined) => void>()
+
+const layoutTypes: LayoutType[] = ['grid', 'descriptions', 'table']
+
+const cleanRecord = (value: any) => {
+  if (!value || typeof value !== 'object') return undefined
+  const next = Object.entries(value).reduce<Record<string, any>>((result, [key, itemValue]) => {
+    if (itemValue !== undefined && itemValue !== null && itemValue !== '') {
+      result[key] = itemValue
+    }
+    return result
+  }, {})
+  return Object.keys(next).length > 0 ? next : undefined
+}
+
+const normalizeLegacyLayout = (layout?: LayoutValue): LayoutValue => {
+  const current = layout || {}
+  const grid = current.grid || cleanRecord({ row: current.row, col: current.col })
+  return {
+    ...current,
+    type: current.type || 'grid',
+    ...(grid ? { grid } : {})
+  }
+}
+
+const activeType = computed<LayoutType>(() => {
+  const type = props.modelValue?.type
+  return layoutTypes.includes(type as LayoutType) ? (type as LayoutType) : 'grid'
+})
+
+const normalizedLayout = computed(() => normalizeLegacyLayout(props.modelValue))
+const activeProfile = computed(() => {
+  if (activeType.value === 'grid') {
+    return normalizedLayout.value.grid || cleanRecord({ row: normalizedLayout.value.row, col: normalizedLayout.value.col }) || {}
+  }
+  return normalizedLayout.value[activeType.value] || {}
+})
+const activeSections = computed(() => {
+  if (activeType.value === 'descriptions') return descriptionsLayoutSections
+  if (activeType.value === 'table') return tableLayoutSections
+  return containerLayoutSections
+})
+const activeProfileTitle = computed(() => {
+  if (activeType.value === 'descriptions') return '描述表配置'
+  if (activeType.value === 'table') return '表格配置'
+  return '栅格配置'
+})
+const activeValueMode = computed(() => (activeType.value === 'grid' ? 'nested' : 'flat'))
+const getTableColumns = (layout: LayoutValue) => Math.max(2, Math.floor(Number(layout.table?.columns || 4)))
+const getDefaultFieldColumns = (layout: LayoutValue) => Math.min(2, getTableColumns(layout))
+
+const defaultProfile = (type: LayoutType, sourceLayout: LayoutValue) => {
+  if (type === 'grid') {
+    const sourceItemsPerRow = sourceLayout.table?.columns
+      ? Math.max(1, Math.floor(getTableColumns(sourceLayout) / getDefaultFieldColumns(sourceLayout)))
+      : sourceLayout.descriptions?.column || 3
+    return {
+      row: sourceLayout.grid?.row,
+      col: {
+        span: Math.max(1, Math.round(24 / sourceItemsPerRow))
+      }
+    }
+  }
+  if (type === 'descriptions') {
+    return {
+      column: sourceLayout.table?.columns
+        ? Math.max(1, Math.floor(getTableColumns(sourceLayout) / getDefaultFieldColumns(sourceLayout)))
+        : Math.round(24 / (sourceLayout.grid?.col?.span || 8)) || 3,
+      labelWidth: props.formSchema?.labelWidth
+    }
+  }
+  return {
+    columns: 4,
+    labelWidth: props.formSchema?.labelWidth,
+    valueMinWidth: 220
+  }
+}
+
+const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max)
+
+const getGridSpan = (item: any, layout: LayoutValue) => {
+  return item.layoutCfg?.grid?.span ?? item.span ?? layout.grid?.col?.span ?? layout.col?.span ?? 24
+}
+
+const getSourceUnits = (item: any, sourceType: LayoutType, layout: LayoutValue) => {
+  if (sourceType === 'table') {
+    const itemProfile = item.layoutCfg?.table || {}
+    const labelColspan = Math.max(1, Math.floor(Number(itemProfile.labelColspan || 1)))
+    const valueColspan = Math.max(1, Math.floor(Number(itemProfile.valueColspan || 1)))
+    return {
+      value: labelColspan + valueColspan,
+      total: getTableColumns(layout)
+    }
+  }
+  if (sourceType === 'descriptions') {
+    return {
+      value: item.layoutCfg?.descriptions?.span ?? 1,
+      total: layout.descriptions?.column ?? 3
+    }
+  }
+  return {
+    value: getGridSpan(item, layout),
+    total: 24
+  }
+}
+
+const ensureLayoutCfg = (item: any) => {
+  if (!item.layoutCfg || typeof item.layoutCfg !== 'object') {
+    item.layoutCfg = {}
+  }
+  return item.layoutCfg
+}
+
+const migrateItemToLayout = (item: any, sourceType: LayoutType, targetType: LayoutType, layout: LayoutValue) => {
+  const cfg = ensureLayoutCfg(item)
+  const source = getSourceUnits(item, sourceType, layout)
+  if (targetType === 'table') {
+    const columns = getTableColumns(layout)
+    const fieldColumns = clamp(Math.round((source.value / source.total) * columns), 2, columns)
+    cfg.table = {
+      ...(cfg.table || {}),
+      labelColspan: 1,
+      valueColspan: fieldColumns - 1
+    }
+  } else if (targetType === 'descriptions') {
+    const column = layout.descriptions?.column ?? defaultProfile('descriptions', layout).column ?? 3
+    cfg.descriptions = {
+      ...(cfg.descriptions || {}),
+      span: clamp(Math.round((source.value / source.total) * column), 1, column)
+    }
+  } else {
+    cfg.grid = {
+      ...(cfg.grid || {}),
+      span: clamp(Math.round((source.value / source.total) * 24), 1, 24)
+    }
+  }
+
+  if (Array.isArray(item.body)) {
+    item.body.forEach((child: any) => migrateItemToLayout(child, sourceType, targetType, layout))
+  }
+}
+
+const migrateBodyToLayout = (sourceType: LayoutType, targetType: LayoutType, layout: LayoutValue) => {
+  const body = props.formSchema?.body
+  if (!Array.isArray(body)) return
+  body.forEach((item) => migrateItemToLayout(item, sourceType, targetType, layout))
+}
+
+const emitLayout = (layout: LayoutValue) => {
+  const next = cleanRecord(layout) as LayoutValue | undefined
+  emit('update:modelValue', next)
+}
+
+const handleProfileChange = (profile: Record<string, any>) => {
+  const next = normalizeLegacyLayout(props.modelValue)
+  next[activeType.value] = profile
+  if (activeType.value === 'grid') {
+    delete next.row
+    delete next.col
+  }
+  emitLayout(next)
+}
+
+const handleTypeChange = async (nextTypeValue: string | number | boolean) => {
+  const nextType = nextTypeValue as LayoutType
+  if (nextType === activeType.value || !layoutTypes.includes(nextType)) return
+
+  const sourceType = activeType.value
+  const next = normalizeLegacyLayout(props.modelValue)
+  next.type = nextType
+
+  if (next[nextType]) {
+    emitLayout(next)
+    return
+  }
+
+  const targetProfile = defaultProfile(nextType, next)
+  try {
+    await ElMessageBox.confirm('目标布局还没有配置。是否保留当前布局方案，并根据当前字段比例近似生成目标布局配置？', '切换布局', {
+      confirmButtonText: '保留并迁移',
+      cancelButtonText: '仅切换',
+      distinguishCancelAndClose: true,
+      type: 'warning'
+    })
+    next[nextType] = targetProfile
+    migrateBodyToLayout(sourceType, nextType, next)
+    emitLayout(next)
+  } catch (action) {
+    if (action === 'cancel') {
+      next[nextType] = targetProfile
+      emitLayout(next)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.form-layout-editor {
+  width: 100%;
+}
+
+.form-layout-editor__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.form-layout-editor__title {
+  min-width: 0;
+  color: var(--el-text-color-primary);
+  font-size: 13px;
+  font-weight: 600;
+}
+</style>

package/src/components/group-title-color-select.vue

@@ -0,0 +1,75 @@
+<template>
+  <ElSelect :model-value="currentValue" class="group-title-color-select" @change="handleChange">
+    <ElOption v-for="option in colorOptions" :key="option.value" :label="option.label" :value="option.value">
+      <span class="group-title-color-select__option">
+        <span class="group-title-color-select__swatch" :class="option.swatchClass" />
+        <span>{{ option.label }}</span>
+      </span>
+    </ElOption>
+    <template #label="{ label, value }">
+      <span class="group-title-color-select__selected">
+        <span class="group-title-color-select__swatch" :class="getSwatchClass(value)" />
+        <span>{{ label }}</span>
+      </span>
+    </template>
+  </ElSelect>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ElOption, ElSelect } from 'element-plus'
+
+const props = defineProps<{
+  modelValue?: string
+}>()
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: string | undefined): void
+}>()
+
+const colorOptions = [
+  { label: '主题色', value: 'primary', swatchClass: 'is-primary' },
+  { label: '主文字', value: 'main', swatchClass: 'is-main' },
+  { label: '次文字', value: 'secondary', swatchClass: 'is-secondary' }
+]
+
+const currentValue = computed(() => props.modelValue || 'main')
+const getSwatchClass = (value: string) => colorOptions.find((option) => option.value === value)?.swatchClass
+
+const handleChange = (value: string) => {
+  emit('update:modelValue', value === 'main' ? undefined : value)
+}
+</script>
+
+<style scoped>
+.group-title-color-select {
+  width: 100%;
+}
+
+.group-title-color-select__option,
+.group-title-color-select__selected {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.group-title-color-select__swatch {
+  width: 14px;
+  height: 14px;
+  border: 1px solid var(--el-border-color);
+  border-radius: 3px;
+  flex: 0 0 auto;
+}
+
+.group-title-color-select__swatch.is-primary {
+  background: var(--el-color-primary);
+}
+
+.group-title-color-select__swatch.is-main {
+  background: var(--x-group-title-color-main, #333333);
+}
+
+.group-title-color-select__swatch.is-secondary {
+  background: var(--x-group-title-color-secondary, #666666);
+}
+</style>

package/src/components/group-title-style-picker.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="group-title-style-picker">
+    <button class="group-title-style-picker__trigger" type="button" @click="dialogVisible = true">
+      <span class="group-title-style-picker__trigger-text">{{ currentStyle?.label || '选择标题样式' }}</span>
+      <span class="group-title-style-picker__trigger-sample" :class="modelValue">{{ previewTitle }}</span>
+    </button>
+
+    <ElDialog v-model="dialogVisible" title="选择标题样式" width="760px" append-to-body>
+      <div class="group-title-style-picker__grid">
+        <button
+          v-for="style in styles"
+          :key="style.key"
+          class="group-title-style-picker__card"
+          :class="{ 'is-active': style.className === normalizedValue }"
+          type="button"
+          @click="handleSelect(style.className)"
+        >
+          <span class="group-title-style-picker__preview" :class="style.className">{{ previewTitle }}</span>
+          <span class="group-title-style-picker__name">{{ style.label }}</span>
+          <span v-if="style.description" class="group-title-style-picker__description">{{ style.description }}</span>
+        </button>
+      </div>
+    </ElDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref, type ComputedRef } from 'vue'
+import { ElDialog } from 'element-plus'
+import { getEditorGroupTitleStyles } from '../group-title-styles'
+
+const props = defineProps<{
+  modelValue?: string
+}>()
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: string | undefined): void
+}>()
+
+const editorContext = inject<ComputedRef<{ selectedItem?: any }> | null>('x-editor-context', null)
+const dialogVisible = ref(false)
+
+const styles = computed(() => getEditorGroupTitleStyles())
+const normalizedValue = computed(() => props.modelValue || '')
+const currentStyle = computed(() => styles.value.find((style) => style.className === normalizedValue.value))
+const previewTitle = computed(() => editorContext?.value?.selectedItem?.title || '分组标题')
+
+const handleSelect = (className: string) => {
+  emit('update:modelValue', className || undefined)
+  dialogVisible.value = false
+}
+</script>
+
+<style scoped>
+.group-title-style-picker {
+  width: 100%;
+}
+
+.group-title-style-picker__trigger {
+  display: grid;
+  width: 100%;
+  min-height: 40px;
+  padding: 8px 10px;
+  color: var(--el-text-color-primary);
+  text-align: left;
+  cursor: pointer;
+  background: var(--el-fill-color-blank);
+  border: 1px solid var(--el-border-color);
+  border-radius: 4px;
+  gap: 8px;
+}
+
+.group-title-style-picker__trigger:hover {
+  border-color: var(--el-color-primary);
+}
+
+.group-title-style-picker__trigger-text {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+
+.group-title-style-picker__trigger-sample {
+  display: block;
+}
+
+.group-title-style-picker__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.group-title-style-picker__card {
+  display: grid;
+  min-height: 112px;
+  padding: 14px;
+  text-align: left;
+  cursor: pointer;
+  background: var(--el-fill-color-blank);
+  border: 1px solid var(--el-border-color);
+  border-radius: 6px;
+  gap: 8px;
+}
+
+.group-title-style-picker__card:hover,
+.group-title-style-picker__card.is-active {
+  border-color: var(--el-color-primary);
+  box-shadow: 0 0 0 1px var(--el-color-primary-light-7);
+}
+
+.group-title-style-picker__preview {
+  display: block;
+}
+
+.group-title-style-picker__name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+
+.group-title-style-picker__description {
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--el-text-color-secondary);
+}
+</style>

package/src/components/input-number-range-binding-editor.vue

@@ -0,0 +1,226 @@
+<template>
+  <div class="input-number-range-binding-editor">
+    <div class="input-number-range-binding-editor__header">
+      <div class="input-number-range-binding-editor__title">字段名</div>
+      <div v-if="allowTuple" class="input-number-range-binding-editor__tabs">
+        <button
+          v-for="option in modeOptions"
+          :key="option.value"
+          class="input-number-range-binding-editor__tab"
+          :class="{ 'is-active': option.value === bindingMode }"
+          type="button"
+          @click="handleModeChange(option.value)"
+        >
+          {{ option.label }}
+        </button>
+      </div>
+    </div>
+
+    <div class="input-number-range-binding-editor__panel">
+      <span class="input-number-range-binding-editor__corner" />
+      <div class="input-number-range-binding-editor__path">{{ bindingMode === 'tuple' ? 'name' : 'sync' }}</div>
+      <div v-if="bindingMode === 'tuple'" class="input-number-range-binding-editor__fields">
+        <label class="input-number-range-binding-editor__field">
+          <span class="input-number-range-binding-editor__field-label">字段名</span>
+          <ElInput :model-value="tupleField" placeholder="字段名" clearable @update:modelValue="handleTupleFieldChange" />
+        </label>
+      </div>
+      <div v-else class="input-number-range-binding-editor__fields">
+        <label class="input-number-range-binding-editor__field">
+          <span class="input-number-range-binding-editor__field-label">{{ startFieldLabel }}</span>
+          <ElInput :model-value="startField" :placeholder="startFieldPlaceholder" clearable @update:modelValue="handleStartFieldChange" />
+        </label>
+        <label class="input-number-range-binding-editor__field">
+          <span class="input-number-range-binding-editor__field-label">{{ endFieldLabel }}</span>
+          <ElInput :model-value="endField" :placeholder="endFieldPlaceholder" clearable @update:modelValue="handleEndFieldChange" />
+        </label>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ElInput } from 'element-plus'
+
+type BindingMode = 'tuple' | 'separate'
+
+interface SyncItem {
+  name: string
+  syncName: string
+}
+
+const props = defineProps<{
+  modelValue?: SyncItem[]
+  name?: string
+  allowTuple?: boolean
+  defaultBaseName?: string
+  startFieldLabel?: string
+  endFieldLabel?: string
+  startPlaceholder?: string
+  endPlaceholder?: string
+  startSyncName?: string
+  endSyncName?: string
+}>()
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: SyncItem[] | undefined): void
+  (event: 'update:name', value: string | undefined): void
+}>()
+
+const modeOptions: { label: string; value: BindingMode }[] = [
+  { label: '单字段', value: 'tuple' },
+  { label: '分别字段', value: 'separate' }
+]
+
+const allowTuple = computed(() => props.allowTuple !== false)
+const startSyncName = computed(() => props.startSyncName || 'startValue')
+const endSyncName = computed(() => props.endSyncName || 'endValue')
+const startFieldLabel = computed(() => props.startFieldLabel || '开始字段')
+const endFieldLabel = computed(() => props.endFieldLabel || '结束字段')
+const startFieldPlaceholder = computed(() => props.startPlaceholder || startFieldLabel.value)
+const endFieldPlaceholder = computed(() => props.endPlaceholder || endFieldLabel.value)
+const startSync = computed(() => props.modelValue?.find((item) => item.syncName === startSyncName.value))
+const endSync = computed(() => props.modelValue?.find((item) => item.syncName === endSyncName.value))
+const bindingMode = computed<BindingMode>(() => (!allowTuple.value || startSync.value || endSync.value ? 'separate' : 'tuple'))
+const tupleField = computed(() => props.name || '')
+const startField = computed(() => startSync.value?.name || '')
+const endField = computed(() => endSync.value?.name || '')
+
+const cleanField = (value: string) => value.trim()
+
+const createSeparateSync = (startName: string, endName: string): SyncItem[] | undefined => {
+  const start = cleanField(startName)
+  const end = cleanField(endName)
+  const items: SyncItem[] = []
+  if (start) items.push({ name: start, syncName: startSyncName.value })
+  if (end) items.push({ name: end, syncName: endSyncName.value })
+  return items.length ? items : undefined
+}
+
+const createFieldName = (suffix: string) => {
+  const baseName = cleanField(props.name || props.defaultBaseName || 'range')
+  return baseName ? `${baseName}${suffix}` : ''
+}
+
+const handleModeChange = (mode: string | number | boolean | undefined) => {
+  if (mode === 'separate') {
+    emit('update:name', undefined)
+    emit('update:modelValue', createSeparateSync(startField.value || createFieldName('Start'), endField.value || createFieldName('End')))
+    return
+  }
+
+  if (allowTuple.value) {
+    emit('update:modelValue', undefined)
+    emit('update:name', cleanField(props.name || startField.value.replace(/Start$/, '') || props.defaultBaseName || 'range') || undefined)
+  }
+}
+
+const handleTupleFieldChange = (value: string) => {
+  emit('update:modelValue', undefined)
+  emit('update:name', cleanField(value) || undefined)
+}
+
+const handleStartFieldChange = (value: string) => {
+  emit('update:name', undefined)
+  emit('update:modelValue', createSeparateSync(value, endField.value))
+}
+
+const handleEndFieldChange = (value: string) => {
+  emit('update:name', undefined)
+  emit('update:modelValue', createSeparateSync(startField.value, value))
+}
+</script>
+
+<style scoped lang="scss">
+.input-number-range-binding-editor {
+  width: 100%;
+}
+
+.input-number-range-binding-editor__header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.input-number-range-binding-editor__title {
+  flex: 1;
+  min-width: 0;
+  color: var(--el-text-color-primary);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.input-number-range-binding-editor__tabs {
+  display: flex;
+  flex: none;
+  gap: 4px;
+}
+
+.input-number-range-binding-editor__tab {
+  height: 24px;
+  padding: 0 10px;
+  color: var(--el-text-color-regular);
+  font-size: 12px;
+  line-height: 22px;
+  background: var(--el-fill-color-blank);
+  border: 1px solid var(--el-border-color);
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.input-number-range-binding-editor__tab.is-active {
+  color: var(--el-color-primary);
+  background: var(--el-color-primary-light-9);
+  border-color: var(--el-color-primary);
+}
+
+.input-number-range-binding-editor__panel {
+  position: relative;
+  padding: 28px 10px 10px;
+  background: var(--el-fill-color-light);
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 6px;
+}
+
+.input-number-range-binding-editor__corner {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 0;
+  height: 0;
+  border-top: 18px solid var(--el-color-primary-light-5);
+  border-left: 18px solid transparent;
+}
+
+.input-number-range-binding-editor__path {
+  position: absolute;
+  top: 7px;
+  right: 22px;
+  color: var(--el-text-color-secondary);
+  font-size: 11px;
+  line-height: 1;
+}
+
+.input-number-range-binding-editor__fields {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 8px;
+}
+
+.input-number-range-binding-editor__field {
+  display: grid;
+  grid-template-columns: 64px minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+}
+
+.input-number-range-binding-editor__field-label {
+  color: var(--el-text-color-regular);
+  font-size: 12px;
+  line-height: 24px;
+  text-align: right;
+}
+</style>