修改选项卡内容

src/components/base/drag/index.vue

@@ -5,9 +5,23 @@
                 <icon name="drag" size="16" class="cursor-move" />
                 <slot :row="item" :index="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)">
+                <template v-if="!multipleIcons">
-                    <icon v-if="type == 'card'" name="close-fillup" size="18" color="c" />
+                    <div v-if="!(props.modelType === 'footer' && index === 0)" class="abs c-pointer top-de-6 right-de-6 remove-icon" @click.stop="remove(index)">
-                </div>
+                        <icon v-if="type == 'card'" name="close-fillup" size="18" color="c" />
+                    </div>
+                </template>
+                <template v-else>
+                    <div class="abs top-0 right-0">
+                        <div class="w h multiple-icon-class">
+                            <div class="c-pointer multiple-icon" @click.stop="copy(index)">
+                                <icon v-if="type == 'card'" name="copy" size="18" color="c" />
+                            </div>
+                            <div v-if="!(props.modelType === 'footer' && index === 0)" class="c-pointer multiple-icon" @click.stop="remove(index)">
+                                <icon v-if="type == 'card'" name="close-fillup" size="18" color="c" />
+                            </div>
+                        </div>
+                    </div>
+                </template>
                 <div class="c-pointer do-not-trigger" @click.stop="remove(index)">
                     <icon v-if="type == 'line'" name="delete-o" size="18" color="6" />
                 </div>
@@ -27,7 +41,7 @@
 
 <script setup lang="ts">
 import { VueDraggable } from 'vue-draggable-plus';
-const emits = defineEmits(['click', 'remove', 'edit', 'onSort', 'replace']);
+const emits = defineEmits(['click', 'remove', 'edit', 'onSort', 'replace', 'copy']);
 
 interface Props {
     data: any; // 拖拽列表数据
@@ -37,6 +51,7 @@ interface Props {
     isShowEdit?: boolean;
     modelType?: string;
     modelIndex?: number;
+    multipleIcons?: boolean;
 }
 const props = withDefaults(defineProps<Props>(), {
     type: () => 'line',
@@ -45,6 +60,7 @@ const props = withDefaults(defineProps<Props>(), {
     iconPosition: 'center',
     modelType: 'outer',
     modelIndex: 0,
+    multipleIcons: false,
 });
 const className = ref('');
 if (props.type == 'card') {
@@ -76,6 +92,10 @@ const on_click = (item: any, index: number) => {
 const remove = (index: number) => {
     emits('remove', index);
 };
+// 复制
+const copy = (index: number) => {
+    emits('copy', index);
+};
 // 编辑
 const edit = (index: number) => {
     emits('edit', index);
@@ -111,4 +131,18 @@ const on_sort = () => {
     box-shadow: 0rem 0 0rem 0.1rem #409eff;
     /* border: 1px solid #409eff; */
 }
+.multiple-icon-class {
+    padding: 0.5rem 1rem;
+    background: #f7f7f7;
+    border-bottom-left-radius: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+}
+.multiple-icon {
+    display: flex;
+    border-radius: 100%;
+    line-height: 1.8rem;
+}
 </style>

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" model-type="footer" :space-col="20" @remove="nav_content_remove" @on-sort="on_sort">
                         <template #default="{ row }">
                             <div class="w">
                                 <el-form-item label="图标" label-width="45">

src/components/model-data-tabs/model-data-tabs-content.vue

@@ -26,7 +26,7 @@
             <card-container>
                 <div class="mb-12">选项卡设置</div>
                 <div class="nav-list">
-                    <drag :data="form.tabs_list" type="card" icon-position="top" :space-col="20" @click="tabs_list_click" @remove="tabs_list_remove" @on-sort="tabs_list_sort">
+                    <drag :data="form.tabs_list" type="card" icon-position="top" :space-col="20" multiple-icons @click="tabs_list_click" @remove="tabs_list_remove" @copy="tabs_list_copy" @on-sort="tabs_list_sort">
                         <template #default="{ row, index }">
                             <div class="flex-col w">
                                 <el-form-item label="显示类型" class="w mb-10">
@@ -264,9 +264,23 @@ const tabs_list_remove = (index: number) => {
     }
     set_offset_top(form.value.tabs_active_index);
 };
+// 选项卡复制
+const tabs_list_copy = (index: number) => {
+    const data = {
+        ...cloneDeep(form.value.tabs_list[index]),
+        tabs_name: 'content',
+        title: (form.value.tabs_list[index]?.title || '') + '(复制)',
+    };
+    const new_index = index + 1;
+    form.value.tabs_list.splice(new_index, 0, data);
+    form.value.tabs_active_index = new_index;
+    set_offset_top(new_index);
+};
+// 选项卡排序
 const tabs_list_sort = (item: any) => {
     form.value.tabs_list = item;
 };
+// 添加选项卡
 const tabs_add = () => {
     form.value.tabs_list.push({
         id: get_math(),