minnan/src/pages/article/data/editor/subpart/PropsEditorTree.vue

<template>
  <div class="props-editor-tree">
    <a-form :labelCol="{ span: 6 }" size="small" class="props-form">
      <a-form-item label="页面 key">
        <a-input v-model:value="props.page.name" />
      </a-form-item>
      <a-form-item label="页面标题">
        <a-input v-model:value="props.page.title" />
      </a-form-item>
    </a-form>
    <a-divider />
    <div class="content-props-editor">
      <HomePropsEditor
        v-if="contentType === 'Home'"
        :props="(props.page?.content?.props as IHomeCommonCategoryHomeDefine['props'])"
      />
      <CommonListPropsEditor
        v-else-if="contentType === 'CommonList'"
        :props="(props.page?.content?.props as IHomeCommonCategoryListDefine['props'])"
      />
      <DetailPropsEditor
        v-else-if="contentType === 'Details'"
        :props="(props.page?.content?.props as IHomeCommonCategoryDetailDefine['props'])"
        :test-detail-id="testDetailId"
        @update:testDetailId="emit('update:testDetailId', $event)"
      />
      <div v-else class="unknown-type">未知模板类型: {{ contentType }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import type {
  IHomeCommonCategoryDefine,
  IHomeCommonCategoryDetailDefine,
  IHomeCommonCategoryHomeDefine,
  IHomeCommonCategoryListDefine,
} from '../../CommonCategoryDefine';
import HomePropsEditor from '../editors/HomePropsEditor.vue';
import CommonListPropsEditor from '../editors/CommonListPropsEditor.vue';
import DetailPropsEditor from '../editors/DetailPropsEditor.vue';

const props = defineProps<{
  page: IHomeCommonCategoryDefine['page'][0];
  testDetailId: number;
}>();
const emit = defineEmits<{
  (e: 'update:page', page: IHomeCommonCategoryDefine['page'][0]): void;
  (e: 'update:testDetailId', value: number): void;
}>();

const contentType = computed(() => props.page?.content?.type);
</script>

<style>
.props-editor-tree {
  flex: 1;
  overflow: auto;
  padding: 8px;
}
.props-editor-tree .ant-form-item{
  margin-bottom: 14px !important;
}
.props-form {
  margin-bottom: 0;
}
.content-props-editor {
  font-size: 12px;
}
.unknown-type {
  color: #999;
  padding: 8px 0;
}
</style>