图标选择器优化，底部导航

admin/src/components/link/custom-link.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="custom-link mt-[60px]">
+    <div class="custom-link mt-[30px]">
         <div class="flex flex-wrap items-center">
             自定义链接
             <div class="ml-4 flex-1 min-w-[100px]">

admin/src/components/link/index.vue

@@ -2,7 +2,7 @@
     <div class="link flex">
         <el-menu
             :default-active="activeMenu"
-            class="w-[160px] min-h-[400px] link-menu"
+            class="w-[160px] min-h-[350px] link-menu"
             @select="handleSelect"
         >
             <el-menu-item v-for="(item, index) in menus" :index="item.type" :key="index">
@@ -10,8 +10,16 @@
             </el-menu-item>
         </el-menu>
         <div class="flex-1 pl-4">
-            <shop-pages v-model="activeLink" v-if="LinkTypeEnum.SHOP_PAGES == activeMenu" />
-            <custom-link v-model="activeLink" v-if="LinkTypeEnum.CUSTOM_LINK == activeMenu" />
+            <shop-pages
+                v-model="activeLink"
+                v-if="LinkTypeEnum.SHOP_PAGES == activeMenu"
+                @update:model-value="updateLink"
+            />
+            <custom-link
+                v-model="activeLink"
+                v-if="LinkTypeEnum.CUSTOM_LINK == activeMenu"
+                @update:model-value="updateLink"
+            />
         </div>
     </div>
 </template>
@@ -24,36 +32,60 @@ import CustomLink from './custom-link.vue'
 
 const props = defineProps({
     modelValue: {
-        type: Object as PropType<Link>
+        type: Object as PropType<Link>,
+        required: true
     }
 })
 const emit = defineEmits<{
     (event: 'update:modelValue', value: any): void
 }>()
 
-const activeLink = computed({
-    get() {
-        return props.modelValue
-    },
-    set(value) {
-        emit('update:modelValue', value)
-    }
-})
 const menus = ref([
     {
         name: '商城页面',
-        type: LinkTypeEnum.SHOP_PAGES
+        type: LinkTypeEnum.SHOP_PAGES,
+        link: {}
     },
     {
         name: '自定义链接',
-        type: LinkTypeEnum.CUSTOM_LINK
+        type: LinkTypeEnum.CUSTOM_LINK,
+        link: {}
     }
 ])
+
+const activeLink = computed({
+    get() {
+        return menus.value.find((item) => item.type == activeMenu.value)?.link as Link
+    },
+    set(value) {
+        menus.value.forEach((item) => {
+            if (item.type == activeMenu.value) {
+                item.link = value
+            }
+        })
+    }
+})
+
 const activeMenu = ref<string>(LinkTypeEnum.SHOP_PAGES)
 
 const handleSelect = (index: string) => {
     activeMenu.value = index
 }
+
+const updateLink = (value: any) => {
+    emit('update:modelValue', value)
+}
+
+watch(
+    () => props.modelValue,
+    (value) => {
+        activeMenu.value = value.type
+        activeLink.value = value
+    },
+    {
+        immediate: true
+    }
+)
 </script>
 
 <style lang="scss" scoped>

admin/src/components/link/picker.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script lang="ts" setup>
-import type { Link } from '.'
+import { LinkTypeEnum, type Link } from '.'
 import LinkContent from './index.vue'
 import Popup from '@/components/popup/index.vue'
 const props = defineProps({
@@ -31,14 +31,16 @@ const emit = defineEmits<{
 }>()
 
 const popupRef = shallowRef<InstanceType<typeof Popup>>()
-const activeLink = ref<Link>()
+const activeLink = ref<Link>({ path: '', type: LinkTypeEnum.SHOP_PAGES })
 const handleConfirm = () => {
     emit('update:modelValue', activeLink.value)
 }
 watch(
     () => props.modelValue,
     (value) => {
-        activeLink.value = value as Link
+        if (value?.type) {
+            activeLink.value = value as Link
+        }
     },
     {
         immediate: true

admin/src/components/link/shop-pages.vue

@@ -2,7 +2,7 @@
     <div class="shop-pages">
         <div class="link-list flex flex-wrap">
             <div
-                class="link-item border border-br px-5 py-[5px] rounded-[3px] cursor-pointer"
+                class="link-item border border-br px-5 py-[5px] rounded-[3px] cursor-pointer mr-[10px] mb-[10px]"
                 v-for="(item, index) in linkList"
                 :class="{ 'border-primary text-primary': modelValue.path == item.path }"
                 :key="index"
@@ -33,6 +33,16 @@ const linkList = ref([
         path: '/pages/index/index',
         name: '商城首页',
         type: LinkTypeEnum.SHOP_PAGES
+    },
+    {
+        path: '/pages/news/news',
+        name: '文章资讯',
+        type: LinkTypeEnum.SHOP_PAGES
+    },
+    {
+        path: '/pages/user/user',
+        name: '个人中心',
+        type: LinkTypeEnum.SHOP_PAGES
     }
 ])