From 45a31db37fbc9a54e9d0801614d2295642341e45 Mon Sep 17 00:00:00 2001
From: Jason <5340635+wen-jason@user.noreply.gitee.com>
Date: Tue, 6 Sep 2022 11:51:36 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A3=85=E4=BF=AE=E7=9B=B8=E5=85=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/.eslintrc.cjs                           |  3 +-
 admin/src/api/decoration.ts                   | 11 +++
 admin/src/components/image-contain/index.vue  |  8 +-
 admin/src/components/link/custom-link.vue     | 39 ++++++++
 admin/src/components/link/index.ts            | 11 +++
 admin/src/components/link/index.vue           | 71 ++++++++++++++
 admin/src/components/link/picker.vue          | 53 ++++++++++
 admin/src/components/link/shop-pages.vue      | 42 ++++++++
 admin/src/components/material/picker.vue      | 11 ++-
 .../default/components/sidebar/menu.vue       |  7 +-
 admin/src/router/index.ts                     |  1 +
 admin/src/styles/var.css                      |  2 +-
 admin/src/views/article/lists/edit.vue        |  7 +-
 admin/src/views/channel/h5.vue                |  9 +-
 admin/src/views/channel/wx_dev.vue            | 11 +--
 .../component/pages/attr-setting.vue          | 26 +++++
 .../views/decoration/component/pages/menu.vue | 44 +++++++++
 .../decoration/component/pages/preview.vue    | 64 +++++++++++++
 .../component/widgets/banner/attr.vue         | 73 ++++++++++++++
 .../component/widgets/banner/content.vue      | 31 ++++++
 .../component/widgets/banner/options.ts       | 15 +++
 .../decoration/component/widgets/index.ts     | 15 +++
 .../decoration/component/widgets/nav/attr.vue | 77 +++++++++++++++
 .../component/widgets/nav/content.vue         | 35 +++++++
 .../component/widgets/nav/options.ts          | 15 +++
 .../component/widgets/search/attr.vue         | 20 ++++
 .../component/widgets/search/content.vue      | 23 +++++
 .../component/widgets/search/options.ts       |  7 ++
 admin/src/views/decoration/pages/index.vue    | 96 +++++++++++++++++++
 admin/src/views/message/short_letter/edit.vue | 13 ++-
 admin/tailwind.config.js                      |  1 +
 31 files changed, 820 insertions(+), 21 deletions(-)
 create mode 100644 admin/src/api/decoration.ts
 create mode 100644 admin/src/components/link/custom-link.vue
 create mode 100644 admin/src/components/link/index.ts
 create mode 100644 admin/src/components/link/index.vue
 create mode 100644 admin/src/components/link/picker.vue
 create mode 100644 admin/src/components/link/shop-pages.vue
 create mode 100644 admin/src/views/decoration/component/pages/attr-setting.vue
 create mode 100644 admin/src/views/decoration/component/pages/menu.vue
 create mode 100644 admin/src/views/decoration/component/pages/preview.vue
 create mode 100644 admin/src/views/decoration/component/widgets/banner/attr.vue
 create mode 100644 admin/src/views/decoration/component/widgets/banner/content.vue
 create mode 100644 admin/src/views/decoration/component/widgets/banner/options.ts
 create mode 100644 admin/src/views/decoration/component/widgets/index.ts
 create mode 100644 admin/src/views/decoration/component/widgets/nav/attr.vue
 create mode 100644 admin/src/views/decoration/component/widgets/nav/content.vue
 create mode 100644 admin/src/views/decoration/component/widgets/nav/options.ts
 create mode 100644 admin/src/views/decoration/component/widgets/search/attr.vue
 create mode 100644 admin/src/views/decoration/component/widgets/search/content.vue
 create mode 100644 admin/src/views/decoration/component/widgets/search/options.ts

diff --git a/admin/.eslintrc.cjs b/admin/.eslintrc.cjs
index 44a42f0b..fa81252d 100644
--- a/admin/.eslintrc.cjs
+++ b/admin/.eslintrc.cjs
@@ -34,7 +34,8 @@ module.exports = {
         'no-prototype-builtins': 'off',
         'prefer-spread': 'off',
         '@typescript-eslint/no-non-null-assertion': 'off',
-        '@typescript-eslint/no-non-null-asserted-optional-chain': 'off'
+        '@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
+        'vue/no-mutating-props': 'off'
     },
     globals: {
         module: 'readonly'
diff --git a/admin/src/api/decoration.ts b/admin/src/api/decoration.ts
new file mode 100644
index 00000000..62945e06
--- /dev/null
+++ b/admin/src/api/decoration.ts
@@ -0,0 +1,11 @@
+import request from '@/utils/request'
+
+// 页面装修详情
+export function getDecoratePages(params: any) {
+    return request.get({ url: '/decorate/pages/detail', params })
+}
+
+// 页面装修保存
+export function setDecoratePages(params: any) {
+    return request.post({ url: '/decorate/pages/save', params })
+}
diff --git a/admin/src/components/image-contain/index.vue b/admin/src/components/image-contain/index.vue
index fc42a46a..3625cce8 100644
--- a/admin/src/components/image-contain/index.vue
+++ b/admin/src/components/image-contain/index.vue
@@ -1,5 +1,11 @@
 <template>
-    <el-image :style="styles" v-bind="props"> </el-image>
+    <el-image :style="styles" v-bind="props">
+        <template v-slot:error>
+            <div class="text-tx-secondary flex items-center justify-center bg-white h-full">
+                <icon name="el-icon-Picture" :size="30" />
+            </div>
+        </template>
+    </el-image>
 </template>
 
 <script lang="ts" setup>
diff --git a/admin/src/components/link/custom-link.vue b/admin/src/components/link/custom-link.vue
new file mode 100644
index 00000000..6aff0e58
--- /dev/null
+++ b/admin/src/components/link/custom-link.vue
@@ -0,0 +1,39 @@
+<template>
+    <div class="custom-link mt-[60px]">
+        <div class="flex flex-wrap items-center">
+            自定义链接
+            <div class="ml-4 flex-1 min-w-[100px]">
+                <el-input
+                    :model-value="modelValue.path"
+                    placeholder="请输入链接地址"
+                    @input="handleInput"
+                />
+            </div>
+        </div>
+        <div class="form-tips">
+            请填写完整的带有“https://”或“http://”的链接地址，链接的域名必须在微信公众平台设置业务域名
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import { LinkTypeEnum, type Link } from '.'
+
+defineProps({
+    modelValue: {
+        type: Object as PropType<Link>,
+        default: () => ({})
+    }
+})
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: Link): void
+}>()
+
+const handleInput = (value: string) => {
+    emit('update:modelValue', {
+        path: value,
+        type: LinkTypeEnum.CUSTOM_LINK
+    })
+}
+</script>
diff --git a/admin/src/components/link/index.ts b/admin/src/components/link/index.ts
new file mode 100644
index 00000000..8e12a67a
--- /dev/null
+++ b/admin/src/components/link/index.ts
@@ -0,0 +1,11 @@
+export enum LinkTypeEnum {
+    'SHOP_PAGES' = 'shop',
+    'CUSTOM_LINK' = 'custom'
+}
+
+export interface Link {
+    path: string
+    name?: string
+    type: string
+    params?: Record<string, any>
+}
diff --git a/admin/src/components/link/index.vue b/admin/src/components/link/index.vue
new file mode 100644
index 00000000..700305d3
--- /dev/null
+++ b/admin/src/components/link/index.vue
@@ -0,0 +1,71 @@
+<template>
+    <div class="link flex">
+        <el-menu
+            :default-active="activeMenu"
+            class="w-[160px] min-h-[400px] link-menu"
+            @select="handleSelect"
+        >
+            <el-menu-item v-for="(item, index) in menus" :index="item.type" :key="index">
+                <span>{{ item.name }}</span>
+            </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" />
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import { LinkTypeEnum, type Link } from '.'
+import ShopPages from './shop-pages.vue'
+import CustomLink from './custom-link.vue'
+
+const props = defineProps({
+    modelValue: {
+        type: Object as PropType<Link>
+    }
+})
+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
+    },
+    {
+        name: '自定义链接',
+        type: LinkTypeEnum.CUSTOM_LINK
+    }
+])
+const activeMenu = ref<string>(LinkTypeEnum.SHOP_PAGES)
+
+const handleSelect = (index: string) => {
+    activeMenu.value = index
+}
+</script>
+
+<style lang="scss" scoped>
+.link-menu {
+    --el-menu-item-height: 40px;
+    :deep(.el-menu-item) {
+        border-color: transparent;
+        &.is-active {
+            border-right-width: 2px;
+            border-color: var(--el-color-primary);
+            background-color: var(--el-color-primary-light-9);
+        }
+    }
+}
+</style>
diff --git a/admin/src/components/link/picker.vue b/admin/src/components/link/picker.vue
new file mode 100644
index 00000000..b65a8a5c
--- /dev/null
+++ b/admin/src/components/link/picker.vue
@@ -0,0 +1,53 @@
+<template>
+    <div class="link-picker">
+        <popup width="700px" title="链接选择" @confirm="handleConfirm">
+            <template v-slot:trigger>
+                <div class="cursor-pointer">
+                    <slot>
+                        <el-input
+                            :model-value="modelValue?.name ?? modelValue?.path"
+                            placeholder="请选择链接"
+                            readonly
+                        >
+                            <template #suffix>
+                                <icon v-if="!modelValue?.path" name="el-icon-ArrowRight" />
+                                <icon
+                                    v-else
+                                    name="el-icon-Close"
+                                    @click.stop="emit('update:modelValue', {})"
+                                />
+                            </template>
+                        </el-input>
+                    </slot>
+                </div>
+            </template>
+            <link-content v-model="activeLink" />
+        </popup>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import type { Link } from '.'
+import LinkContent from './index.vue'
+const props = defineProps({
+    modelValue: {
+        type: Object
+    }
+})
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: any): void
+}>()
+const activeLink = ref<Link>()
+const handleConfirm = () => {
+    emit('update:modelValue', activeLink.value)
+}
+watch(
+    () => props.modelValue,
+    (value) => {
+        activeLink.value = value as Link
+    },
+    {
+        immediate: true
+    }
+)
+</script>
diff --git a/admin/src/components/link/shop-pages.vue b/admin/src/components/link/shop-pages.vue
new file mode 100644
index 00000000..4012dfbb
--- /dev/null
+++ b/admin/src/components/link/shop-pages.vue
@@ -0,0 +1,42 @@
+<template>
+    <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"
+                v-for="(item, index) in linkList"
+                :class="{ 'border-primary text-primary': modelValue.path == item.path }"
+                :key="index"
+                @click="handleSelect(item)"
+            >
+                {{ item.name }}
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import { LinkTypeEnum, type Link } from '.'
+
+defineProps({
+    modelValue: {
+        type: Object as PropType<Link>,
+        default: () => ({})
+    }
+})
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: Link): void
+}>()
+
+const linkList = ref([
+    {
+        path: '/pages/index/index',
+        name: '商城首页',
+        type: LinkTypeEnum.SHOP_PAGES
+    }
+])
+
+const handleSelect = (value: Link) => {
+    emit('update:modelValue', value)
+}
+</script>
diff --git a/admin/src/components/material/picker.vue b/admin/src/components/material/picker.vue
index 0f6f6162..6fd96e1f 100644
--- a/admin/src/components/material/picker.vue
+++ b/admin/src/components/material/picker.vue
@@ -41,7 +41,8 @@
                         v-show="showUpload"
                         :class="{
                             'is-disabled': disabled,
-                            'is-one': limit == 1
+                            'is-one': limit == 1,
+                            [uploadClass]: true
                         }"
                     >
                         <slot name="upload">
@@ -123,6 +124,10 @@ export default defineComponent({
         hiddenUpload: {
             type: Boolean,
             default: false
+        },
+        uploadClass: {
+            type: String,
+            default: ''
         }
     },
 
@@ -269,8 +274,8 @@ export default defineComponent({
         }
     }
     .material-upload {
-        .upload-btn {
-            @apply box-border rounded border-br border-dashed border flex flex-col justify-center items-center;
+        :deep(.upload-btn) {
+            @apply text-tx-secondary box-border rounded border-br border-dashed border flex flex-col justify-center items-center;
         }
     }
 }
diff --git a/admin/src/layout/default/components/sidebar/menu.vue b/admin/src/layout/default/components/sidebar/menu.vue
index 67c38922..a94dcc03 100644
--- a/admin/src/layout/default/components/sidebar/menu.vue
+++ b/admin/src/layout/default/components/sidebar/menu.vue
@@ -1,5 +1,9 @@
 <template>
-    <div class="menu flex-1 min-h-0" :class="themeClass" :style="`--aside-width: ${width}px`">
+    <div
+        class="menu flex-1 min-h-0"
+        :class="themeClass"
+        :style="isCollapsed ? '' : `--aside-width: ${width}px`"
+    >
         <el-scrollbar>
             <el-menu
                 v-bind="config"
@@ -48,7 +52,6 @@ const props = defineProps({
 defineEmits(['select'])
 
 const route = useRoute()
-console.log(route)
 const activeMenu = computed<string>(() => route.meta?.activeMenu || route.path)
 const themeClass = computed(() => `theme-${props.theme}`)
 </script>
diff --git a/admin/src/router/index.ts b/admin/src/router/index.ts
index 8227b944..69d3be48 100644
--- a/admin/src/router/index.ts
+++ b/admin/src/router/index.ts
@@ -86,6 +86,7 @@ export function findFirstValidRoute(routes: RouteRecordRaw[]): string | undefine
 }
 
 export function getRoutePath(perms: string) {
+    console.log(router.getRoutes().find((item) => item.meta?.perms == perms)?.path)
     return router.getRoutes().find((item) => item.meta?.perms == perms)?.path || ''
 }
 
diff --git a/admin/src/styles/var.css b/admin/src/styles/var.css
index dd4930af..e3e9e098 100644
--- a/admin/src/styles/var.css
+++ b/admin/src/styles/var.css
@@ -32,7 +32,7 @@
     --el-border-color-dark: #d4d7de;
     --el-border-color-darker: #cdd0d6;
     --el-fill-color: #f0f2f5;
-    --el-fill-color-light: #f5f7fa;
+    --el-fill-color-light: #f8f8f8;
     --el-fill-color-lighter: #fafafa;
     --el-fill-color-extra-light: #fafcff;
     --el-fill-color-dark: #ebedf0;
diff --git a/admin/src/views/article/lists/edit.vue b/admin/src/views/article/lists/edit.vue
index e1259a88..7158bb35 100644
--- a/admin/src/views/article/lists/edit.vue
+++ b/admin/src/views/article/lists/edit.vue
@@ -33,9 +33,9 @@
                                 <el-input v-model="formData.intro" placeholder="请输入文章简介" />
                             </div>
                         </el-form-item>
-                        <el-form-item label="摘要" prop="intro">
+                        <el-form-item label="摘要" prop="summary">
                             <div class="w-80">
-                                <el-input type="textarea" :rows="6" v-model="formData.intro" />
+                                <el-input type="textarea" :rows="6" v-model="formData.summary" />
                             </div>
                         </el-form-item>
                         <el-form-item label="文章封面" prop="image">
@@ -101,7 +101,8 @@ const formData = reactive({
     content: '',
     visit: 0,
     sort: 0,
-    isShow: ''
+    isShow: '',
+    summary: ''
 })
 
 const formRef = shallowRef<FormInstance>()
diff --git a/admin/src/views/channel/h5.vue b/admin/src/views/channel/h5.vue
index 841c98aa..a98d45f5 100644
--- a/admin/src/views/channel/h5.vue
+++ b/admin/src/views/channel/h5.vue
@@ -26,8 +26,8 @@
                     </div>
                 </el-form-item>
                 <el-form-item label="访问链接">
-                    <div>https://b2cplus.likeshop.cn/mobile</div>
-                    <el-button class="ml-4">复制</el-button>
+                    <div>{{ formData.accessLink }}</div>
+                    <el-button class="ml-4" @click="copy(formData.accessLink)">复制</el-button>
                 </el-form-item>
             </el-form>
         </el-card>
@@ -39,13 +39,16 @@
 <script lang="ts" setup>
 import { getH5Config, setH5Config } from '@/api/channel/h5'
 import feedback from '@/utils/feedback'
+import { useClipboard } from '@vueuse/core'
 
 const formData = reactive({
     status: 0,
     close: 0,
-    url: ''
+    url: '',
+    accessLink: ''
 })
 
+const { copy } = useClipboard()
 const getDetail = async () => {
     const data = await getH5Config()
     for (const key in formData) {
diff --git a/admin/src/views/channel/wx_dev.vue b/admin/src/views/channel/wx_dev.vue
index 88ae3264..f6b934a8 100644
--- a/admin/src/views/channel/wx_dev.vue
+++ b/admin/src/views/channel/wx_dev.vue
@@ -36,17 +36,16 @@
     </div>
 </template>
 <script lang="ts" setup>
-import { getH5Config, setH5Config } from '@/api/channel/h5'
+import { getWxDevConfig, setWxDevConfig } from '@/api/channel/wx_dev'
 import feedback from '@/utils/feedback'
 
 const formData = reactive({
-    status: 0,
-    close: 0,
-    url: ''
+    appId: '',
+    appSecret: ''
 })
 
 const getDetail = async () => {
-    const data = await getH5Config()
+    const data = await getWxDevConfig()
     for (const key in formData) {
         //@ts-ignore
         formData[key] = data[key]
@@ -54,7 +53,7 @@ const getDetail = async () => {
 }
 
 const handelSave = async () => {
-    await setH5Config(formData)
+    await setWxDevConfig(formData)
     getDetail()
     feedback.msgSuccess('操作成功')
 }
diff --git a/admin/src/views/decoration/component/pages/attr-setting.vue b/admin/src/views/decoration/component/pages/attr-setting.vue
new file mode 100644
index 00000000..c4269335
--- /dev/null
+++ b/admin/src/views/decoration/component/pages/attr-setting.vue
@@ -0,0 +1,26 @@
+<template>
+    <div class="pages-setting">
+        <div
+            class="title flex items-center before:w-[3px] before:h-[14px] before:block before:bg-primary before:mr-2"
+        >
+            {{ widget?.title }}
+        </div>
+        <component
+            class="pt-5 pr-4"
+            :is="widgets[widget?.name]?.attr"
+            :content="widget?.content"
+            :styles="widget?.styles"
+        />
+    </div>
+</template>
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import widgets from '../widgets'
+
+const props = defineProps({
+    widget: {
+        type: Object as PropType<Record<string, any>>,
+        default: () => ({})
+    }
+})
+</script>
diff --git a/admin/src/views/decoration/component/pages/menu.vue b/admin/src/views/decoration/component/pages/menu.vue
new file mode 100644
index 00000000..1027e41b
--- /dev/null
+++ b/admin/src/views/decoration/component/pages/menu.vue
@@ -0,0 +1,44 @@
+<template>
+    <el-menu
+        :default-active="modelValue"
+        class="w-[160px] min-h-[668px] pages-menu"
+        @select="handleSelect"
+    >
+        <el-menu-item v-for="(item, key) in menus" :index="key" :key="item.id">
+            <span>{{ item.name }}</span>
+        </el-menu-item>
+    </el-menu>
+</template>
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+
+defineProps({
+    menus: {
+        type: Object as PropType<Record<string, any>>,
+        default: () => ({})
+    },
+    modelValue: {
+        type: String,
+        default: '1'
+    }
+})
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: string): void
+}>()
+const handleSelect = (index: string) => {
+    emit('update:modelValue', index)
+}
+</script>
+
+<style lang="scss" scoped>
+.pages-menu {
+    :deep(.el-menu-item) {
+        border-color: transparent;
+        &.is-active {
+            border-right-width: 2px;
+            border-color: var(--el-color-primary);
+            background-color: var(--el-color-primary-light-9);
+        }
+    }
+}
+</style>
diff --git a/admin/src/views/decoration/component/pages/preview.vue b/admin/src/views/decoration/component/pages/preview.vue
new file mode 100644
index 00000000..56c51caf
--- /dev/null
+++ b/admin/src/views/decoration/component/pages/preview.vue
@@ -0,0 +1,64 @@
+<template>
+    <el-scrollbar class="shadow mx-[30px] pages-preview">
+        <div>
+            <div
+                v-for="(widget, index) in pageData"
+                :key="widget"
+                class="relative"
+                :class="{
+                    'cursor-pointer': !widget?.disabled
+                }"
+                @click="handleClick(widget, index)"
+            >
+                <div
+                    class="absolute w-full h-full z-[100] border-dashed"
+                    :class="{
+                        select: index == modelValue,
+                        'border-br border-2': !widget?.disabled
+                    }"
+                ></div>
+                <component
+                    :is="widgets[widget?.name]?.content"
+                    :content="widget.content"
+                    :styles="widget.styles"
+                />
+            </div>
+        </div>
+    </el-scrollbar>
+</template>
+<script lang="ts" setup>
+import widgets from '../widgets'
+import type { PropType } from 'vue'
+
+defineProps({
+    pageData: {
+        type: Array as PropType<any[]>,
+        default: () => []
+    },
+    modelValue: {
+        type: Number,
+        default: 0
+    }
+})
+
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: number): void
+}>()
+
+const handleClick = (widget: any, index: number) => {
+    if (widget.disabled) return
+    emit('update:modelValue', index)
+}
+</script>
+
+<style lang="scss" scoped>
+.pages-preview {
+    background-color: #f8f8f8;
+    width: 360px;
+    max-height: 734px;
+    height: 100%;
+    .select {
+        @apply border-primary border-solid;
+    }
+}
+</style>
diff --git a/admin/src/views/decoration/component/widgets/banner/attr.vue b/admin/src/views/decoration/component/widgets/banner/attr.vue
new file mode 100644
index 00000000..767f6ed0
--- /dev/null
+++ b/admin/src/views/decoration/component/widgets/banner/attr.vue
@@ -0,0 +1,73 @@
+<template>
+    <div>
+        <el-form label-width="70px">
+            <el-form-item label="是否启用">
+                <el-radio-group v-model="content.enabled">
+                    <el-radio :label="1">开启</el-radio>
+                    <el-radio :label="0">停用</el-radio>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item label="图片设置">
+                <div class="flex-1">
+                    <del-wrap
+                        v-for="(item, index) in content.data"
+                        :key="index"
+                        @close="handleDelete(index)"
+                    >
+                        <div class="bg-fill-light flex items-center w-full p-4 mb-4">
+                            <material-picker v-model="item.image" upload-class="bg-body" />
+                            <div>
+                                <el-form-item label="图片名称">
+                                    <el-input v-model="item.name" placeholder="请输入名称" />
+                                </el-form-item>
+                                <el-form-item class="mt-[18px]" label="图片链接">
+                                    <link-picker v-model="item.link" />
+                                </el-form-item>
+                            </div>
+                        </div>
+                    </del-wrap>
+                </div>
+            </el-form-item>
+            <el-form-item v-if="content.data?.length < limit">
+                <el-button type="primary" @click="handleAdd">添加图片</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+<script lang="ts" setup>
+import feedback from '@/utils/feedback'
+import type { PropType } from 'vue'
+import type options from './options'
+const limit = 10
+type OptionsType = ReturnType<typeof options>
+const props = defineProps({
+    content: {
+        type: Object as PropType<OptionsType['content']>,
+        default: () => ({})
+    },
+    styles: {
+        type: Object as PropType<OptionsType['styles']>,
+        default: () => ({})
+    }
+})
+
+const handleAdd = () => {
+    if (props.content.data?.length < limit) {
+        props.content.data.push({
+            image: '',
+            name: '',
+            link: {}
+        })
+    } else {
+        feedback.msgError(`最多添加${limit}张图片`)
+    }
+}
+const handleDelete = (index: number) => {
+    if (props.content.data?.length <= 1) {
+        return feedback.msgError('最少保留一张图片')
+    }
+    props.content.data.splice(index, 1)
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/admin/src/views/decoration/component/widgets/banner/content.vue b/admin/src/views/decoration/component/widgets/banner/content.vue
new file mode 100644
index 00000000..16126863
--- /dev/null
+++ b/admin/src/views/decoration/component/widgets/banner/content.vue
@@ -0,0 +1,31 @@
+<template>
+    <div class="banner">
+        <div class="banner-image">
+            <image-contain width="100%" height="170px" :src="getImage" fit="contain" />
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import type options from './options'
+type OptionsType = ReturnType<typeof options>
+const props = defineProps({
+    content: {
+        type: Object as PropType<OptionsType['content']>,
+        default: () => ({})
+    },
+    styles: {
+        type: Object as PropType<OptionsType['styles']>,
+        default: () => ({})
+    }
+})
+const getImage = computed(() => {
+    const { data } = props.content
+    if (Array.isArray(data)) {
+        return data[0] ? data[0].image : ''
+    }
+    return ''
+})
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/admin/src/views/decoration/component/widgets/banner/options.ts b/admin/src/views/decoration/component/widgets/banner/options.ts
new file mode 100644
index 00000000..e33d9211
--- /dev/null
+++ b/admin/src/views/decoration/component/widgets/banner/options.ts
@@ -0,0 +1,15 @@
+export default () => ({
+    title: '首页轮播图',
+    name: 'banner',
+    content: {
+        enabled: 1,
+        data: [
+            {
+                image: '',
+                name: '',
+                link: {}
+            }
+        ]
+    },
+    styles: {}
+})
diff --git a/admin/src/views/decoration/component/widgets/index.ts b/admin/src/views/decoration/component/widgets/index.ts
new file mode 100644
index 00000000..e9043761
--- /dev/null
+++ b/admin/src/views/decoration/component/widgets/index.ts
@@ -0,0 +1,15 @@
+const widgets: Record<string, any> = import.meta.glob('./**/*', { eager: true })
+interface Widget {
+    attr: any
+    content: any
+    options: any
+}
+const exportWidgets: Record<string, Widget> = {}
+Object.keys(widgets).forEach((key) => {
+    const widgetName = key.replace(/^\.\/([\w-]+).*/gi, '$1')
+    const widgetContent = key.replace(/(.*\/)*([^.]+).*/gi, '$2') as keyof Widget
+    exportWidgets[widgetName] = exportWidgets[widgetName] ?? {}
+    exportWidgets[widgetName][widgetContent] = widgets[key]?.default
+})
+
+export default exportWidgets
diff --git a/admin/src/views/decoration/component/widgets/nav/attr.vue b/admin/src/views/decoration/component/widgets/nav/attr.vue
new file mode 100644
index 00000000..f7b0cb3f
--- /dev/null
+++ b/admin/src/views/decoration/component/widgets/nav/attr.vue
@@ -0,0 +1,77 @@
+<template>
+    <div>
+        <el-form label-width="70px">
+            <el-form-item label="是否启用">
+                <el-radio-group v-model="content.enabled">
+                    <el-radio :label="1">开启</el-radio>
+                    <el-radio :label="0">停用</el-radio>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item label="菜单图片">
+                <div class="flex-1">
+                    <div class="form-tips">最多可添加10个，建议图片尺寸：100px*100px</div>
+                    <del-wrap
+                        v-for="(item, index) in content.data"
+                        :key="index"
+                        @close="handleDelete(index)"
+                    >
+                        <div class="bg-fill-light flex items-center w-full p-4 mt-4">
+                            <material-picker v-model="item.image" upload-class="bg-body">
+                                <template #upload>
+                                    <div class="upload-btn w-[60px] h-[60px]">
+                                        <icon name="el-icon-Plus" :size="20" />
+                                    </div>
+                                </template>
+                            </material-picker>
+                            <div>
+                                <el-form-item label="图片名称">
+                                    <el-input v-model="item.name" placeholder="请输入名称" />
+                                </el-form-item>
+                                <el-form-item class="mt-[18px]" label="图片链接">
+                                    <link-picker v-model="item.link" />
+                                </el-form-item>
+                            </div>
+                        </div>
+                    </del-wrap>
+                </div>
+            </el-form-item>
+            <el-form-item v-if="content.data?.length < limit">
+                <el-button type="primary" @click="handleAdd">添加菜单</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+<script lang="ts" setup>
+import feedback from '@/utils/feedback'
+import type { PropType } from 'vue'
+import type options from './options'
+type OptionsType = ReturnType<typeof options>
+const limit = 10
+const props = defineProps({
+    content: {
+        type: Object as PropType<OptionsType['content']>,
+        default: () => ({})
+    },
+    styles: {
+        type: Object as PropType<OptionsType['styles']>,
+        default: () => ({})
+    }
+})
+
+const handleAdd = () => {
+    if (props.content.data?.length < limit) {
+        props.content.data.push({
+            image: '',
+            name: '导航',
+            link: {}
+        })
+    } else {
+        feedback.msgError(`最多添加${limit}个`)
+    }
+}
+const handleDelete = (index: number) => {
+    props.content.data.splice(index, 1)
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/admin/src/views/decoration/component/widgets/nav/content.vue b/admin/src/views/decoration/component/widgets/nav/content.vue
new file mode 100644
index 00000000..a9abc8ac
--- /dev/null
+++ b/admin/src/views/decoration/component/widgets/nav/content.vue
@@ -0,0 +1,35 @@
+<template>
+    <div class="nav pt-[15px] pb-[8px]">
+        <div class="flex flex-wrap">
+            <div
+                v-for="(item, index) in content.data"
+                :key="index"
+                class="flex flex-col items-center w-1/5 mb-[15px]"
+            >
+                <image-contain width="41px" height="41px" :src="item.image" alt="" />
+                <div class="mt-[7px]">{{ item.name }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import type options from './options'
+type OptionsType = ReturnType<typeof options>
+const props = defineProps({
+    content: {
+        type: Object as PropType<OptionsType['content']>,
+        default: () => ({})
+    },
+    styles: {
+        type: Object as PropType<OptionsType['styles']>,
+        default: () => ({})
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.nav {
+    background-color: #fff;
+}
+</style>
diff --git a/admin/src/views/decoration/component/widgets/nav/options.ts b/admin/src/views/decoration/component/widgets/nav/options.ts
new file mode 100644
index 00000000..3e626feb
--- /dev/null
+++ b/admin/src/views/decoration/component/widgets/nav/options.ts
@@ -0,0 +1,15 @@
+export default () => ({
+    title: '导航菜单',
+    name: 'nav',
+    content: {
+        enabled: 1,
+        data: [
+            {
+                image: '',
+                name: '导航',
+                link: {}
+            }
+        ]
+    },
+    styles: {}
+})
diff --git a/admin/src/views/decoration/component/widgets/search/attr.vue b/admin/src/views/decoration/component/widgets/search/attr.vue
new file mode 100644
index 00000000..93f92786
--- /dev/null
+++ b/admin/src/views/decoration/component/widgets/search/attr.vue
@@ -0,0 +1,20 @@
+<template>
+    <div></div>
+</template>
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import type options from './options'
+type OptionsType = ReturnType<typeof options>
+const props = defineProps({
+    content: {
+        type: Object as PropType<OptionsType['content']>,
+        default: () => ({})
+    },
+    styles: {
+        type: Object as PropType<OptionsType['styles']>,
+        default: () => ({})
+    }
+})
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/admin/src/views/decoration/component/widgets/search/content.vue b/admin/src/views/decoration/component/widgets/search/content.vue
new file mode 100644
index 00000000..db2a07a5
--- /dev/null
+++ b/admin/src/views/decoration/component/widgets/search/content.vue
@@ -0,0 +1,23 @@
+<template>
+    <div class="search">
+        <div class="search-con flex items-center px-[15px]">
+            <icon name="el-icon-Search" :size="17" />
+            <span class="ml-[5px]">请输入关键词搜索</span>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped>
+.search {
+    background-color: #fff;
+    padding: 7px 12px;
+    .search-con {
+        height: 100%;
+        height: 36px;
+        border-radius: 36px;
+        background: #f4f4f4;
+        color: #999999;
+    }
+}
+</style>
diff --git a/admin/src/views/decoration/component/widgets/search/options.ts b/admin/src/views/decoration/component/widgets/search/options.ts
new file mode 100644
index 00000000..5930b440
--- /dev/null
+++ b/admin/src/views/decoration/component/widgets/search/options.ts
@@ -0,0 +1,7 @@
+export default () => ({
+    title: '搜索',
+    name: 'search',
+    disabled: true,
+    content: {},
+    styles: {}
+})
diff --git a/admin/src/views/decoration/pages/index.vue b/admin/src/views/decoration/pages/index.vue
index e69de29b..d632c5e3 100644
--- a/admin/src/views/decoration/pages/index.vue
+++ b/admin/src/views/decoration/pages/index.vue
@@ -0,0 +1,96 @@
+<template>
+    <div class="decoration-pages">
+        <el-card shadow="never" class="!border-none flex-1" :body-style="{ height: '100%' }">
+            <div class="flex h-full items-start">
+                <el-scrollbar>
+                    <Menu v-model="activeMenu" :menus="menus" />
+                </el-scrollbar>
+                <preview v-model="selectWidgetIndex" :pageData="getPageData" />
+                <el-scrollbar class="flex-1">
+                    <attr-setting :widget="getSelectWidget" />
+                </el-scrollbar>
+            </div>
+        </el-card>
+        <footer-btns>
+            <el-button type="primary" @click="setData">保存</el-button>
+        </footer-btns>
+    </div>
+</template>
+<script lang="ts" setup>
+import Menu from '../component/pages/menu.vue'
+import Preview from '../component/pages/preview.vue'
+import AttrSetting from '../component/pages/attr-setting.vue'
+import widgets from '../component/widgets'
+import { getDecoratePages, setDecoratePages } from '@/api/decoration'
+import feedback from '@/utils/feedback'
+enum pagesTypeEnum {
+    HOME = '1',
+    USER = '2',
+    SERVICE = '3'
+}
+
+const generatePageData = (widgetNames: string[]) => {
+    return widgetNames.map((widgetName) => widgets[widgetName]?.options() || {})
+}
+
+const menus: Record<
+    string,
+    {
+        id: number
+        name: string
+        pageData: any[]
+    }
+> = reactive({
+    [pagesTypeEnum.HOME]: {
+        id: 1,
+        pageType: 1,
+        name: '商城首页',
+        pageData: generatePageData(['search', 'banner', 'nav'])
+    },
+    [pagesTypeEnum.USER]: {
+        id: 2,
+        pageType: 2,
+        name: '个人中心',
+        pageData: generatePageData(['banner'])
+    },
+    [pagesTypeEnum.SERVICE]: {
+        id: 3,
+        pageType: 3,
+        name: '客服设置',
+        pageData: generatePageData(['banner'])
+    }
+})
+
+const activeMenu = ref('1')
+const selectWidgetIndex = ref(-1)
+const getPageData = computed(() => {
+    return menus[activeMenu.value]?.pageData ?? []
+})
+const getSelectWidget = computed(() => {
+    return menus[activeMenu.value]?.pageData[selectWidgetIndex.value] ?? ''
+})
+
+const getData = async () => {
+    const data = await getDecoratePages({ id: activeMenu.value })
+}
+const setData = async () => {
+    await setDecoratePages(menus[activeMenu.value])
+    feedback.msg('保存成功')
+}
+watch(
+    activeMenu,
+    () => {
+        selectWidgetIndex.value = getPageData.value.findIndex((item) => !item.disabled)
+    },
+    {
+        immediate: true
+    }
+)
+getData()
+</script>
+<style lang="scss" scoped>
+.decoration-pages {
+    height: calc(100vh - var(--navbar-height) - 80px);
+    @apply flex flex-col;
+}
+</style>
diff --git a/admin/src/views/message/short_letter/edit.vue b/admin/src/views/message/short_letter/edit.vue
index 55dfa86c..c919d04e 100644
--- a/admin/src/views/message/short_letter/edit.vue
+++ b/admin/src/views/message/short_letter/edit.vue
@@ -18,9 +18,12 @@
                 <el-form-item label="短信签名" prop="sign">
                     <el-input v-model="formData.sign" placeholder="请输入短信签名" />
                 </el-form-item>
-                <el-form-item label="APP_KEY" prop="appKey">
+                <el-form-item label="APP_KEY" prop="appKey" v-if="formData.alias == 'aliyun'">
                     <el-input v-model="formData.appKey" placeholder="请输入APP_KEY" />
                 </el-form-item>
+                <el-form-item label="APP_ID" prop="appId" v-if="formData.alias == 'tencent'">
+                    <el-input v-model="formData.appId" placeholder="请输入APP_ID" />
+                </el-form-item>
                 <el-form-item label="SECRET_ID" prop="secretId" v-if="formData.alias == 'tencent'">
                     <el-input v-model="formData.secretId" placeholder="请输入SECRET_ID" />
                 </el-form-item>
@@ -50,6 +53,7 @@ const formData = reactive({
     alias: '',
     sign: '',
     appKey: '',
+    appId: '',
     secretKey: '',
     secretId: '',
     status: 0
@@ -63,6 +67,13 @@ const formRules = {
             trigger: 'blur'
         }
     ],
+    appId: [
+        {
+            required: true,
+            message: '请输入APP_ID',
+            trigger: 'blur'
+        }
+    ],
     appKey: [
         {
             required: true,
diff --git a/admin/tailwind.config.js b/admin/tailwind.config.js
index 36d70a3f..2d5b753f 100644
--- a/admin/tailwind.config.js
+++ b/admin/tailwind.config.js
@@ -30,6 +30,7 @@ module.exports = {
             'br-extra-light': 'var(--el-border-color-extra-light)',
             'br-dark': 'var( --el-border-color-dark)',
             fill: 'var(--el-fill-color)',
+            'fill-light': 'var(--el-fill-color-light)',
             'fill-lighter': 'var(--el-fill-color-lighter)',
             mask: 'var(--el-mask-color)'
         },