|
@@ -52,22 +52,137 @@
|
|
|
<a-collapse-panel key="categorys" header="首页栏目">
|
|
<a-collapse-panel key="categorys" header="首页栏目">
|
|
|
<NestCategoryEditor v-model:categorys="props.props.categorys" />
|
|
<NestCategoryEditor v-model:categorys="props.props.categorys" />
|
|
|
</a-collapse-panel>
|
|
</a-collapse-panel>
|
|
|
|
|
+
|
|
|
|
|
+ <a-collapse-panel key="tabs" header="首页 Tab 控制 (tabs)">
|
|
|
|
|
+ <template #extra>
|
|
|
|
|
+ <PlusOutlined @click.stop="addTab" />
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <div v-for="(tab, i) in tabsList" :key="i" class="nested-item">
|
|
|
|
|
+ <a-form :labelCol="{ span: 6 }" size="small">
|
|
|
|
|
+ <a-form-item label="标签标题">
|
|
|
|
|
+ <a-input v-model:value="tab.title" />
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ <a-form-item label="标签类型">
|
|
|
|
|
+ <a-select v-model:value="tab.type" style="width: 100%">
|
|
|
|
|
+ <a-select-option value="home">首页</a-select-option>
|
|
|
|
|
+ <a-select-option value="list">内嵌列表页</a-select-option>
|
|
|
|
|
+ <a-select-option value="user">用户页</a-select-option>
|
|
|
|
|
+ </a-select>
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ <a-form-item label="图标 URL">
|
|
|
|
|
+ <IconEditor v-model="tab.icon" />
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ <a-form-item label="选中图标 URL">
|
|
|
|
|
+ <IconEditor v-model="tab.activeIcon" />
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ <a-form-item label="是否可见">
|
|
|
|
|
+ <a-checkbox v-model:checked="tab.visible" :indeterminate="tab.visible === undefined" />
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ <a-form-item label="是否凸起">
|
|
|
|
|
+ <a-checkbox v-model:checked="tab.hump" :indeterminate="tab.hump === undefined" />
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ <template v-if="tab.hump">
|
|
|
|
|
+ <a-form-item label="凸起高度 [上,下]">
|
|
|
|
|
+ <a-space>
|
|
|
|
|
+ <a-input-number :value="getHumpHeight(tab, 0)" :min="0" placeholder="上" size="small" style="width: 80px" @update:value="setHumpHeight(tab, 0, $event)" />
|
|
|
|
|
+ <a-input-number :value="getHumpHeight(tab, 1)" :min="0" placeholder="下" size="small" style="width: 80px" @update:value="setHumpHeight(tab, 1, $event)" />
|
|
|
|
|
+ </a-space>
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ <a-form-item label="凸起间距 [左,右]">
|
|
|
|
|
+ <a-space>
|
|
|
|
|
+ <a-input-number :value="getHumpSpace(tab, 0)" :min="0" placeholder="左" size="small" style="width: 80px" @update:value="setHumpSpace(tab, 0, $event)" />
|
|
|
|
|
+ <a-input-number :value="getHumpSpace(tab, 1)" :min="0" placeholder="右" size="small" style="width: 80px" @update:value="setHumpSpace(tab, 1, $event)" />
|
|
|
|
|
+ </a-space>
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ <a-form-item label="图标大小">
|
|
|
|
|
+ <a-input-number v-model:value="tab.iconSize" :min="1" style="width: 100%" />
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <template v-if="tab.type === 'list'">
|
|
|
|
|
+ <a-form-item label="页面配置名">
|
|
|
|
|
+ <a-select
|
|
|
|
|
+ v-model:value="tab.pageConfigName"
|
|
|
|
|
+ placeholder="选择列表页"
|
|
|
|
|
+ allow-clear
|
|
|
|
|
+ style="width: 100%"
|
|
|
|
|
+ >
|
|
|
|
|
+ <a-select-option v-for="p in pageListForSelect" :key="p.name" :value="p.name">
|
|
|
|
|
+ {{ p.title }} ({{ p.name }})
|
|
|
|
|
+ </a-select-option>
|
|
|
|
|
+ </a-select>
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ <a-form-item label="头部图片 URL">
|
|
|
|
|
+ <IconEditor
|
|
|
|
|
+ :model-value="tab.pageHeadImage ?? ''"
|
|
|
|
|
+ @update:model-value="(v) => (tab.pageHeadImage = v)"
|
|
|
|
|
+ />
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ <a-form-item label="头部图片宽度">
|
|
|
|
|
+ <a-input-number v-model:value="tab.pageHeadImageWidth" :min="1" style="width: 100%" />
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <a-popconfirm title="确定要删除这个 Tab 吗?" @confirm="removeTab(i)">
|
|
|
|
|
+ <a-button type="text" danger size="small" @click.stop="">
|
|
|
|
|
+ <DeleteOutlined title="删除" />
|
|
|
|
|
+ </a-button>
|
|
|
|
|
+ </a-popconfirm>
|
|
|
|
|
+ </a-form>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </a-collapse-panel>
|
|
|
</a-collapse>
|
|
</a-collapse>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
|
-import { ref } from 'vue';
|
|
|
|
|
|
|
+import { ref, computed, inject, type Ref } from 'vue';
|
|
|
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
|
|
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
|
|
|
-import type { IHomeCommonCategoryHomeDefine, IHomeCommonCategoryListTabNestCategoryItemDefine } from '../../CommonCategoryDefine';
|
|
|
|
|
|
|
+import type { IHomeCommonCategoryDefine, IHomeCommonCategoryHomeDefine, IHomeCommonCategoryListTabNestCategoryItemDefine } from '../../CommonCategoryDefine';
|
|
|
import LinkPathEditor from '../components/LinkPathEditor.vue';
|
|
import LinkPathEditor from '../components/LinkPathEditor.vue';
|
|
|
import IconEditor from '../components/IconEditor.vue';
|
|
import IconEditor from '../components/IconEditor.vue';
|
|
|
import NestCategoryEditor from '../subpart/NestCategoryEditor.vue';
|
|
import NestCategoryEditor from '../subpart/NestCategoryEditor.vue';
|
|
|
|
|
|
|
|
|
|
+type HomeTabItem = IHomeCommonCategoryHomeDefine['props']['tabs'][number];
|
|
|
|
|
+
|
|
|
const props = defineProps<{
|
|
const props = defineProps<{
|
|
|
props: IHomeCommonCategoryHomeDefine['props'];
|
|
props: IHomeCommonCategoryHomeDefine['props'];
|
|
|
}>();
|
|
}>();
|
|
|
-const activeKeys = ref<string[]>(['homeButtons', 'categorys']);
|
|
|
|
|
|
|
+const pageList = inject<(Ref<IHomeCommonCategoryDefine['page'][0][]>)>('pageList', undefined as any);
|
|
|
|
|
+const activeKeys = ref<string[]>(['homeButtons', 'categorys', 'tabs']);
|
|
|
|
|
+
|
|
|
|
|
+const tabsList = computed(() => props.props.tabs ?? []);
|
|
|
|
|
+const pageListForSelect = computed(() => pageList.value?.filter((p) => p.name));
|
|
|
|
|
+
|
|
|
|
|
+function addTab(event: MouseEvent) {
|
|
|
|
|
+ event.stopPropagation();
|
|
|
|
|
+ props.props.tabs = props.props.tabs || [];
|
|
|
|
|
+ props.props.tabs.push({
|
|
|
|
|
+ title: '新 Tab',
|
|
|
|
|
+ icon: '',
|
|
|
|
|
+ activeIcon: '',
|
|
|
|
|
+ type: 'list',
|
|
|
|
|
+ });
|
|
|
|
|
+}
|
|
|
|
|
+function removeTab(i: number) {
|
|
|
|
|
+ props.props.tabs?.splice(i, 1);
|
|
|
|
|
+}
|
|
|
|
|
+function getHumpHeight(tab: HomeTabItem, index: 0 | 1): number {
|
|
|
|
|
+ const arr = tab.humpHeight ?? [0, 0];
|
|
|
|
|
+ return arr[index] ?? 0;
|
|
|
|
|
+}
|
|
|
|
|
+function setHumpHeight(tab: HomeTabItem, index: 0 | 1, value: number | null) {
|
|
|
|
|
+ const arr = tab.humpHeight ?? [0, 0];
|
|
|
|
|
+ tab.humpHeight = [...arr];
|
|
|
|
|
+ tab.humpHeight[index] = value ?? 0;
|
|
|
|
|
+}
|
|
|
|
|
+function getHumpSpace(tab: HomeTabItem, index: 0 | 1): number {
|
|
|
|
|
+ const arr = tab.humpSpace ?? [20, 20];
|
|
|
|
|
+ return arr[index] ?? 20;
|
|
|
|
|
+}
|
|
|
|
|
+function setHumpSpace(tab: HomeTabItem, index: 0 | 1, value: number | null) {
|
|
|
|
|
+ const arr = tab.humpSpace ?? [20, 20];
|
|
|
|
|
+ tab.humpSpace = [...arr];
|
|
|
|
|
+ tab.humpSpace[index] = value ?? 20;
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
function addHomeButton(event: MouseEvent) {
|
|
function addHomeButton(event: MouseEvent) {
|
|
|
event.stopPropagation();
|
|
event.stopPropagation();
|