From c5e1f40fd2df8cc15f928a6b1928599e3925d867 Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Tue, 20 Aug 2024 11:37:33 +0800
Subject: [PATCH 1/4] =?UTF-8?q?1.=E9=93=BE=E6=8E=A5=E6=8E=A5=E5=8F=A3?=
 =?UTF-8?q?=E8=81=94=E8=B0=83=20sws=202024-08-20?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/url-value/link-goods-category.vue  | 154 +++++++++---------
 .../common/url-value/link-goods-search.vue    | 100 +++++-------
 .../common/url-value/link-goods.vue           |  40 ++---
 src/components/common/url-value/link-list.vue |  25 ++-
 .../common/url-value/url-value-dialog.vue     |  15 +-
 src/store/modules/url-value.ts                |  12 +-
 src/styles/index.scss                         |   8 +
 7 files changed, 163 insertions(+), 191 deletions(-)

diff --git a/src/components/common/url-value/link-goods-category.vue b/src/components/common/url-value/link-goods-category.vue
index a7854407..12f80fa3 100644
--- a/src/components/common/url-value/link-goods-category.vue
+++ b/src/components/common/url-value/link-goods-category.vue
@@ -2,20 +2,14 @@
     <!-- 商品分类 -->
     <div class="container">
         <div class="flex-row jc-e gap-20 mb-20">
-            <el-select v-model="type" class="search-w" placeholder="请选择">
-                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-            <el-select v-model="brand" class="search-w" placeholder="品牌">
-                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
             <el-input v-model="search_value" placeholder="请输入搜索内容" class="search-w" @change="handle_search">
                 <template #suffix>
-                    <icon name="search" size="16" color="9"></icon>
+                    <icon name="search" size="16" color="9" class="c-pointer" @click="handle_search"></icon>
                 </template>
             </el-input>
         </div>
         <div class="content">
-            <el-table :data="tableData" class="w" :header-cell-style="{ background: '#f7f7f7' }" row-key="id" height="438" fixed @row-click="row_click">
+            <el-table :data="new_table_data" class="w" :header-cell-style="{ background: '#f7f7f7' }" :tree-props="{ children: 'items' }" row-key="id" height="460" fixed @row-click="row_click">
                 <el-table-column label="#" width="120" type="">
                     <template #default="scope">
                         <el-radio v-model="template_selection" :label="scope.$index + ''">&nbsp;</el-radio>
@@ -25,17 +19,22 @@
                 <el-table-column prop="name" label="分类名称" />
                 <el-table-column prop="icon" label="分类图标">
                     <template #default="scope">
-                        <el-image :src="scope.row.icon" class="img" />
+                        <el-image :src="scope.row.icon" class="img">
+                            <template #error>
+                                <div class="img">
+                                    <img :src="error_image" class="w" />
+                                </div>
+                            </template>
+                        </el-image>
                     </template>
                 </el-table-column>
             </el-table>
-            <div class="mt-10 flex-row jc-e">
-                <el-pagination :current-page="page" :page-size="21" :pager-count="5" layout="prev, pager, next" :total="data_total" @current-change="get_list" />
-            </div>
         </div>
     </div>
 </template>
 <script lang="ts" setup>
+import { urlValueStore, urlValue, pageLinkList } from '@/store';
+const url_value_store = urlValueStore();
 const props = defineProps({
     // 重置
     reset: {
@@ -47,91 +46,86 @@ watch(
     () => props.reset,
     () => {
         template_selection.value = '';
+        init();
     }
 );
 const modelValue = defineModel({ type: Object, default: {} });
-const tableData: linkData[] = [
-    {
-        id: 1,
-        name: '一级分类',
-        icon: 'https://img.yzcdn.cn/vant/cat.jpeg',
-        link: 'a',
-        children: [
-            {
-                id: 2,
-                name: '二级分类',
-                icon: 'https://img.yzcdn.cn/vant/cat.jpeg',
-                link: 'b',
-            },
-        ],
-    },
-    {
-        id: 3,
-        name: '一级分类',
-        icon: 'https://img.yzcdn.cn/vant/cat.jpeg',
-        link: 'c',
-    },
-    {
-        id: 4,
-        name: '一级分类',
-        icon: 'https://img.yzcdn.cn/vant/cat.jpeg',
-        link: 'd',
-    },
-    {
-        id: 5,
-        name: '一级分类',
-        icon: 'https://img.yzcdn.cn/vant/cat.jpeg',
-        link: 'e',
-    },
-];
+const table_data = ref<pageLinkList[]>([]);
+const new_table_data = ref<pageLinkList[]>([]);
 const search_value = ref('');
-const handle_search = () => {
-    console.log(search_value.value);
+const error_image = ref(new URL(`../../../assets/images/empty.png`, import.meta.url).href);
+onMounted(() => {
+    init();
+});
+const init = () => {
+    search_value.value = '';
+    table_data.value = url_value_store.url_value.goods_category;
+    new_table_data.value = url_value_store.url_value.goods_category;
 };
-const type = ref('');
-const brand = ref('');
-const options = ref([
-    { value: '1', label: '一级分类' },
-    { value: '2', label: '二级分类' },
-    { value: '3', label: '三级分类' },
-]);
+// 筛选
+const handle_search = () => {
+    // 根据关键词过滤new_table_data数据,如果==父级 显示父级和父级下的所有子级数据，
+    if (search_value.value) {
+        new_table_data.value = filterData(search_value.value, table_data.value || []);
+    } else {
+        new_table_data.value = table_data.value || [];
+    }
+};
+
+const filterData = (input: string, data: pageLinkList[]) => {
+    let result = [];
+    // 遍历数组
+    for (let item of data) {
+        // 检查当前项的name是否匹配
+        if (item.name.includes(input)) {
+            result.push(item);
+        } else {
+            if (item.items) {
+                // 否则，‌检查当前项的data属性中的子项
+                let subResult = item.items.filter((subItem) => subItem.name.includes(input));
+                // 如果找到匹配的子项，‌将当前项（‌父级）‌添加到结果中
+                if (subResult.length > 0) {
+                    result.push({ ...item, items: subResult });
+                } else {
+                    // 如果二级还没有查到则查询三级
+                    let result_child: pageLinkList[] = [];
+                    item.items.forEach((child: pageLinkList) => {
+                        if (child.items) {
+                            let subResult = child.items.filter((subItem) => subItem.name.includes(input));
+                            if (subResult.length > 0) {
+                                result_child.push({ ...child, items: subResult });
+                            }
+                        }
+                    });
+                    if (result_child.length > 0) {
+                        result.push({ ...item, items: result_child });
+                    }
+                }
+            }
+        }
+    }
+
+    return result;
+};
+
 const template_selection = ref('');
 
 const row_click = (row: any) => {
-    let new_data: linkData[] = [];
+    let new_data: pageLinkList[] = [];
     // 多级数组转换一级数组
-    const array_conversion = (item: linkData[]) => {
+    const array_conversion = (item: pageLinkList[]) => {
         item.forEach((item) => {
             new_data.push(item);
-            if (item.children) {
-                array_conversion(item.children);
+            if (item.items) {
+                array_conversion(item.items);
             }
         });
         return new_data;
     };
-    const new_table_data = array_conversion(JSON.parse(JSON.stringify(tableData)));
-    template_selection.value = new_table_data.findIndex((item: linkData) => item.id == row.id).toString();
+    const new_table_datas = array_conversion(JSON.parse(JSON.stringify(new_table_data.value)));
+    template_selection.value = new_table_datas.findIndex((item: pageLinkList) => item.id == row.id).toString();
     modelValue.value = row;
 };
-//#region 分页 -----------------------------------------------start
-// 总页数
-// const page_total = ref(0);
-// 当前页
-const page = ref(1);
-// 总数量
-const data_total = ref(0);
-
-// 查询文件
-const search_data = ref({
-    page: page.value,
-    type: '',
-    name: search_value.value,
-});
-// 查询文件
-const get_list = () => {
-    console.log('查询接口', search_data);
-};
-//#region 分页 -----------------------------------------------end
 </script>
 <style lang="scss" scoped>
 .container {
diff --git a/src/components/common/url-value/link-goods-search.vue b/src/components/common/url-value/link-goods-search.vue
index 20bad504..eaca22d0 100644
--- a/src/components/common/url-value/link-goods-search.vue
+++ b/src/components/common/url-value/link-goods-search.vue
@@ -17,7 +17,7 @@
                         <el-scrollbar height="420px">
                             <div v-for="(item, index) in goods_category_data" :key="item.id" class="item flex-row jc-c align-c gap-10 pa-10" :class="one_item_index === index + 1 ? 'active' : ''" @click="goods_item_click(item, 1, index)">
                                 <text class="flex-1 flex-width text-line-1">{{ item.name }}</text>
-                                <icon v-if="item?.children" name="arrow-right"></icon>
+                                <icon v-if="item?.items" name="arrow-right"></icon>
                             </div>
                         </el-scrollbar>
                     </div>
@@ -25,7 +25,7 @@
                         <el-scrollbar height="420px">
                             <div v-for="(item, index) in two_item_data" :key="item.id" class="item flex-row jc-c align-c gap-10 pa-10" :class="two_item_index === index + 1 ? 'active' : ''" @click="goods_item_click(item, 2, index)">
                                 <text class="flex-1 flex-width text-line-1">{{ item.name }}</text>
-                                <icon v-if="item?.children" name="arrow-right"></icon>
+                                <icon v-if="item?.items" name="arrow-right"></icon>
                             </div>
                         </el-scrollbar>
                     </div>
@@ -62,6 +62,8 @@
 </template>
 <script lang="ts" setup>
 import type { FormInstance, FormRules } from 'element-plus';
+import { urlValueStore, urlValue, pageLinkList } from '@/store';
+const url_value_store = urlValueStore();
 const props = defineProps({
     status: {
         type: Boolean,
@@ -82,64 +84,49 @@ watch(
 watch(
     () => props.reset,
     () => {
-        reset_data();
-        custom_type_active.value = 0;
+        init();
     }
 );
 const emit = defineEmits(['update:link', 'required', 'type']);
-interface customType {
-    id: number;
-    name: string;
-}
-const custom_type = ref<customType[]>([
+
+onMounted(() => {
+    init();
+});
+const reset_data = () => {
+    one_item_index.value = 0;
+    one_item_text.value = '';
+    two_item_index.value = 0;
+    two_item_text.value = '';
+    three_item_index.value = 0;
+    three_item_text.value = '';
+    two_item_data.value = [];
+    brand_item_index.value = 0;
+    form.key = '';
+};
+
+const brand_data = ref<pageLinkList[]>([]);
+const init = () => {
+    reset_data();
+    custom_type_active.value = 0;
+    goods_category_data.value = url_value_store.url_value.goods_category;
+    brand_data.value = url_value_store.url_value.brand_list;
+};
+const custom_type = [
     { id: 0, name: '商品分类' },
     { id: 1, name: '品牌' },
     { id: 2, name: '关键字' },
-]);
-interface baseData {
-    id: number;
-    name: string;
-    children?: baseData[];
-}
-const goods_category_data = reactive<baseData[]>([
-    {
-        id: 0,
-        name: '服饰鞋包',
-        children: [
-            {
-                id: 1,
-                name: '服饰',
-                children: [
-                    { id: 1, name: '上衣' },
-                    { id: 2, name: '裤子' },
-                ],
-            },
-            {
-                id: 2,
-                name: '鞋包',
-                children: [
-                    { id: 1, name: '休闲鞋' },
-                    { id: 2, name: '商务休闲鞋' },
-                ],
-            },
-        ],
-    },
-    { id: 1, name: '家居生活', children: [{ id: 1, name: '生活用品' }] },
-    { id: 2, name: '母婴' },
-]);
-const brand_data = reactive<baseData[]>([
-    { id: 1, name: '品牌1' },
-    { id: 2, name: '品牌2' },
-]);
+];
 const custom_type_active = ref(0);
 const custom_type_event = (item: any) => {
     custom_type_active.value = item.id;
     emit('type', item.id);
 };
 //#region 商品分类  -----------------------------------------------start
+// 商品分类
+const goods_category_data = ref<pageLinkList[]>([]);
 const check_data = ref({});
-const two_item_data = ref<baseData[]>([]);
-const three_item_data = ref<baseData[]>([]);
+const two_item_data = ref<pageLinkList[]>([]);
+const three_item_data = ref<pageLinkList[]>([]);
 const one_item_index = ref(0);
 const two_item_index = ref(0);
 const three_item_index = ref(0);
@@ -147,7 +134,7 @@ const one_item_text = ref('');
 const two_item_text = ref('');
 const three_item_text = ref('');
 // 商品项点击事件
-const goods_item_click = (item: baseData, level: number, index: number) => {
+const goods_item_click = (item: pageLinkList, level: number, index: number) => {
     if (level === 1) {
         one_item_index.value = index + 1;
         one_item_text.value = item.name;
@@ -167,11 +154,11 @@ const goods_item_click = (item: baseData, level: number, index: number) => {
         three_item_index.value = index + 1;
         three_item_text.value = item.name;
     }
-    if (item.children && item.children.length > 0) {
+    if (item.items && item.items.length > 0) {
         if (level === 1) {
-            two_item_data.value = item.children;
+            two_item_data.value = item.items;
         } else if (level === 2) {
-            three_item_data.value = item.children;
+            three_item_data.value = item.items;
         }
     } else {
         check_data.value = item;
@@ -212,17 +199,6 @@ const on_submit = () => {
     });
 };
 //#endregion 关键字  -----------------------------------------------end
-const reset_data = () => {
-    one_item_index.value = 0;
-    one_item_text.value = '';
-    two_item_index.value = 0;
-    two_item_text.value = '';
-    three_item_index.value = 0;
-    three_item_text.value = '';
-    two_item_data.value = [];
-    brand_item_index.value = 0;
-    form.key = '';
-};
 </script>
 <style lang="scss" scoped>
 .container {
diff --git a/src/components/common/url-value/link-goods.vue b/src/components/common/url-value/link-goods.vue
index 3a58e9d3..202bc044 100644
--- a/src/components/common/url-value/link-goods.vue
+++ b/src/components/common/url-value/link-goods.vue
@@ -36,6 +36,8 @@
     </div>
 </template>
 <script lang="ts" setup>
+import { urlValueStore, urlValue, pageLinkList } from '@/store';
+const url_value_store = urlValueStore();
 const props = defineProps({
     // 重置
     reset: {
@@ -46,37 +48,21 @@ const props = defineProps({
 watch(
     () => props.reset,
     () => {
-        template_selection.value = '';
+        init();
     }
 );
+onMounted(() => {
+    init();
+});
 const modelValue = defineModel({ type: Object, default: {} });
-const tableData: linkData[] = [
-    {
-        id: 1,
-        name: '一级分类',
-        icon: 'https://img.yzcdn.cn/vant/cat.jpeg',
-        link: 'a',
-    },
-    {
-        id: 3,
-        name: '一级分类',
-        icon: 'https://img.yzcdn.cn/vant/cat.jpeg',
-        link: 'c',
-    },
-    {
-        id: 4,
-        name: '一级分类',
-        icon: 'https://img.yzcdn.cn/vant/cat.jpeg',
-        link: 'd',
-    },
-    {
-        id: 5,
-        name: '一级分类',
-        icon: 'https://img.yzcdn.cn/vant/cat.jpeg',
-        link: 'e',
-    },
-];
+const tableData = ref<pageLinkList[]>([]);
 const search_value = ref('');
+const init = () => {
+    template_selection.value = '';
+    type.value = '';
+    brand.value = '';
+    get_list();
+};
 const handle_search = () => {
     console.log(search_value.value);
 };
diff --git a/src/components/common/url-value/link-list.vue b/src/components/common/url-value/link-list.vue
index db5d646f..8f9a2ce9 100644
--- a/src/components/common/url-value/link-list.vue
+++ b/src/components/common/url-value/link-list.vue
@@ -33,6 +33,11 @@
 import { urlValueStore, urlValue, pageLinkList } from '@/store';
 const url_value_store = urlValueStore();
 const props = defineProps({
+    // 类型
+    type: {
+        type: String,
+        default: () => '',
+    },
     // 重置
     reset: {
         type: Boolean,
@@ -57,19 +62,19 @@ const init = () => {
     search_value.value = '';
     // 过滤url_value_store.url_value.page_link_list中的type为shop的data的数据，只保留data数组
     base_data.value = url_value_store.url_value.page_link_list.filter((item: any) => {
-        if (item.type == 'shop') {
+        if (item.type == props.type) {
             return item.data;
         }
     });
-    new_base_data.value = base_data.value[0].data;
+    new_base_data.value = base_data.value[0].data || [];
 };
 
 const handle_search = () => {
     // 根据关键词过滤new_base_data数据,如果==父级 显示父级和父级下的所有子级数据，
     if (search_value.value) {
-        new_base_data.value = filterData(search_value.value, base_data.value[0].data);
+        new_base_data.value = filterData(search_value.value, base_data.value[0].data || []);
     } else {
-        new_base_data.value = base_data.value[0].data;
+        new_base_data.value = base_data.value[0].data || [];
     }
 };
 const filterData = (input: string, data: pageLinkList[]) => {
@@ -80,11 +85,13 @@ const filterData = (input: string, data: pageLinkList[]) => {
         if (item.name.includes(input)) {
             result.push(item);
         } else {
-            // 否则，‌检查当前项的data属性中的子项
-            let subResult = item.data.filter((subItem) => subItem.name.includes(input));
-            // 如果找到匹配的子项，‌将当前项（‌父级）‌添加到结果中
-            if (subResult.length > 0) {
-                result.push({ ...item, data: subResult });
+            if (item.data) {
+                // 否则，‌检查当前项的data属性中的子项
+                let subResult = item.data.filter((subItem) => subItem.name.includes(input));
+                // 如果找到匹配的子项，‌将当前项（‌父级）‌添加到结果中
+                if (subResult.length > 0) {
+                    result.push({ ...item, data: subResult });
+                }
             }
         }
     }
diff --git a/src/components/common/url-value/url-value-dialog.vue b/src/components/common/url-value/url-value-dialog.vue
index 147a637c..75ea13be 100644
--- a/src/components/common/url-value/url-value-dialog.vue
+++ b/src/components/common/url-value/url-value-dialog.vue
@@ -15,7 +15,7 @@
             </div>
             <div class="right-content flex-1">
                 <template v-if="link_select == 'shop' || link_select == 'plugins'">
-                    <link-list v-model="link_value" :reset="reset_compontent"></link-list>
+                    <link-list :key="link_select" v-model="link_value" :type="link_select" :reset="reset_compontent"></link-list>
                 </template>
                 <template v-else-if="link_select == 'goods-category'">
                     <link-goods-category v-model="link_value" :reset="reset_compontent"></link-goods-category>
@@ -30,10 +30,10 @@
                     <link-articles v-model="link_value" :reset="reset_compontent"></link-articles>
                 </template>
                 <template v-else-if="link_select == 'diy' || link_select == 'design' || link_select == 'custom-view'">
-                    <link-table v-model="link_value" :reset="reset_compontent"></link-table>
+                    <link-table v-model="link_value" :type="link_select" :reset="reset_compontent"></link-table>
                 </template>
                 <template v-else-if="link_select == 'custom'">
-                    <link-custom :reset="reset_compontent" :status="component_status" @update:link="custom_link" @required="required_tips"></link-custom>
+                    <link-custom :key="link_select" :reset="reset_compontent" :status="component_status" @update:link="custom_link" @required="required_tips"></link-custom>
                 </template>
             </div>
         </div>
@@ -74,13 +74,6 @@ const reset_compontent = ref(false);
 const custom_link_type = ref(props.type);
 const base_data = ref<any[]>([]);
 const init_data = ref({});
-watch(
-    () => dialogVisible.value,
-    (val) => {
-        if (val) {
-        }
-    }
-);
 watch(
     () => dialogVisible.value,
     (val) => {
@@ -111,7 +104,7 @@ const init = () => {
         init_data.value = url_value_store.url_value;
         base_data.value = url_value_store.url_value.page_link_list;
         if (url_value_store.url_value.page_link_list.length > 0) {
-            link_select.value = url_value_store.url_value.page_link_list[0].type;
+            link_select.value = url_value_store.url_value.page_link_list[0].type || '';
         }
     }
 };
diff --git a/src/store/modules/url-value.ts b/src/store/modules/url-value.ts
index e1dccd06..a6d9a181 100644
--- a/src/store/modules/url-value.ts
+++ b/src/store/modules/url-value.ts
@@ -29,10 +29,18 @@ export const urlValueStore = defineStore('urlValue', () => {
 });
 
 export interface pageLinkList {
+    id?: string;
     name: string;
-    type: string;
-    data: pageLinkList[];
+    type?: string;
     page?: string;
+    data?: pageLinkList[];
+    items?: pageLinkList[];
+    icon?: string;
+    link?: string;
+    lng?: number;
+    lat?: number;
+    hasChildren?: boolean;
+    children?: pageLinkList[];
 }
 
 // 分类树结构
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 85f3293e..7578f731 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -174,3 +174,11 @@ div:focus {
 .el-popover.el-popper {
     min-width: 5rem;
 }
+// 表格表头字体颜色调整
+// 链接弹窗表格用到  ------ start
+.el-table {
+    thead {
+        color: #333;
+    }
+}
+// 链接弹窗表格用到  ------ end

From 12de19a7fb1816cd2c0952a9d80b3dc4901b0089 Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Tue, 20 Aug 2024 15:46:49 +0800
Subject: [PATCH 2/4] =?UTF-8?q?1.=E9=93=BE=E6=8E=A5=E6=8E=A5=E5=8F=A3?=
 =?UTF-8?q?=E8=81=94=E8=B0=83=20sws=202024-08-20?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/url-value.ts                          |  41 +++++++
 src/components/base/image-empty/index.vue     |   8 +-
 src/components/common/url-value/index.vue     |   2 +-
 .../common/url-value/link-articles.vue        | 115 ++++++++----------
 .../common/url-value/link-custom.vue          |   7 +-
 .../common/url-value/link-goods-category.vue  |  14 +--
 .../common/url-value/link-goods-search.vue    |   4 +-
 .../common/url-value/link-goods.vue           |  91 ++++++++------
 .../common/url-value/link-table.vue           |  91 ++++++++------
 .../common/url-value/url-value-dialog.vue     |  19 +--
 src/utils/index.ts                            |  19 +++
 11 files changed, 243 insertions(+), 168 deletions(-)

diff --git a/src/api/url-value.ts b/src/api/url-value.ts
index 022d319f..6e181d5e 100644
--- a/src/api/url-value.ts
+++ b/src/api/url-value.ts
@@ -8,6 +8,47 @@ class UrlValueAPI {
             method: 'post',
         });
     }
+    /**  获取商品列表 */
+    static getGoodsList(data: any) {
+        return request({
+            url: `diyapi/goodslist`,
+            method: 'post',
+            data,
+        });
+    }
+    /** 获取文章列表 */
+    static getArticleList(data: any) {
+        return request({
+            url: `diyapi/articlelist`,
+            method: 'post',
+            data,
+        });
+    }
+    /** 获取diy列表 */
+    static getDiyList(data: any) {
+        return request({
+            url: `diyapi/diylist`,
+            method: 'post',
+            data,
+        });
+    }
+    /** 获取页面设计列表 */
+    static getDesignList(data: any) {
+        return request({
+            url: `diyapi/designlist`,
+            method: 'post',
+            data,
+        });
+    }
+
+    /** 获取自定义列表 */
+    static getCustomList(data: any) {
+        return request({
+            url: `diyapi/customviewlist`,
+            method: 'post',
+            data,
+        });
+    }
 }
 
 export default UrlValueAPI;
diff --git a/src/components/base/image-empty/index.vue b/src/components/base/image-empty/index.vue
index 651ac14a..a4f7e9c7 100644
--- a/src/components/base/image-empty/index.vue
+++ b/src/components/base/image-empty/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-image :src="image?.url || ''" class="flex align-c jc-c" @load="on_load">
+    <el-image :src="is_obj(image) ? image?.url || '' : image" class="flex align-c jc-c" @load="on_load">
         <template #error>
             <div class="image-slot" :style="errorStyle">
                 <img :src="error_image" :style="errorImgStyle" />
@@ -8,6 +8,7 @@
     </el-image>
 </template>
 <script setup lang="ts">
+import { is_obj } from '@/utils';
 const props = defineProps({
     errorImgStyle: {
         type: String,
@@ -18,7 +19,7 @@ const props = defineProps({
         default: () => '',
     },
 });
-const image = defineModel({ type: Object, default: () => {} });
+const image = defineModel({ type: [Object, String], default: () => {} });
 const error_image = ref(new URL(`../../../assets/images/empty.png`, import.meta.url).href);
 const emit = defineEmits(['load']);
 const on_load = (e: any) => {
@@ -34,5 +35,8 @@ const on_load = (e: any) => {
     align-items: center;
     justify-content: center;
     background-color: #f4fcff;
+    img {
+        width: 100%;
+    }
 }
 </style>
diff --git a/src/components/common/url-value/index.vue b/src/components/common/url-value/index.vue
index 7dfcb912..0e994acc 100644
--- a/src/components/common/url-value/index.vue
+++ b/src/components/common/url-value/index.vue
@@ -2,7 +2,7 @@
 <template>
     <div class="flex-row align-c gap-10 br-d radius-sm plr-11 url-value-input" @click="dialogVisible = true">
         <div class="flex-1 flex-width size-12 text-line-1">
-            <text v-if="!is_obj_empty(modelValue)">{{ modelValue.name }}</text>
+            <text v-if="!is_obj_empty(modelValue)">{{ modelValue.name || modelValue.title }}</text>
             <text v-else class="cr-9">{{ placeholder }}</text>
         </div>
         <div class="value-input-icon">
diff --git a/src/components/common/url-value/link-articles.vue b/src/components/common/url-value/link-articles.vue
index 0294685b..3768c1f7 100644
--- a/src/components/common/url-value/link-articles.vue
+++ b/src/components/common/url-value/link-articles.vue
@@ -2,43 +2,45 @@
     <!-- 商品分类 -->
     <div class="container">
         <div class="flex-row jc-e gap-20 mb-20">
-            <el-select v-model="type" class="search-w" placeholder="请选择">
-                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+            <el-select v-model="category_ids" class="search-w" placeholder="请选择" clearable @change="handle_search">
+                <el-option v-for="item in article_category_list" :key="item.id" :label="item.name" :value="item.id" />
             </el-select>
             <el-input v-model="search_value" placeholder="请输入搜索内容" class="search-w" @change="handle_search">
                 <template #suffix>
-                    <icon name="search" size="16" color="9"></icon>
+                    <icon name="search" size="16" color="9" class="c-pointer" @click="handle_search"></icon>
                 </template>
             </el-input>
         </div>
         <div class="content">
             <el-table :data="tableData" class="w" :header-cell-style="{ background: '#f7f7f7' }" row-key="id" height="438" fixed @row-click="row_click">
-                <el-table-column label="#" width="120" type="">
+                <el-table-column label="#" width="40" type="">
                     <template #default="scope">
                         <el-radio v-model="template_selection" :label="scope.$index + ''">&nbsp;</el-radio>
                     </template>
                 </el-table-column>
-                <el-table-column prop="id" label="ID" width="180" type="" />
-                <el-table-column prop="icon" label="文章图片" width="130">
+                <el-table-column prop="id" label="ID" width="80" type="" />
+                <el-table-column prop="cover" label="文章">
                     <template #default="scope">
-                        <el-image :src="scope.row.icon" class="img">
-                            <template #error>
-                                <div class="bg-f5 flex-row jc-c align-c radius h w">
-                                    <icon name="error-img" size="14" color="9"></icon>
-                                </div>
-                            </template>
-                        </el-image>
+                        <div class="flex-row align-c gap-10">
+                            <image-empty v-model="scope.row.cover" class="img"></image-empty>
+                            <div class="flex-1">{{ scope.row.title }}</div>
+                        </div>
                     </template>
                 </el-table-column>
-                <el-table-column prop="name" label="文章名称" />
+                <template #empty>
+                    <no-data></no-data>
+                </template>
             </el-table>
             <div class="mt-10 flex-row jc-e">
-                <el-pagination :current-page="page" :page-size="21" :pager-count="5" layout="prev, pager, next" :total="data_total" @current-change="get_list" />
+                <el-pagination :current-page="page" :page-size="page_size" :pager-count="5" layout="prev, pager, next" :total="data_total" @current-change="get_list" />
             </div>
         </div>
     </div>
 </template>
 <script lang="ts" setup>
+import UrlValueAPI from '@/api/url-value';
+import { urlValueStore, urlValue, pageLinkList } from '@/store';
+const url_value_store = urlValueStore();
 const props = defineProps({
     // 重置
     reset: {
@@ -49,70 +51,59 @@ const props = defineProps({
 watch(
     () => props.reset,
     () => {
-        template_selection.value = '';
+        init();
     }
 );
+onMounted(() => {
+    init();
+});
 const modelValue = defineModel({ type: Object, default: {} });
-const tableData: linkData[] = [
-    {
-        id: 1,
-        name: '一级分类一级分类一级分类一级分类一级分类一级分类一级分类',
-        icon: 'https://img.yzcdn.cn/vant/cat.jpeg',
-        link: 'a',
-    },
-    {
-        id: 3,
-        name: '一级分类',
-        icon: 'https://img.yzcdn.cn/vant/cat.jpeg',
-        link: 'c',
-    },
-    {
-        id: 4,
-        name: '一级分类',
-        icon: 'https://img.yzcdn.cn/vant/cat.jpeg',
-        link: 'd',
-    },
-    {
-        id: 5,
-        name: '一级分类',
-        icon: 'https://img.yzcdn.cn/vant/cat.jpeg',
-        link: 'e',
-    },
-];
+const tableData = ref<pageLinkList[]>([]);
 const search_value = ref('');
-const handle_search = () => {
-    console.log(search_value.value);
+const init = () => {
+    template_selection.value = '';
+    category_ids.value = '';
+    search_value.value = '';
+    article_category_list.value = url_value_store.url_value.article_category_list;
+    get_list(1);
 };
-const type = ref('');
-const options = ref([
-    { value: '1', label: '一级分类' },
-    { value: '2', label: '二级分类' },
-    { value: '3', label: '三级分类' },
-]);
+const handle_search = () => {
+    get_list(1);
+};
+const category_ids = ref('');
+interface articleCategory {
+    id: string;
+    name: string;
+    url: string;
+}
+const article_category_list = ref<articleCategory[]>([]);
 const template_selection = ref('');
 
 const row_click = (row: any) => {
-    const new_table_data = JSON.parse(JSON.stringify(tableData));
+    const new_table_data = JSON.parse(JSON.stringify(tableData.value));
     template_selection.value = new_table_data.findIndex((item: linkData) => item.id == row.id).toString();
     modelValue.value = row;
 };
 //#region 分页 -----------------------------------------------start
-// 总页数
-// const page_total = ref(0);
 // 当前页
 const page = ref(1);
+// 每页数量
+const page_size = ref(10);
 // 总数量
 const data_total = ref(0);
-
 // 查询文件
-const search_data = ref({
-    page: page.value,
-    type: '',
-    name: search_value.value,
-});
-// 查询文件
-const get_list = () => {
-    console.log('查询接口', search_data);
+const get_list = (new_page: number) => {
+    let new_data = {
+        page: new_page,
+        keywords: search_value.value,
+        category_ids: category_ids.value,
+        page_size: page_size.value,
+    };
+    UrlValueAPI.getArticleList(new_data).then((res: any) => {
+        tableData.value = res.data.data_list;
+        data_total.value = res.data.data_total;
+        page.value = res.data.page;
+    });
 };
 //#region 分页 -----------------------------------------------end
 </script>
diff --git a/src/components/common/url-value/link-custom.vue b/src/components/common/url-value/link-custom.vue
index 1de37e3d..f0118c47 100644
--- a/src/components/common/url-value/link-custom.vue
+++ b/src/components/common/url-value/link-custom.vue
@@ -48,6 +48,7 @@
 </template>
 <script lang="ts" setup>
 import type { FormInstance } from 'element-plus';
+import { pageLinkList } from '@/store';
 const props = defineProps({
     status: {
         type: Boolean,
@@ -128,12 +129,12 @@ const address = computed(() => {
     return { trigger: 'change', message: '详细地址不能为空', required: custom_type_active.value == 3 };
 });
 const ruleFormRef = ref<FormInstance>();
-const emit = defineEmits(['update:link', 'required']);
+const emit = defineEmits(['update:link']);
 const on_submit = () => {
     if (!ruleFormRef.value) return;
     ruleFormRef.value.validate((valid: boolean) => {
         if (valid) {
-            let new_value: linkData = {
+            let new_value: pageLinkList = {
                 name: '',
                 link: '',
             };
@@ -161,8 +162,6 @@ const on_submit = () => {
                 };
             }
             emit('update:link', new_value);
-        } else {
-            emit('required');
         }
     });
 };
diff --git a/src/components/common/url-value/link-goods-category.vue b/src/components/common/url-value/link-goods-category.vue
index 12f80fa3..07c9aa0a 100644
--- a/src/components/common/url-value/link-goods-category.vue
+++ b/src/components/common/url-value/link-goods-category.vue
@@ -16,18 +16,15 @@
                     </template>
                 </el-table-column>
                 <el-table-column prop="id" label="ID" width="180" type="" />
-                <el-table-column prop="name" label="分类名称" />
+                <el-table-column prop="name" label="分类名称"></el-table-column>
                 <el-table-column prop="icon" label="分类图标">
                     <template #default="scope">
-                        <el-image :src="scope.row.icon" class="img">
-                            <template #error>
-                                <div class="img">
-                                    <img :src="error_image" class="w" />
-                                </div>
-                            </template>
-                        </el-image>
+                        <image-empty v-model="scope.row.icon" class="img"></image-empty>
                     </template>
                 </el-table-column>
+                <template #empty>
+                    <no-data></no-data>
+                </template>
             </el-table>
         </div>
     </div>
@@ -53,7 +50,6 @@ const modelValue = defineModel({ type: Object, default: {} });
 const table_data = ref<pageLinkList[]>([]);
 const new_table_data = ref<pageLinkList[]>([]);
 const search_value = ref('');
-const error_image = ref(new URL(`../../../assets/images/empty.png`, import.meta.url).href);
 onMounted(() => {
     init();
 });
diff --git a/src/components/common/url-value/link-goods-search.vue b/src/components/common/url-value/link-goods-search.vue
index eaca22d0..a7866d62 100644
--- a/src/components/common/url-value/link-goods-search.vue
+++ b/src/components/common/url-value/link-goods-search.vue
@@ -87,7 +87,7 @@ watch(
         init();
     }
 );
-const emit = defineEmits(['update:link', 'required', 'type']);
+const emit = defineEmits(['update:link', 'type']);
 
 onMounted(() => {
     init();
@@ -193,8 +193,6 @@ const on_submit = () => {
                 link: form.key,
             };
             emit('update:link', new_value, 2);
-        } else {
-            emit('required');
         }
     });
 };
diff --git a/src/components/common/url-value/link-goods.vue b/src/components/common/url-value/link-goods.vue
index 202bc044..e3405818 100644
--- a/src/components/common/url-value/link-goods.vue
+++ b/src/components/common/url-value/link-goods.vue
@@ -2,40 +2,46 @@
     <!-- 商品 -->
     <div class="container">
         <div class="flex-row jc-e gap-20 mb-20">
-            <el-select v-model="type" class="search-w" placeholder="请选择">
-                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-            <el-select v-model="brand" class="search-w" placeholder="品牌">
-                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+            <el-cascader v-model="category_ids" :options="category_list" :props="cascader_config" placeholder="请选择" :show-all-levels="false" clearable @change="cascader_change" />
+            <el-select v-model="brand_ids" class="search-w" placeholder="品牌" clearable @change="handle_search">
+                <el-option v-for="item in brand_list" :key="item.id" :label="item.name" :value="item.id" />
             </el-select>
             <el-input v-model="search_value" placeholder="请输入搜索内容" class="search-w" @change="handle_search">
                 <template #suffix>
-                    <icon name="search" size="16" color="9"></icon>
+                    <icon name="search" size="16" color="9" class="c-pointer" @click="handle_search"></icon>
                 </template>
             </el-input>
         </div>
         <div class="content">
             <el-table :data="tableData" class="w" :header-cell-style="{ background: '#f7f7f7' }" row-key="id" height="438" fixed @row-click="row_click">
-                <el-table-column label="#" width="120" type="">
+                <el-table-column label="#" width="40" type="">
                     <template #default="scope">
                         <el-radio v-model="template_selection" :label="scope.$index + ''">&nbsp;</el-radio>
                     </template>
                 </el-table-column>
-                <el-table-column prop="id" label="ID" width="180" type="" />
-                <el-table-column prop="icon" label="商品图片">
+                <el-table-column prop="id" label="ID" width="80" type="" />
+                <el-table-column prop="images" label="商品">
                     <template #default="scope">
-                        <el-image :src="scope.row.icon" class="img" />
+                        <div class="flex-row align-c gap-10">
+                            <image-empty v-model="scope.row.images" class="img"></image-empty>
+                            <div class="flex-1">{{ scope.row.title }}</div>
+                        </div>
                     </template>
                 </el-table-column>
-                <el-table-column prop="name" label="分类名称" />
+                <el-table-column prop="category_text" width="100" label="分类名称" />
+                <el-table-column prop="brand_name" width="100" label="品牌名称" />
+                <template #empty>
+                    <no-data></no-data>
+                </template>
             </el-table>
             <div class="mt-10 flex-row jc-e">
-                <el-pagination :current-page="page" :page-size="21" :pager-count="5" layout="prev, pager, next" :total="data_total" @current-change="get_list" />
+                <el-pagination :current-page="page" :page-size="page_size" :pager-count="5" layout="prev, pager, next" :total="data_total" @current-change="get_list" />
             </div>
         </div>
     </div>
 </template>
 <script lang="ts" setup>
+import UrlValueAPI from '@/api/url-value';
 import { urlValueStore, urlValue, pageLinkList } from '@/store';
 const url_value_store = urlValueStore();
 const props = defineProps({
@@ -57,47 +63,62 @@ onMounted(() => {
 const modelValue = defineModel({ type: Object, default: {} });
 const tableData = ref<pageLinkList[]>([]);
 const search_value = ref('');
+const cascader_config = {
+    value: 'id',
+    label: 'name',
+    children: 'items',
+};
 const init = () => {
     template_selection.value = '';
-    type.value = '';
-    brand.value = '';
-    get_list();
+    category_ids.value = [];
+    brand_ids.value = '';
+    search_value.value = '';
+    category_list.value = url_value_store.url_value.goods_category;
+    brand_list.value = url_value_store.url_value.brand_list;
+    get_list(1);
 };
 const handle_search = () => {
-    console.log(search_value.value);
+    get_list(1);
 };
-const type = ref('');
-const brand = ref('');
-const options = ref([
-    { value: '1', label: '一级分类' },
-    { value: '2', label: '二级分类' },
-    { value: '3', label: '三级分类' },
-]);
+const cascader_change = (val: any) => {
+    // 根据获取的val从data中获取label
+    category_ids.value = val ? val : [];
+    get_list(1);
+};
+const category_ids = ref([]);
+const brand_ids = ref('');
+const category_list = ref<pageLinkList[]>([]);
+const brand_list = ref<any[]>([]);
 const emit = defineEmits(['update:link']);
 const template_selection = ref('');
 
 const row_click = (row: any) => {
-    const new_table_data = JSON.parse(JSON.stringify(tableData));
-    template_selection.value = new_table_data.findIndex((item: linkData) => item.id == row.id).toString();
+    const new_table_data = JSON.parse(JSON.stringify(tableData.value));
+    template_selection.value = new_table_data.findIndex((item: pageLinkList) => item.id == row.id).toString();
     modelValue.value = row;
 };
 //#region 分页 -----------------------------------------------start
-// 总页数
-// const page_total = ref(0);
 // 当前页
 const page = ref(1);
+// 每页数量
+const page_size = ref(30);
 // 总数量
 const data_total = ref(0);
 
 // 查询文件
-const search_data = ref({
-    page: page.value,
-    type: '',
-    name: search_value.value,
-});
-// 查询文件
-const get_list = () => {
-    console.log('查询接口', search_data);
+const get_list = (new_page: number) => {
+    let new_data = {
+        page: new_page,
+        keywords: search_value.value,
+        brand_ids: brand_ids.value,
+        page_size: page_size.value,
+        category_ids: category_ids.value.length > 0 ? category_ids.value[category_ids.value.length - 1] : '',
+    };
+    UrlValueAPI.getGoodsList(new_data).then((res: any) => {
+        tableData.value = res.data.data_list;
+        data_total.value = res.data.data_total;
+        page.value = res.data.page;
+    });
 };
 //#region 分页 -----------------------------------------------end
 </script>
diff --git a/src/components/common/url-value/link-table.vue b/src/components/common/url-value/link-table.vue
index b1045a27..4fc1199f 100644
--- a/src/components/common/url-value/link-table.vue
+++ b/src/components/common/url-value/link-table.vue
@@ -4,7 +4,7 @@
         <div class="flex-row jc-e gap-20 mb-20">
             <el-input v-model="search_value" placeholder="请输入搜索内容" class="search-w" @change="handle_search">
                 <template #suffix>
-                    <icon name="search" size="16" color="9"></icon>
+                    <icon name="search" size="16" color="9" class="c-pointer" @click="handle_search"></icon>
                 </template>
             </el-input>
         </div>
@@ -18,15 +18,24 @@
                 <el-table-column prop="id" label="ID" width="180" type="" />
                 <el-table-column prop="name" label="页面名称" />
                 <el-table-column prop="link" label="页面链接" />
+                <template #empty>
+                    <no-data></no-data>
+                </template>
             </el-table>
             <div class="mt-10 flex-row jc-e">
-                <el-pagination :current-page="page" :page-size="21" :pager-count="5" layout="prev, pager, next" :total="data_total" @current-change="get_list" />
+                <el-pagination :current-page="page" :page-size="page_size" :pager-count="5" layout="prev, pager, next" :total="data_total" @current-change="get_list" />
             </div>
         </div>
     </div>
 </template>
 <script lang="ts" setup>
+import UrlValueAPI from '@/api/url-value';
+import { pageLinkList } from '@/store';
 const props = defineProps({
+    type: {
+        type: String,
+        default: () => '',
+    },
     // 重置
     reset: {
         type: Boolean,
@@ -36,61 +45,65 @@ const props = defineProps({
 watch(
     () => props.reset,
     () => {
-        template_selection.value = '';
+        init();
     }
 );
+onMounted(() => {
+    init();
+});
 const modelValue = defineModel({ type: Object, default: {} });
-const tableData: linkData[] = [
-    {
-        id: 1,
-        name: '一级分类',
-        link: 'a',
-    },
-    {
-        id: 3,
-        name: '一级分类',
-        link: 'c',
-    },
-    {
-        id: 4,
-        name: '一级分类',
-        link: 'd',
-    },
-    {
-        id: 5,
-        name: '一级分类',
-        link: 'e',
-    },
-];
+const tableData = ref<pageLinkList[]>([]);
 const search_value = ref('');
+
+const init = () => {
+    template_selection.value = '';
+    search_value.value = '';
+    get_list(1);
+};
 const handle_search = () => {
-    console.log(search_value.value);
+    get_list(1);
 };
 const emit = defineEmits(['update:link']);
 const template_selection = ref('');
 
 const row_click = (row: any) => {
-    const new_table_data = JSON.parse(JSON.stringify(tableData));
-    template_selection.value = new_table_data.findIndex((item: linkData) => item.id == row.id).toString();
+    const new_table_data = JSON.parse(JSON.stringify(tableData.value));
+    template_selection.value = new_table_data.findIndex((item: pageLinkList) => item.id == row.id).toString();
     modelValue.value = row;
 };
 //#region 分页 -----------------------------------------------start
-// 总页数
-// const page_total = ref(0);
 // 当前页
 const page = ref(1);
+// 每页数量
+const page_size = ref(30);
 // 总数量
 const data_total = ref(0);
-
 // 查询文件
-const search_data = ref({
-    page: page.value,
-    type: '',
-    name: search_value.value,
-});
-// 查询文件
-const get_list = () => {
-    console.log('查询接口', search_data);
+const get_list = (new_page: number) => {
+    const new_data = {
+        page: new_page,
+        page_size: page_size.value,
+        keywords: search_value.value,
+    };
+    if (props.type == 'diy') {
+        UrlValueAPI.getDiyList(new_data).then((res: any) => {
+            tableData.value = res.data.data_list;
+            data_total.value = res.data.data_total;
+            page.value = res.data.page;
+        });
+    } else if (props.type == 'design') {
+        UrlValueAPI.getDesignList(new_data).then((res: any) => {
+            tableData.value = res.data.data_list;
+            data_total.value = res.data.data_total;
+            page.value = res.data.page;
+        });
+    } else if (props.type == 'custom-view') {
+        UrlValueAPI.getCustomList(new_data).then((res: any) => {
+            tableData.value = res.data.data_list;
+            data_total.value = res.data.data_total;
+            page.value = res.data.page;
+        });
+    }
 };
 //#region 分页 -----------------------------------------------end
 </script>
diff --git a/src/components/common/url-value/url-value-dialog.vue b/src/components/common/url-value/url-value-dialog.vue
index 75ea13be..f7eabdbf 100644
--- a/src/components/common/url-value/url-value-dialog.vue
+++ b/src/components/common/url-value/url-value-dialog.vue
@@ -21,19 +21,19 @@
                     <link-goods-category v-model="link_value" :reset="reset_compontent"></link-goods-category>
                 </template>
                 <template v-else-if="link_select == 'goods-search'">
-                    <link-goods-search :reset="reset_compontent" :status="component_status" @update:link="goods_category_link" @type="goods_category_type_change" @required="required_tips"></link-goods-search>
+                    <link-goods-search :reset="reset_compontent" :status="component_status" @update:link="goods_category_link" @type="goods_category_type_change"></link-goods-search>
                 </template>
                 <template v-else-if="link_select == 'goods'">
                     <link-goods v-model="link_value" :reset="reset_compontent"></link-goods>
                 </template>
-                <template v-else-if="link_select == 'articles'">
+                <template v-else-if="link_select == 'article'">
                     <link-articles v-model="link_value" :reset="reset_compontent"></link-articles>
                 </template>
                 <template v-else-if="link_select == 'diy' || link_select == 'design' || link_select == 'custom-view'">
-                    <link-table v-model="link_value" :type="link_select" :reset="reset_compontent"></link-table>
+                    <link-table :key="link_select" v-model="link_value" :type="link_select" :reset="reset_compontent"></link-table>
                 </template>
-                <template v-else-if="link_select == 'custom'">
-                    <link-custom :key="link_select" :reset="reset_compontent" :status="component_status" @update:link="custom_link" @required="required_tips"></link-custom>
+                <template v-else-if="link_select == 'custom-url'">
+                    <link-custom :reset="reset_compontent" :status="component_status" @update:link="custom_link"></link-custom>
                 </template>
             </div>
         </div>
@@ -137,13 +137,6 @@ const custom_link = (data: object) => {
     modelValue.value = data;
     close_event();
 };
-// 错误回调
-const required_tips = () => {
-    ElMessage({
-        type: 'warning',
-        message: '必填项不能为空',
-    });
-};
 //#endregion 子组件回调 -----------------------------------------------end
 
 //#region 链接确认回调 -----------------------------------------------start
@@ -157,7 +150,7 @@ const close_event = () => {
 // 确认回调
 const confirm_event = () => {
     // 判断是否是自定义页面和商品查询
-    if (link_select.value == 'custom' || (link_select.value == 'goods-search' && goods_category_type.value == 2)) {
+    if (link_select.value == 'custom-url' || (link_select.value == 'goods-search' && goods_category_type.value == 2)) {
         component_status.value = !component_status.value;
     } else {
         if (is_obj_empty(link_value.value)) {
diff --git a/src/utils/index.ts b/src/utils/index.ts
index aeb961b1..10ea4a8b 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -12,6 +12,25 @@ import { isEmpty } from 'lodash';
 export function is_obj_empty(obj: object): boolean {
     return Object.keys(obj).length === 0;
 }
+/**
+ * 检查给定的参数是否为对象
+ *
+ * 此函数用于精确地验证一个变量是否为对象类型它通过以下步骤实现：
+ * 1. 特殊处理 `null` 值，因为 `null` 在 JavaScript 中被当作对象处理，但实质上它不是
+ * 2. 使用 `typeof` 操作符初步判断变量是否为对象
+ * 3. 使用 `Object.prototype.toString.call(obj)` 方法精确判断变量是否为普通的对象
+ *
+ * @param obj 未知类型的参数，待检查是否为对象
+ * @returns 如果参数是对象，则返回 true；否则返回 false
+ */
+export function is_obj(obj: unknown): boolean {
+    // 特殊处理 null值，因为 typeof null 返回 "object"，但 null 并不是我们要检查的对象
+    if (obj === null) return false;
+    // 使用 typeof 排除非对象类型
+    if (typeof obj !== 'object') return false;
+    // 确认是普通对象
+    return Object.prototype.toString.call(obj) === '[object Object]';
+}
 
 /**
  * 渐变色的方法

From c0b25894cbc85ba21f41478deca967a366da7928 Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Tue, 20 Aug 2024 16:28:51 +0800
Subject: [PATCH 3/4] =?UTF-8?q?1.=E9=93=BE=E6=8E=A5=E6=8E=A5=E5=8F=A3?=
 =?UTF-8?q?=E8=81=94=E8=B0=83=20sws=202024-08-20?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/url-value/index.vue     |  4 +--
 .../common/url-value/url-value-dialog.vue     | 13 ++++++++--
 .../model-article-tabs-content.vue            | 25 ++++++++++++-------
 .../components/main/default/article-tabs.ts   | 12 ++++-----
 4 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/src/components/common/url-value/index.vue b/src/components/common/url-value/index.vue
index 0e994acc..f1c36e98 100644
--- a/src/components/common/url-value/index.vue
+++ b/src/components/common/url-value/index.vue
@@ -1,4 +1,4 @@
-<!-- 上传组件 -->
+<!-- 链接组件 -->
 <template>
     <div class="flex-row align-c gap-10 br-d radius-sm plr-11 url-value-input" @click="dialogVisible = true">
         <div class="flex-1 flex-width size-12 text-line-1">
@@ -40,7 +40,7 @@ const props = defineProps({
     },
 });
 const modelValue = defineModel({ type: Object, default: {} });
-const dialogVisible = defineModel('visibleDialog', { type: Boolean, default: false });
+const dialogVisible = defineModel('dialogVisible', { type: Boolean, default: false });
 //#endregion 链接清空-------------------------------------------------start
 const clear_model_value = () => {
     modelValue.value = {};
diff --git a/src/components/common/url-value/url-value-dialog.vue b/src/components/common/url-value/url-value-dialog.vue
index f7eabdbf..0afe1cb8 100644
--- a/src/components/common/url-value/url-value-dialog.vue
+++ b/src/components/common/url-value/url-value-dialog.vue
@@ -93,8 +93,13 @@ const init = () => {
                 init_data.value = res.data;
                 base_data.value = res.data.page_link_list;
                 if (res.data.page_link_list.length > 0) {
-                    link_select.value = res.data.page_link_list[0].type;
+                    if (props.type.length == 0) {
+                        link_select.value = res.data.page_link_list[0].type;
+                    } else {
+                        link_select.value = props.type[0];
+                    }
                 }
+                console.log(link_select.value);
                 url_value_store.set_url_value(res.data);
             })
             .catch(() => {
@@ -104,7 +109,11 @@ const init = () => {
         init_data.value = url_value_store.url_value;
         base_data.value = url_value_store.url_value.page_link_list;
         if (url_value_store.url_value.page_link_list.length > 0) {
-            link_select.value = url_value_store.url_value.page_link_list[0].type || '';
+            if (props.type.length == 0) {
+                link_select.value = url_value_store.url_value.page_link_list[0].type || '';
+            } else {
+                link_select.value = props.type[0];
+            }
         }
     }
 };
diff --git a/src/components/model-article-tabs/model-article-tabs-content.vue b/src/components/model-article-tabs/model-article-tabs-content.vue
index 3e733317..fac6e54e 100644
--- a/src/components/model-article-tabs/model-article-tabs-content.vue
+++ b/src/components/model-article-tabs/model-article-tabs-content.vue
@@ -40,16 +40,14 @@
                                             <drag :data="row.article_list" :space-col="20" @remove="article_list_remove" @on-sort="article_list_sort">
                                                 <template #default="scoped">
                                                     <upload v-model="scoped.row.new_url" :limit="1" size="40" styles="2"></upload>
-                                                    <el-image :src="scoped.row.url" fit="contain" class="img">
+                                                    <el-image :src="scoped.row.link.cover" fit="contain" class="img">
                                                         <template #error>
                                                             <div class="bg-f5 flex-row jc-c align-c radius h w">
                                                                 <icon name="error-img" size="16" color="9"></icon>
                                                             </div>
                                                         </template>
                                                     </el-image>
-                                                    <div class="flex-1 flex-width">
-                                                        <url-value v-model="scoped.row.link"></url-value>
-                                                    </div>
+                                                    <div class="flex-1 flex-width text-line-2 size-12 self-s">{{ scoped.row.link.title }}</div>
                                                 </template>
                                             </drag>
                                             <el-button class="mtb-20 w" @click="article_add(index)">+添加</el-button>
@@ -62,7 +60,7 @@
                                             </el-select>
                                         </el-form-item>
                                         <el-form-item label="显示数量">
-                                            <el-input v-model="row.number" placeholder="请输入显示数量" clearable />
+                                            <el-input v-model="row.number" type="number" placeholder="请输入显示数量" clearable />
                                         </el-form-item>
                                         <el-form-item label="排序类型">
                                             <el-radio-group v-model="row.sort">
@@ -94,6 +92,7 @@
                 </el-form-item>
             </card-container>
         </el-form>
+        <url-value-dialog v-model:dialog-visible="urlValueDialogVisible" :is-url-oprate="false" :type="['article']" @update:model-value="url_value_dialog_call_back"></url-value-dialog>
     </div>
 </template>
 <script setup lang="ts">
@@ -141,6 +140,8 @@ const base_list = reactive({
         { name: '浏览量', value: '1' },
     ],
 });
+// 开启关闭链接
+const urlValueDialogVisible = ref(false);
 const active_index = ref(0);
 const tabs_list_click = (item: any, index: number) => {
     active_index.value = index;
@@ -158,7 +159,7 @@ const tabs_add = () => {
         id: get_math(),
         title: '',
         desc: '',
-        article_check: '1',
+        article_check: '0',
         article_type: [],
         number: 4,
         sort: '0',
@@ -176,13 +177,19 @@ const article_list_remove = (index: number) => {
 const article_list_sort = (item: any) => {
     // emit('update:value', item);
 };
+
+const article_index = ref(0);
 const article_add = (index: number) => {
-    console.log(index);
-    form.tabs_list[index].article_list.push({
+    urlValueDialogVisible.value = true;
+    article_index.value = index;
+};
+const url_value_dialog_call_back = (item: any) => {
+    console.log(item);
+    form.tabs_list[article_index.value].article_list.push({
         id: get_math(),
         src: 'carousel',
         new_url: [],
-        link: {},
+        link: item,
     });
 };
 </script>
diff --git a/src/layout/components/main/default/article-tabs.ts b/src/layout/components/main/default/article-tabs.ts
index 98e2218d..9c8316f1 100644
--- a/src/layout/components/main/default/article-tabs.ts
+++ b/src/layout/components/main/default/article-tabs.ts
@@ -58,12 +58,12 @@ const defaultArticleTabs: DefaultArticleTabs = {
         tabs_top_up: true,
         article_style: '0',
         tabs_list: [
-            { id: '1', title: '热门推荐', desc: '简介', article_check: '1', article_type: [], number: 4, sort: '0', sort_rules: '0', is_img_show: true, article_list: [] },
-            { id: '2', title: '测试一', desc: '简介', article_check: '1', article_type: [], number: 4, sort: '0', sort_rules: '0', is_img_show: true, article_list: [] },
-            { id: '3', title: '测试二', desc: '简介', article_check: '1', article_type: [], number: 4, sort: '0', sort_rules: '0', is_img_show: true, article_list: [] },
-            { id: '4', title: '测试三', desc: '简介', article_check: '1', article_type: [], number: 4, sort: '0', sort_rules: '0', is_img_show: true, article_list: [] },
-            { id: '5', title: '测试四', desc: '简介', article_check: '1', article_type: [], number: 4, sort: '0', sort_rules: '0', is_img_show: true, article_list: [] },
-            { id: '6', title: '测试五', desc: '简介', article_check: '1', article_type: [], number: 4, sort: '0', sort_rules: '0', is_img_show: true, article_list: [] },
+            { id: '1', title: '热门推荐', desc: '简介', article_check: '0', article_type: [], number: 4, sort: '0', sort_rules: '0', is_img_show: true, article_list: [] },
+            { id: '2', title: '测试一', desc: '简介', article_check: '0', article_type: [], number: 4, sort: '0', sort_rules: '0', is_img_show: true, article_list: [] },
+            { id: '3', title: '测试二', desc: '简介', article_check: '0', article_type: [], number: 4, sort: '0', sort_rules: '0', is_img_show: true, article_list: [] },
+            { id: '4', title: '测试三', desc: '简介', article_check: '0', article_type: [], number: 4, sort: '0', sort_rules: '0', is_img_show: true, article_list: [] },
+            { id: '5', title: '测试四', desc: '简介', article_check: '0', article_type: [], number: 4, sort: '0', sort_rules: '0', is_img_show: true, article_list: [] },
+            { id: '6', title: '测试五', desc: '简介', article_check: '0', article_type: [], number: 4, sort: '0', sort_rules: '0', is_img_show: true, article_list: [] },
         ],
         is_show: ['0', '1'],
     },

From 7c37edab3cedc2c8f96a3ac3534b08875e35d5d1 Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Tue, 20 Aug 2024 16:31:42 +0800
Subject: [PATCH 4/4] =?UTF-8?q?1.=E9=93=BE=E6=8E=A5=E6=8E=A5=E5=8F=A3?=
 =?UTF-8?q?=E8=81=94=E8=B0=83=20sws=202024-08-20?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../model-article-tabs/model-article-tabs-content.vue           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/model-article-tabs/model-article-tabs-content.vue b/src/components/model-article-tabs/model-article-tabs-content.vue
index fac6e54e..6471f774 100644
--- a/src/components/model-article-tabs/model-article-tabs-content.vue
+++ b/src/components/model-article-tabs/model-article-tabs-content.vue
@@ -92,7 +92,7 @@
                 </el-form-item>
             </card-container>
         </el-form>
-        <url-value-dialog v-model:dialog-visible="urlValueDialogVisible" :is-url-oprate="false" :type="['article']" @update:model-value="url_value_dialog_call_back"></url-value-dialog>
+        <url-value-dialog v-model:dialog-visible="urlValueDialogVisible" :type="['article']" @update:model-value="url_value_dialog_call_back"></url-value-dialog>
     </div>
 </template>
 <script setup lang="ts">