From 0f9b5d19692198e32043c6e428de3a31d8b922bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Tue, 26 Nov 2024 10:22:34 +0800
Subject: [PATCH] =?UTF-8?q?=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/drag/index.vue            |  3 +-
 .../common/subscript/subscript-index.vue      |  5 ++-
 .../footer-nav/footer-nav-content.vue         |  6 ++--
 .../model-nav-group-content.vue               | 31 ++++++++++---------
 4 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/src/components/base/drag/index.vue b/src/components/base/drag/index.vue
index c7f90b7a..c1efc075 100644
--- a/src/components/base/drag/index.vue
+++ b/src/components/base/drag/index.vue
@@ -4,7 +4,8 @@
             <li v-for="(item, index) in from" :key="index" :class="[`flex gap-y-16 re ${ className }`,  props.modelType == 'nav-group' && modelIndex === index ? 'nav-index-select' : '']" @click="on_click(item, index)">
                 <icon name="drag" size="16" class="cursor-move" />
                 <slot :row="item" :index="index" />
-                <div class="abs c-pointer top-de-6 right-de-6 remove-icon" @click.stop="remove(index)">
+                <!-- 底部第一个不显示删除按钮 -->
+                <div v-if="!(props.modelType === 'footer' && index === 0)" class="abs c-pointer top-de-6 right-de-6 remove-icon" @click.stop="remove(index)">
                     <icon v-if="type == 'card'" name="close-fillup" size="18" color="c" />
                 </div>
                 <div class="c-pointer do-not-trigger" @click.stop="remove(index)">
diff --git a/src/components/common/subscript/subscript-index.vue b/src/components/common/subscript/subscript-index.vue
index 082b4191..07cc33a9 100644
--- a/src/components/common/subscript/subscript-index.vue
+++ b/src/components/common/subscript/subscript-index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-if="form.seckill_subscript_show == '1'" class="corner-marker" :style="corner_marker">
+    <div v-if="form.seckill_subscript_show == '1'" :class="['abs', props.type == 'nav-group' ? '' : 'max-width']" :style="corner_marker">
         <div class="flex-row nowrap" :style="corner_img_marker">
             <template v-if="form.subscript_type == 'img-icon'">
                 <template v-if="!isEmpty(form.subscript_img_src)">
@@ -66,8 +66,7 @@ const img_style = computed(() => `height: ${new_style.value.subscript_style.img_
 </script>
 
 <style lang="scss" scoped>
-.corner-marker {
-    position: absolute;
+.max-width {
     max-width: 100%;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/footer-nav/footer-nav-content.vue b/src/components/footer-nav/footer-nav-content.vue
index 41574435..f2b47716 100644
--- a/src/components/footer-nav/footer-nav-content.vue
+++ b/src/components/footer-nav/footer-nav-content.vue
@@ -28,7 +28,7 @@
                 </div>
                 <div class="size-12 cr-c mb-20">图片建议宽高80*80,鼠标拖拽左侧圆点可调整导航顺序</div>
                 <div class="nav-list">
-                    <drag :data="form.nav_content" type="card" :space-col="20" @remove="nav_content_remove" @on-sort="on_sort">
+                    <drag :data="form.nav_content" type="card" :space-col="20" :model-type="!config.sync_bool ? '': 'footer'" @remove="nav_content_remove" @on-sort="on_sort">
                         <template #default="{ row, index}">
                             <div class="w">
                                 <el-form-item label="图标" label-width="45">
@@ -45,11 +45,11 @@
                                     <el-input v-model="row.name" placeholder="请输入名称" clearable />
                                 </el-form-item>
                                 <el-form-item label="链接" label-width="45">
-                                    <div class="flex-row align-c gap-10 w h">
+                                    <div class="w h re">
                                         <url-value v-model="row.link" :dialog-position-top="footerDialogPositionTop" :is-disabled="index === 0 ? !config.sync_bool : true"></url-value>
                                         <template v-if="index === 0 && config.sync_bool">
                                             <el-tooltip effect="dark" :show-after="200" :hide-after="200" content="首页地址不能更改" raw-content placement="top">
-                                                <icon name="miaosha-hdgz" size="12" color="#999"></icon>
+                                                <icon class="abs top-0 right-12 z-i" name="miaosha-hdgz" size="12" color="#999"></icon>
                                             </el-tooltip>
                                         </template>
                                     </div>
diff --git a/src/components/model-nav-group/model-nav-group-content.vue b/src/components/model-nav-group/model-nav-group-content.vue
index 1167790d..a8044463 100644
--- a/src/components/model-nav-group/model-nav-group-content.vue
+++ b/src/components/model-nav-group/model-nav-group-content.vue
@@ -34,7 +34,7 @@
             </card-container>
             <div class="divider-line"></div>
             <card-container>
-                <div class="mb-12 flex-row align-c jc-sb">内容设置<span class="classify-style" @click="classify_add">从分类添加</span></div>
+                <div class="mb-12 flex-row align-c jc-sb">内容设置<div class="flex-row gap-10"><span class="classify-style" @click="classify_remove_all">清空</span><span class="classify-style" @click="classify_add">从分类添加</span></div></div>
                 <div class="tips mt-10 mb-20 size-12">最多添加{{ form.nav_content_list.length }}张图片，建议尺寸90*90px</div>
                 <drag :data="form.nav_content_list" type="card" :space-col="27" model-type="nav-group" :model-index="tabs_active_index" @remove="remove" @on-sort="on_sort" @click="tabs_list_click">
                     <template #default="scoped">
@@ -50,7 +50,7 @@
                                     </el-form-item>
                                 </div>
                             </div>
-                            <div v-if="!isEmpty(scoped.row.subscript)" class="not-label-width flex-col gap-10 w h">
+                            <div v-if="!isEmpty(scoped.row.subscript) && !isEmpty(scoped.row.tabs_name)" class="not-label-width flex-col gap-10 w h">
                                 <!-- // 角标开关 -->
                                 <el-form-item label="角标" label-width="40" class="mb-0">
                                     <el-switch v-model="scoped.row.subscript.content.seckill_subscript_show" active-value="1" inactive-value="0"></el-switch>
@@ -58,7 +58,7 @@
                                 <!-- 内容设置 -->
                                 <template v-if="tabs_active_index == scoped.index">
                                     <el-form v-if="scoped.row.subscript.content.seckill_subscript_show == '1'" :model="scoped.row.subscript.style" label-width="60">
-                                        <el-tabs  v-model="scoped.row.tabs_name" class="content-tabs">
+                                        <el-tabs v-model="scoped.row.tabs_name" class="content-tabs">
                                             <el-tab-pane label="内容设置" name="content">
                                                 <el-form-item label-width="0">
                                                     <div class="flex-col gap-10 w h">
@@ -95,7 +95,7 @@
 </template>
 <script setup lang="ts">
 import { get_math } from "@/utils";
-import { clone, isEmpty } from "lodash";
+import { cloneDeep, isEmpty } from "lodash";
 import subscriptStyle from '@/config/const/subscript-style';
 
 interface Props {
@@ -215,12 +215,11 @@ const { form } = toRefs(state);
 const tabs_active_index = ref(0);
 onBeforeMount(() => {
     tabs_active_index.value = 0;
-    // 兼容老数据
-    form.value.nav_content_list = form.value.nav_content_list.map(item => ({
-        ...item,
-        tabs_name: 'content',
+    // 历史数据处理一下，避免有新增字段导致报错
+    form.value.nav_content_list.forEach((item: any) => {
+        item.tabs_name = !isEmpty(item.tabs_name) ? item.tabs_name : 'content',
         // 角标配置
-        subscript: isEmpty(item.subscript) ?
+        item.subscript = !isEmpty(item.subscript) ? item.subscript : 
             { 
                 content: {
                     seckill_subscript_show: '0',
@@ -236,10 +235,9 @@ onBeforeMount(() => {
                     padding_left: 0,
                     padding_right: 0,
                 }
-            } : item.subscript,
-    }));
+            }
+    });
 });
-
 const add = () => {
     form.value.nav_content_list.push({
         id: get_math(),
@@ -268,7 +266,7 @@ const add = () => {
     tabs_active_index.value = form.value.nav_content_list.length - 1;
 }
 const remove = (index: number) => {
-    if (form.value.nav_content_list.length > 1) {
+    if (form.value.nav_content_list.length > 0) {
         form.value.nav_content_list.splice(index, 1);
         if (form.value.nav_content_list.length > index) {
             tabs_active_index.value = index;
@@ -277,7 +275,6 @@ const remove = (index: number) => {
         }
     } else {
         tabs_active_index.value = 0;
-        ElMessage.warning('至少保留一个选项卡');
     }
 }
 // 拖拽更新之后，更新数据
@@ -289,6 +286,12 @@ const dialogVisible = ref(false);
 const classify_add = () => {
     dialogVisible.value = true;
 }
+// 清空全部
+const classify_remove_all = () => {
+    form.value.nav_content_list = [];
+    tabs_active_index.value = 0;
+}
+
 interface categoryList extends pageLinkList {
     image: string;
 }