xkit-editor 2.0.0-alpha.0

package/src/components/object-section-editor.vue

@@ -0,0 +1,342 @@
+<template>
+  <div class="object-section-editor">
+    <div v-if="resolvedSectionMode !== 'plain'" class="object-section-editor__header">
+      <div class="object-section-editor__title">{{ title }}</div>
+      <div v-if="resolvedSectionMode === 'tabs'" class="object-section-editor__tabs">
+        <button
+          v-for="section in sections"
+          :key="section.key"
+          class="object-section-editor__tab"
+          :class="{ 'is-active': section.key === activeKey }"
+          type="button"
+          @click="activeKey = section.key"
+        >
+          {{ section.label }}
+        </button>
+      </div>
+    </div>
+
+    <div class="object-section-editor__panel" :class="{ 'is-plain': resolvedSectionMode === 'plain' }">
+      <span class="object-section-editor__corner" />
+      <div v-if="resolvedSectionMode !== 'plain'" class="object-section-editor__path">{{ pathLabel }}</div>
+      <x-form
+        :key="formKey"
+        :model-value="editorValue"
+        :body="editorBody"
+        value-reactive
+        auto-submit
+        label-position="left"
+        :size="editorFormSize"
+        :show-button-group="false"
+        @update:modelValue="handleSectionChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useAttrs, watch } from 'vue'
+import { XForm, type XFormItem } from 'xkit-ui'
+
+export interface ObjectSection {
+  label: string
+  key: string
+  body: XFormItem[]
+}
+
+const props = defineProps<{
+  modelValue?: any
+  title?: string
+  rootKey?: string
+  valueMode?: 'nested' | 'flat'
+  sectionMode?: 'tabs' | 'flat' | 'plain'
+  mainKey?: string
+  syncKeys?: string[]
+  sections?: ObjectSection[]
+}>()
+
+const emit = defineEmits<(event: string, value: any) => void>()
+const attrs = useAttrs()
+
+const isEmptyValue = (value: unknown) => value === undefined || value === null || value === ''
+
+const cleanRecord = (value: Record<string, any> | undefined) => {
+  if (!value || typeof value !== 'object') return undefined
+  const next = Object.entries(value).reduce<Record<string, any>>((result, [key, itemValue]) => {
+    if (!isEmptyValue(itemValue)) {
+      result[key] = itemValue
+    }
+    return result
+  }, {})
+  return Object.keys(next).length > 0 ? next : undefined
+}
+
+const cleanSections = (value: Record<string, any> | undefined) => {
+  if (!value || typeof value !== 'object') return undefined
+  const next = Object.entries(value).reduce<Record<string, any>>((result, [key, sectionValue]) => {
+    const cleaned = cleanRecord(sectionValue)
+    if (cleaned) {
+      result[key] = cleaned
+    }
+    return result
+  }, {})
+  return Object.keys(next).length > 0 ? next : undefined
+}
+
+const activeKey = ref(props.sections?.[0]?.key || '')
+
+watch(
+  () => props.sections,
+  (sections) => {
+    if (!sections?.length) {
+      activeKey.value = ''
+      return
+    }
+    if (!sections.some((section) => section.key === activeKey.value)) {
+      activeKey.value = sections[0].key
+    }
+  },
+  { immediate: true }
+)
+
+const activeSection = computed(() => props.sections?.find((section) => section.key === activeKey.value))
+const flatKeys = computed(() => {
+  const names = props.sections?.flatMap((section) => section.body.map((item) => item.name).filter(Boolean) as string[]) || []
+  return Array.from(new Set(names))
+})
+const resolvedSectionMode = computed(() => props.sectionMode || 'tabs')
+const sectionFieldName = (sectionKey: string, name: string) => `__section_${sectionKey}_${name}`
+const isPlainNestedMode = computed(() => resolvedSectionMode.value === 'plain' && props.valueMode !== 'flat')
+const plainFieldMap = computed(() => {
+  const entries =
+    props.sections?.flatMap((section) => {
+      return section.body
+        .map((item) => item.name)
+        .filter(Boolean)
+        .map((name) => {
+          const fieldName = sectionFieldName(section.key, String(name))
+          return [fieldName, { sectionKey: section.key, name: String(name) }] as const
+        })
+    }) || []
+  return new Map(entries)
+})
+const flatSectionBody = computed<XFormItem[]>(() => {
+  return (
+    props.sections?.flatMap((section) => [
+      {
+        title: section.label,
+        type: 'group',
+        titleClass: 'config-group-title',
+        label: false
+      } as XFormItem,
+      ...section.body
+    ]) || []
+  )
+})
+const plainSectionBody = computed<XFormItem[]>(() => {
+  return (
+    props.sections?.flatMap((section) =>
+      section.body.map((item) => {
+        if (props.valueMode === 'flat') return item
+        if (!item.name) return item
+        return {
+          ...item,
+          name: sectionFieldName(section.key, String(item.name))
+        }
+      })
+    ) || []
+  )
+})
+const editorBody = computed(() => {
+  if (resolvedSectionMode.value === 'plain') return plainSectionBody.value
+  if (resolvedSectionMode.value === 'flat') return flatSectionBody.value
+  return activeSection.value?.body || []
+})
+const editorValue = computed(() => {
+  if (props.valueMode === 'flat') {
+    return flatKeys.value.reduce<Record<string, any>>((result, key) => {
+      if (props.mainKey === key) {
+        result[key] = props.modelValue
+      } else if (!props.mainKey) {
+        result[key] = props.modelValue?.[key]
+      } else {
+        result[key] = attrs[key]
+      }
+      return result
+    }, {})
+  }
+
+  if (isPlainNestedMode.value) {
+    return Array.from(plainFieldMap.value.entries()).reduce<Record<string, any>>((result, [fieldName, meta]) => {
+      result[fieldName] = props.modelValue?.[meta.sectionKey]?.[meta.name]
+      return result
+    }, {})
+  }
+
+  if (resolvedSectionMode.value === 'flat') {
+    return props.sections?.reduce<Record<string, any>>((result, section) => {
+      result[section.key] = props.modelValue?.[section.key] || {}
+      return result
+    }, {})
+  }
+
+  const key = activeSection.value?.key
+  if (!key) return {}
+  return { ...(props.modelValue?.[key] || {}) }
+})
+const pathLabel = computed(() => {
+  if (props.valueMode === 'flat') return props.rootKey || ''
+  if (resolvedSectionMode.value !== 'tabs') return props.rootKey || ''
+  if (!activeSection.value) return props.rootKey || ''
+  return [props.rootKey, activeSection.value.key].filter(Boolean).join('.')
+})
+const formKey = computed(() => (resolvedSectionMode.value === 'tabs' ? activeSection.value?.key : resolvedSectionMode.value))
+const editorFormSize = computed(() => (resolvedSectionMode.value === 'plain' ? undefined : 'small'))
+
+const handleSectionChange = (formValue: Record<string, any>) => {
+  if (props.valueMode === 'flat') {
+    if (props.mainKey) {
+      emit('update:modelValue', isEmptyValue(formValue[props.mainKey]) ? undefined : formValue[props.mainKey])
+      props.syncKeys?.forEach((key) => {
+        emit(`update:${key}`, isEmptyValue(formValue[key]) ? undefined : formValue[key])
+      })
+      return
+    }
+
+    const sectionKeys =
+      resolvedSectionMode.value === 'plain' ? flatKeys.value : ((activeSection.value?.body.map((item) => item.name).filter(Boolean) as string[] | undefined) ?? [])
+    const next = { ...(props.modelValue || {}) }
+    sectionKeys.forEach((key) => {
+      if (isEmptyValue(formValue[key])) {
+        delete next[key]
+      } else {
+        next[key] = formValue[key]
+      }
+    })
+    emit('update:modelValue', cleanRecord(next))
+    return
+  }
+
+  if (isPlainNestedMode.value) {
+    const next = { ...(props.modelValue || {}) }
+    props.sections?.forEach((section) => {
+      const nextSectionValue = { ...(next[section.key] || {}) }
+      section.body
+        .map((item) => item.name)
+        .filter(Boolean)
+        .forEach((name) => {
+          const fieldName = sectionFieldName(section.key, String(name))
+          if (isEmptyValue(formValue[fieldName])) {
+            delete nextSectionValue[String(name)]
+          } else {
+            nextSectionValue[String(name)] = formValue[fieldName]
+          }
+        })
+      next[section.key] = nextSectionValue
+    })
+    emit('update:modelValue', cleanSections(next))
+    return
+  }
+
+  if (resolvedSectionMode.value === 'flat') {
+    emit('update:modelValue', cleanSections(formValue))
+    return
+  }
+
+  const key = activeSection.value?.key
+  if (!key) return
+  const next = {
+    ...(props.modelValue || {}),
+    [key]: formValue
+  }
+  emit('update:modelValue', cleanSections(next))
+}
+</script>
+
+<style scoped lang="scss">
+.object-section-editor {
+  width: 100%;
+}
+
+.object-section-editor__header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.object-section-editor__title {
+  flex: 1;
+  min-width: 0;
+  color: var(--el-text-color-primary);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.object-section-editor__tabs {
+  display: flex;
+  flex: none;
+  gap: 4px;
+}
+
+.object-section-editor__tab {
+  height: 24px;
+  padding: 0 10px;
+  border: 1px solid var(--el-border-color);
+  border-radius: 4px;
+  background: var(--el-fill-color-blank);
+  color: var(--el-text-color-regular);
+  font-size: 12px;
+  line-height: 22px;
+  cursor: pointer;
+}
+
+.object-section-editor__tab.is-active {
+  border-color: var(--el-color-primary);
+  background: var(--el-color-primary-light-9);
+  color: var(--el-color-primary);
+}
+
+.object-section-editor__panel {
+  position: relative;
+  padding: 28px 10px 2px;
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 6px;
+  background: var(--el-fill-color-light);
+}
+
+.object-section-editor__panel.is-plain {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.object-section-editor__panel.is-plain .object-section-editor__corner {
+  display: none;
+}
+
+.object-section-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;
+}
+
+.object-section-editor__path {
+  position: absolute;
+  top: 7px;
+  right: 22px;
+  color: var(--el-text-color-secondary);
+  font-size: 11px;
+  line-height: 1;
+}
+
+.object-section-editor__panel :deep(.el-form-item) {
+  margin-bottom: 12px;
+}
+</style>

package/src/components/options/default-dict-options-panel.vue

@@ -0,0 +1,197 @@
+<template>
+  <div class="default-dict-options-panel">
+    <el-select
+      :model-value="selectedCode"
+      filterable
+      clearable
+      placeholder="请选择字典"
+      class="default-dict-options-panel__select"
+      @update:modelValue="handleCodeChange"
+    >
+      <el-option
+        v-for="dict in filteredDicts"
+        :key="dict.code"
+        :label="`${dict.label}（${dict.code}）`"
+        :value="dict.code"
+      />
+    </el-select>
+    <el-button size="small" @click="dialogVisible = true">管理</el-button>
+
+    <el-dialog v-model="dialogVisible" title="字典中心" width="760px" append-to-body>
+      <div class="default-dict-options-panel__dialog">
+        <div class="default-dict-options-panel__toolbar">
+          <el-input v-model="keyword" clearable placeholder="搜索字典编码或名称" />
+          <el-button type="primary" @click="handleAddDict">新增字典</el-button>
+        </div>
+
+        <el-table :data="filteredDicts" border height="260" highlight-current-row @row-click="handleSelectDict">
+          <el-table-column prop="code" label="编码" width="150" />
+          <el-table-column prop="label" label="名称" />
+          <el-table-column label="选项数" width="90">
+            <template #default="{ row }">{{ row.options.length }}</template>
+          </el-table-column>
+          <el-table-column label="操作" width="110">
+            <template #default="{ row }">
+              <el-button link type="primary" @click.stop="handleSelectDict(row)">选择</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <div v-if="editingDict" class="default-dict-options-panel__editor">
+          <div class="default-dict-options-panel__row">
+            <el-input v-model="editingDict.code" placeholder="字典编码" />
+            <el-input v-model="editingDict.label" placeholder="字典名称" />
+          </div>
+          <x-input-array
+            v-model="editingDict.options"
+            label-position="top"
+            draggable
+            addable
+            deletable
+            use-layout
+            show-footer-add-button
+            :layout="optionLayout"
+            :items="optionItems"
+          />
+        </div>
+      </div>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleSave">保存</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { ElButton, ElDialog, ElInput, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
+import { XInputArray, type XInputArrayItem } from 'xkit-ui'
+import {
+  ensureEditorLocalDicts,
+  saveEditorLocalDicts,
+  type EditorDictRecord
+} from '../../utils/local-dict-center'
+
+const props = defineProps<{
+  modelValue?: any
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: any): void
+}>()
+
+const cloneDicts = (items: EditorDictRecord[]) => JSON.parse(JSON.stringify(items)) as EditorDictRecord[]
+
+const dialogVisible = ref(false)
+const keyword = ref('')
+const dicts = ref<EditorDictRecord[]>(cloneDicts(ensureEditorLocalDicts()))
+const editingDict = ref<EditorDictRecord>()
+
+const selectedCode = computed(() => {
+  if (typeof props.modelValue === 'string') return props.modelValue
+  if (props.modelValue?.type === 'dict') return props.modelValue.code
+  return ''
+})
+
+const filteredDicts = computed(() => {
+  const value = keyword.value.trim().toLowerCase()
+  if (!value) return dicts.value
+  return dicts.value.filter((item) => `${item.code} ${item.label}`.toLowerCase().includes(value))
+})
+
+const optionItems: XInputArrayItem[] = [
+  {
+    label: false,
+    name: 'label',
+    type: 'input',
+    clearable: false,
+    placeholder: '选项名称',
+    span: 12
+  },
+  {
+    label: false,
+    name: 'value',
+    type: 'input',
+    clearable: false,
+    placeholder: '选项值',
+    span: 12
+  }
+]
+
+const optionLayout = {
+  row: { gutter: 8 },
+  col: { span: 12 }
+}
+
+watch(dialogVisible, (visible) => {
+  if (visible) {
+    dicts.value = cloneDicts(ensureEditorLocalDicts())
+    editingDict.value = dicts.value.find((item) => item.code === selectedCode.value) || dicts.value[0]
+  }
+})
+
+const handleCodeChange = (code?: string) => {
+  emit('update:modelValue', code ? { type: 'dict', code } : undefined)
+}
+
+const handleSelectDict = (dict: EditorDictRecord) => {
+  editingDict.value = dict
+  handleCodeChange(dict.code)
+}
+
+const handleAddDict = () => {
+  const next: EditorDictRecord = {
+    code: `DICT_${dicts.value.length + 1}`,
+    label: '新字典',
+    options: []
+  }
+  dicts.value.push(next)
+  editingDict.value = next
+}
+
+const handleSave = () => {
+  dicts.value = saveEditorLocalDicts(dicts.value)
+  if (editingDict.value?.code) {
+    handleCodeChange(editingDict.value.code)
+  }
+  dialogVisible.value = false
+}
+</script>
+
+<style scoped lang="scss">
+.default-dict-options-panel {
+  display: flex;
+  width: 100%;
+  gap: 8px;
+}
+
+.default-dict-options-panel__select {
+  flex: 1;
+}
+
+.default-dict-options-panel__dialog {
+  display: grid;
+  gap: 12px;
+}
+
+.default-dict-options-panel__toolbar,
+.default-dict-options-panel__row {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 8px;
+}
+
+.default-dict-options-panel__row {
+  grid-template-columns: 1fr 1fr;
+}
+
+.default-dict-options-panel__editor {
+  display: grid;
+  gap: 8px;
+  padding: 12px;
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 6px;
+  background: var(--el-fill-color-lighter);
+}
+</style>

package/src/components/options/options-editor.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="options-editor">
+    <div class="options-editor__header">
+      <span class="options-editor__title">{{ title }}</span>
+      <div class="options-editor__tabs">
+        <button
+          v-for="source in sources"
+          :key="source.type"
+          class="options-editor__tab"
+          :class="{ 'is-active': source.type === activeType }"
+          type="button"
+          @click="handleTypeChange(source.type)"
+        >
+          {{ source.label }}
+        </button>
+      </div>
+    </div>
+
+    <x-input-array
+      v-if="activeType === 'static'"
+      :model-value="staticOptions"
+      label-position="top"
+      draggable
+      addable
+      deletable
+      use-layout
+      show-footer-add-button
+      :layout="optionLayout"
+      :items="optionItems"
+      @update:modelValue="handleStaticChange"
+    />
+    <component
+      v-else-if="activeSource?.component"
+      :is="activeSource.component"
+      :model-value="modelValue"
+      @update:modelValue="handleSourceChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { XInputArray, type FormItemOptions, type OptionItem, type XInputArrayItem } from 'xkit-ui'
+import { getEditorOptionSource, getEditorOptionSources } from '../../option-sources'
+
+const props = defineProps<{
+  modelValue?: FormItemOptions
+  title?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: FormItemOptions | undefined): void
+}>()
+
+const optionItems: XInputArrayItem[] = [
+  {
+    label: false,
+    name: 'label',
+    type: 'input',
+    clearable: false,
+    placeholder: '选项名称',
+    span: 12
+  },
+  {
+    label: false,
+    name: 'value',
+    type: 'input',
+    clearable: false,
+    placeholder: '选项值',
+    span: 12
+  }
+]
+
+const optionLayout = {
+  row: { gutter: 8 },
+  col: { span: 12 }
+}
+
+const resolveType = (value: FormItemOptions | undefined, fallback = 'static') => {
+  if (!value) return fallback
+  if (Array.isArray(value)) return 'static'
+  if (typeof value === 'string') return 'dict'
+  if (typeof value === 'object' && 'type' in value && typeof value.type === 'string') {
+    return value.type
+  }
+  return fallback
+}
+
+const activeType = ref(resolveType(props.modelValue))
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    activeType.value = resolveType(value, activeType.value)
+  }
+)
+
+const sources = computed(() => getEditorOptionSources())
+const activeSource = computed(() => getEditorOptionSource(activeType.value))
+const staticOptions = computed(() => (Array.isArray(props.modelValue) ? props.modelValue : []))
+
+const handleTypeChange = (type: string) => {
+  activeType.value = type
+  if (type === 'static') {
+    emit('update:modelValue', Array.isArray(props.modelValue) ? props.modelValue : [])
+  }
+}
+
+const handleStaticChange = (value: OptionItem[]) => {
+  emit('update:modelValue', value)
+}
+
+const handleSourceChange = (value: FormItemOptions | undefined) => {
+  emit('update:modelValue', value)
+}
+</script>
+
+<style scoped lang="scss">
+.options-editor {
+  width: 100%;
+}
+
+.options-editor__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.options-editor__title {
+  flex: 1;
+  min-width: 0;
+  color: var(--el-text-color-primary);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.options-editor__tabs {
+  display: flex;
+  flex: none;
+  gap: 4px;
+}
+
+.options-editor__tab {
+  height: 24px;
+  padding: 0 10px;
+  border: 1px solid var(--el-border-color);
+  border-radius: 4px;
+  background: var(--el-fill-color-blank);
+  color: var(--el-text-color-regular);
+  font-size: 12px;
+  line-height: 22px;
+  cursor: pointer;
+}
+
+.options-editor__tab.is-active {
+  border-color: var(--el-color-primary);
+  background: var(--el-color-primary-light-9);
+  color: var(--el-color-primary);
+}
+</style>