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

admin/src/api/decoration.ts

@@ -2,7 +2,7 @@ import request from '@/utils/request'
 
 // 页面装修详情
 export function getDecoratePages(params: any) {
-    return request.get({ url: '/decorate/pages/detail', params })
+    return request.get({ url: '/decorate/pages/detail', params }, { ignoreCancelToken: true })
 }
 
 // 页面装修保存

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
     }
 ])
 

admin/src/views/decoration/tabbar.vue

@@ -6,9 +6,9 @@
                     <div class="tabbar flex">
                         <div
                             class="tabbar-item flex flex-col justify-center items-center flex-1"
-                            v-for="(item, index) in tabbar.data"
+                            v-for="(item, index) in tabbar.list"
                             :key="index"
-                            :style="{ color: tabbar.color }"
+                            :style="{ color: tabbar.style.defaultColor }"
                         >
                             <img class="w-[22px] h-[22px]" :src="item.unselected" alt="" />
                             <div class="leading-3 text-[12px] mt-[4px]">{{ item.name }}</div>
@@ -29,7 +29,7 @@
                             <el-tab-pane label="导航图片" name="content">
                                 <div class="mb-[18px]">
                                     <del-wrap
-                                        v-for="(item, index) in tabbar.data"
+                                        v-for="(item, index) in tabbar.list"
                                         :key="index"
                                         @close="handleDelete(index)"
                                         class="max-w-[400px]"
@@ -78,7 +78,7 @@
                                     </del-wrap>
                                 </div>
 
-                                <el-form-item v-if="tabbar.data?.length < max" label-width="0">
+                                <el-form-item v-if="tabbar.list?.length < max" label-width="0">
                                     <el-button type="primary" @click="handleAdd">
                                         添加导航
                                     </el-button>
@@ -86,10 +86,16 @@
                             </el-tab-pane>
                             <el-tab-pane label="样式设置" name="styles">
                                 <el-form-item label="默认颜色">
-                                    <color-picker class="max-w-[400px]" v-model="tabbar.color" />
+                                    <color-picker
+                                        class="max-w-[400px]"
+                                        v-model="tabbar.style.defaultColor"
+                                    />
                                 </el-form-item>
                                 <el-form-item label="选中颜色">
-                                    <color-picker class="max-w-[400px]" v-model="tabbar.color" />
+                                    <color-picker
+                                        class="max-w-[400px]"
+                                        v-model="tabbar.style.selectedColor"
+                                    />
                                 </el-form-item>
                             </el-tab-pane>
                         </el-tabs>
@@ -108,8 +114,11 @@ import feedback from '@/utils/feedback'
 const max = 5
 const min = 2
 const tabbar = reactive({
-    color: '',
-    data: [
+    style: {
+        defaultColor: '',
+        selectedColor: ''
+    },
+    list: [
         {
             name: '',
             selected: '',
@@ -120,8 +129,8 @@ const tabbar = reactive({
 })
 
 const handleAdd = () => {
-    if (tabbar.data?.length < max) {
-        tabbar.data.push({
+    if (tabbar.list?.length < max) {
+        tabbar.list.push({
             name: '',
             selected: '',
             unselected: '',
@@ -132,18 +141,19 @@ const handleAdd = () => {
     }
 }
 const handleDelete = (index: number) => {
-    if (tabbar.data?.length <= min) {
+    if (tabbar.list?.length <= min) {
         return feedback.msgError(`最少保留${min}个`)
     }
-    tabbar.data.splice(index, 1)
+    tabbar.list.splice(index, 1)
 }
 
 const getData = async () => {
     const data = await getDecorateTabbar()
-    // tabbar.value = data
+    tabbar.list = data.list
+    tabbar.style = data.style
 }
 const setData = async () => {
-    // await setDecorateTabbar(tabbar.value)
+    await setDecorateTabbar(toRaw(tabbar))
     getData()
     feedback.msgSuccess('保存成功')
 }