From c980584158f8c2862c155ad689ff41ee4165eab5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Mon, 9 Dec 2024 18:44:24 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=BA=90=E6=A0=87=E8=AF=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/div-content/index.vue     | 14 +++++++++++++-
 .../model-custom/model-custom-content.vue       |  5 +++++
 .../model-custom/model-custom-setting.vue       | 17 ++++++++++++++++-
 src/styles/common.scss                          |  9 +++++++++
 src/views/layout/components/main/index.vue      | 12 +++++++++++-
 src/views/layout/components/settings/index.vue  |  2 +-
 6 files changed, 55 insertions(+), 4 deletions(-)

diff --git a/src/components/common/div-content/index.vue b/src/components/common/div-content/index.vue
index 6b01a1b9..2ae70e2c 100644
--- a/src/components/common/div-content/index.vue
+++ b/src/components/common/div-content/index.vue
@@ -17,7 +17,12 @@
                 <icon name="arrow-bottom" size="14" color="f" />
             </div>
         </div>
-        <div class="plug-in-name">{{ item.name }}</div>
+        <div class="plug-in-name">
+            <div class="re w h">
+                {{ item.name }}
+                <div v-if="!isEmpty(item.mark_name)" class="plug-in-mark-name mark-name-style">{{ item.mark_name }}</div>
+            </div>
+        </div>
         <div class="main-content" :class="{ 'plug-in-close': item.is_enable != '1' }" :style="mainContentStyle">
             <!-- 基础组件 -->
             <!-- 视频 -->
@@ -117,6 +122,8 @@
     </div>
 </template>
 <script lang="ts" setup>
+import { isEmpty } from 'lodash';
+
 interface Props {
     diyData: any[];
     showModelBorder: boolean;
@@ -339,6 +346,11 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri
         margin-top: -0.5rem;
     }
 }
+.plug-in-mark-name {
+    position: absolute;
+    top: -0.6rem;
+    left: -0.6rem;
+}
 .plug-in-close::before {
     position: absolute;
     content: '\5DF2\9690\85CF';
diff --git a/src/components/model-custom/model-custom-content.vue b/src/components/model-custom/model-custom-content.vue
index 30da2ef5..a5ea2bc5 100644
--- a/src/components/model-custom/model-custom-content.vue
+++ b/src/components/model-custom/model-custom-content.vue
@@ -314,6 +314,7 @@ const processing_data = (key: string) => {
 const url_value_dialog_visible = ref(false);
 const default_type_data = ref<any>({})
 const url_value_multiple_bool = ref(true);
+const emits = defineEmits(['data_source_change']);
 const changeDataSource = (key: string) => {
     form.value.is_custom_data = '0';
     const type_data = options.value.filter((item) => item.type == key);
@@ -331,8 +332,10 @@ const changeDataSource = (key: string) => {
     form.value.data_source_direction = 'vertical';
     // 如果存在默认数据类型的时候，就直接赋值给data_list
     if (type_data.length > 0 && !isEmpty(type_data[0].appoint_data)) {
+        emits('data_source_change', type_data[0].name)
         form.value.data_source_content.data_list = [ type_data[0].appoint_data ];
     } else if (type_data.length > 0 && !isEmpty(type_data[0].custom_config)) {
+        emits('data_source_change', type_data[0].name)
         // 是自定义数据类型
         form.value.is_custom_data = '1';
         // 自定义数据取值
@@ -348,6 +351,8 @@ const changeDataSource = (key: string) => {
         default_data();
         // 筛选数据处理
         filter_data_handling('new');
+    } else {
+        emits('data_source_change', '')
     }
 };
 const filter_form_change = (val: any) => {
diff --git a/src/components/model-custom/model-custom-setting.vue b/src/components/model-custom/model-custom-setting.vue
index 1470fe5b..cb868e2f 100644
--- a/src/components/model-custom/model-custom-setting.vue
+++ b/src/components/model-custom/model-custom-setting.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="w">
         <template v-if="type == '1'">
-            <model-custom-content :value="value.content"></model-custom-content>
+            <model-custom-content :value="value.content" :all-value="allValue" @data_source_change="data_source_change"></model-custom-content>
         </template>
         <template v-if="type == '2'">
             <model-custom-styles :value="value.style" :content="value.content" ></model-custom-styles>
@@ -9,6 +9,8 @@
     </div>
 </template>
 <script setup lang="ts">
+import { isEmpty } from 'lodash';
+
 const props = defineProps({
     type: {
         type: String,
@@ -18,6 +20,19 @@ const props = defineProps({
         type: Object,
         default: () => ({}),
     },
+    allValue: {
+        type: Object,
+        default: () => ({}),
+    },
 });
+const all_content = ref(props.allValue);
+const data_source_change = (name: string) => {
+    // 改变所有内容的名称
+    if (!isEmpty(name)) {
+        all_content.value.mark_name = name;
+    } else {
+        all_content.value.mark_name = '';
+    }   
+}
 </script>
 <style lang="scss" scoped></style>
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 0bcb69af..dae767d5 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -312,4 +312,13 @@
     .dot-item {
         margin: 0 0.3rem;
     }
+}
+.mark-name-style {
+    background: #D8D8D8 linear-gradient(107deg, #FC6F31 0%, #E22C08 100%);
+    font-size: 1rem;
+    line-height: 1.2rem;
+    padding: 0.2rem 0.4rem;
+    color: #fff;
+    white-space: nowrap;
+    border-radius: 0.8rem 0 0.8rem 0;
 }
\ No newline at end of file
diff --git a/src/views/layout/components/main/index.vue b/src/views/layout/components/main/index.vue
index fc7c9ded..08bef743 100644
--- a/src/views/layout/components/main/index.vue
+++ b/src/views/layout/components/main/index.vue
@@ -34,7 +34,10 @@
                     <TransitionGroup type="transition" tag="ul" name="fade" class="sort-target flex-col">
                         <li v-for="(item, index) in diy_data" :key="index" :class="['flex ptb-12 plr-10 gap-y-8 re align-c drawer-drag', { 'drawer-drag-bg': item.show_tabs == '1' }]" @click="on_choose(index, item.show_tabs)">
                             <el-icon class="iconfont icon-drag size-16 cr-d" />
-                            <span class="size-12 cr-6">{{ item.name }}</span>
+                            <span class="size-12 cr-6 re">
+                                {{ item.name }}
+                                <div v-if="!isEmpty(item.mark_name)" class="plug-drawer-mark-name mark-name-style">{{ item.mark_name }}</div>
+                            </span>
                             <el-icon class="iconfont icon-close-round-o size-16 abs" :style="[item.show_tabs == '1' ? '' : 'display:none']" @click.stop="del(index, false)" />
                         </li>
                     </TransitionGroup>
@@ -270,6 +273,7 @@ const draggable_click = (item: componentsData) => {
             // 添加tabs组件
             tabs_data.value.push({
                 name: item.name,
+                mark_name: '',
                 show_tabs: '1',
                 is_enable: '1',
                 src: '',
@@ -298,6 +302,7 @@ watchEffect(() => {
 const clone_item_com_data = (item: commonComponentData) => {
     return {
         name: item.name,
+        mark_name: '',
         show_tabs: '1',
         is_enable: '1',
         src: item.src,
@@ -576,4 +581,9 @@ const footer_nav_event = () => {
     align-items: stretch;
     flex: 1;
 }
+.plug-drawer-mark-name {
+    position: absolute;
+    top: -1.3rem;
+    left: -0.6rem;
+}
 </style>
diff --git a/src/views/layout/components/settings/index.vue b/src/views/layout/components/settings/index.vue
index 8105a184..20bd881d 100644
--- a/src/views/layout/components/settings/index.vue
+++ b/src/views/layout/components/settings/index.vue
@@ -76,7 +76,7 @@
             </template>
             <!-- 自定义 -->
             <template v-else-if="value.key == 'custom'">
-                <model-custom-setting :type="radio" :value="value.com_data"></model-custom-setting>
+                <model-custom-setting :type="radio" :value="value.com_data" :all-value="value"></model-custom-setting>
             </template>
             <!-- 底部导航 -->
             <template v-else-if="value.key == 'footer-nav'">