minnan/src/pages/article/data/editor/editors/HomePropsEditor.vue

<template>
  <div class="home-props-editor">
    <a-form :labelCol="{ span: 6 }" size="small">
      <a-form-item label="首页标题">
        <a-input v-model:value="props.props.title" />
      </a-form-item>
      <a-form-item label="首页副标题">
        <a-input v-model:value="props.props.subTitle" />
      </a-form-item>
      <a-form-item label="Banner 图 URL">
        <IconEditor v-model="props.props.homeBanner" />
      </a-form-item>
    </a-form>

    <a-collapse v-model:activeKey="activeKeys" class="props-collapse">
      <a-collapse-panel key="homeButtons" header="首页按钮 (homeButtons)">
        <template #extra>
          <PlusOutlined @click="addHomeButton" />
        </template>
        <div v-for="(btn, i) in props.props.homeButtons" :key="i" class="nested-item">
          <a-form :labelCol="{ span: 6 }" size="small">
            <a-form-item label="标题">
              <a-input v-model:value="btn.title" />
            </a-form-item>
            <a-form-item label="按钮样式">
              <a-select v-model:value="btn.style">
                <a-select-option value="text">文本按钮</a-select-option>
                <a-select-option value="large-bg">大背景按钮</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="图标 URL">
              <IconEditor v-model="btn.icon" />
            </a-form-item>
            <a-form-item label="按钮尺寸%">
              <a-input-number v-model:value="btn.size" :min="1" style="width: 100%" />
            </a-form-item>
            <LinkPathEditor v-model="btn.link" />
            <a-popconfirm title="确定要删除这个按钮吗？" @confirm="removeHomeButton(i)">
              <a-button type="text" danger size="small" @click.stop="">
                <DeleteOutlined title="删除" />
              </a-button>
            </a-popconfirm>
          </a-form>
        </div>
      </a-collapse-panel>

      <a-collapse-panel key="categorys" header="首页栏目">
        <NestCategoryEditor v-model:categorys="props.props.categorys" />
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import type { IHomeCommonCategoryHomeDefine, IHomeCommonCategoryListTabNestCategoryItemDefine } from '../../CommonCategoryDefine';
import LinkPathEditor from '../components/LinkPathEditor.vue';
import IconEditor from '../components/IconEditor.vue';
import NestCategoryEditor from '../subpart/NestCategoryEditor.vue';

const props = defineProps<{
  props: IHomeCommonCategoryHomeDefine['props'];
}>();
const activeKeys = ref<string[]>(['homeButtons', 'categorys']);

function addHomeButton(event: MouseEvent) {
  event.stopPropagation();
  props.props.homeButtons = props.props.homeButtons || [];
  props.props.homeButtons.push({ title: '新按钮', icon: '', style: 'text', link: '', size: 50 });
}
function removeHomeButton(i: number) {
  props.props.homeButtons.splice(i, 1);
}
function addCategory() {
  props.props.categorys = props.props.categorys || [];
  props.props.categorys.push({ text: '新分类', type: '', data: undefined } as unknown as IHomeCommonCategoryListTabNestCategoryItemDefine);
}
function removeCategory(i: number) {
  props.props.categorys.splice(i, 1);
}
</script>

<style scoped>
.home-props-editor {
  font-size: 12px;
}
.props-collapse {
  margin-top: 8px;
}
.nested-item {
  margin-bottom: 12px;
  padding: 8px;
  background: #fafafa;
  border-radius: 4px;
}
.category-item :deep(.ant-collapse) {
  border: none;
  background: transparent;
}
.category-item :deep(.ant-collapse-item) {
  border: none;
}
</style>