From cf99b35b7972414f67ec3c06e17f7764a5476d01 Mon Sep 17 00:00:00 2001
From: Jason <5340635+wen-jason@user.noreply.gitee.com>
Date: Wed, 14 Sep 2022 16:41:39 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dbug=20=EF=BC=8C=E5=BA=95?=
 =?UTF-8?q?=E9=83=A8=E5=AF=BC=E8=88=AA=EF=BC=8C=E8=A3=85=E4=BF=AE=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/package.json                            |  1 +
 admin/src/api/decoration.ts                   |  5 ++
 admin/src/components/image-contain/index.vue  |  8 +--
 admin/src/components/link/custom-link.vue     |  7 +-
 admin/src/components/link/index.vue           | 17 ++---
 admin/src/components/link/picker.vue          | 18 +++--
 admin/src/router/index.ts                     |  2 -
 admin/src/utils/request/axios.ts              |  7 +-
 admin/src/utils/util.ts                       | 11 +++
 admin/src/views/article/column/index.vue      | 37 ++++++++--
 admin/src/views/article/lists/index.vue       |  2 +
 .../decoration/component/decoration-img.vue   | 59 ++++++++++++++++
 .../decoration/component/pages/preview.vue    | 37 +++++-----
 .../component/widgets/banner/content.vue      |  6 +-
 .../widgets/customer-service/content.vue      |  5 +-
 .../component/widgets/my-service/content.vue  |  7 +-
 .../component/widgets/nav/content.vue         | 13 ++--
 .../component/widgets/news/attr.vue           | 20 ++++++
 .../component/widgets/news/content.vue        | 70 +++++++++++++++++++
 .../component/widgets/news/index.ts           |  8 +++
 .../component/widgets/news/options.ts         |  7 ++
 .../component/widgets/user-banner/content.vue |  5 +-
 admin/src/views/decoration/pages/index.vue    | 14 +++-
 admin/tailwind.config.js                      |  4 +-
 admin/yarn.lock                               |  5 ++
 app/src/components/tabbar/tabbar.vue          | 35 ++++++----
 .../components/u-tabbar/u-tabbar.vue          | 14 ++--
 app/src/utils/util.ts                         | 11 +--
 28 files changed, 323 insertions(+), 112 deletions(-)
 create mode 100644 admin/src/views/decoration/component/decoration-img.vue
 create mode 100644 admin/src/views/decoration/component/widgets/news/attr.vue
 create mode 100644 admin/src/views/decoration/component/widgets/news/content.vue
 create mode 100644 admin/src/views/decoration/component/widgets/news/index.ts
 create mode 100644 admin/src/views/decoration/component/widgets/news/options.ts

diff --git a/admin/package.json b/admin/package.json
index f12b6f62..a6681cf9 100644
--- a/admin/package.json
+++ b/admin/package.json
@@ -30,6 +30,7 @@
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.1.0",
+    "@tailwindcss/line-clamp": "^0.4.2",
     "@types/lodash-es": "^4.17.6",
     "@types/node": "^16.11.41",
     "@types/nprogress": "^0.2.0",
diff --git a/admin/src/api/decoration.ts b/admin/src/api/decoration.ts
index 1ecb0cfb..28d61e63 100644
--- a/admin/src/api/decoration.ts
+++ b/admin/src/api/decoration.ts
@@ -10,6 +10,11 @@ export function setDecoratePages(params: any) {
     return request.post({ url: '/decorate/pages/save', params })
 }
 
+// 获取首页文章数据
+export function getDecorateArticle(params?: any) {
+    return request.get({ url: '/decorate/data/article', params })
+}
+
 // 底部导航详情
 export function getDecorateTabbar(params?: any) {
     return request.get({ url: '/decorate/tabbar/detail', params })
diff --git a/admin/src/components/image-contain/index.vue b/admin/src/components/image-contain/index.vue
index 09ad8068..e0285b92 100644
--- a/admin/src/components/image-contain/index.vue
+++ b/admin/src/components/image-contain/index.vue
@@ -1,11 +1,5 @@
 <template>
-    <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>
+    <el-image :style="styles" v-bind="props"> </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
index 23f90536..d90264eb 100644
--- a/admin/src/components/link/custom-link.vue
+++ b/admin/src/components/link/custom-link.vue
@@ -4,7 +4,7 @@
             自定义链接
             <div class="ml-4 flex-1 min-w-[100px]">
                 <el-input
-                    :model-value="modelValue.path"
+                    :model-value="modelValue.query?.url"
                     placeholder="请输入链接地址"
                     @input="handleInput"
                 />
@@ -32,7 +32,10 @@ const emit = defineEmits<{
 
 const handleInput = (value: string) => {
     emit('update:modelValue', {
-        path: value,
+        path: '/pages/webview/webview',
+        query: {
+            url: value
+        },
         type: LinkTypeEnum.CUSTOM_LINK
     })
 }
diff --git a/admin/src/components/link/index.vue b/admin/src/components/link/index.vue
index 02e59369..c3acb1bd 100644
--- a/admin/src/components/link/index.vue
+++ b/admin/src/components/link/index.vue
@@ -10,16 +10,8 @@
             </el-menu-item>
         </el-menu>
         <div class="flex-1 pl-4">
-            <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"
-            />
+            <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>
@@ -72,9 +64,10 @@ const handleSelect = (index: string) => {
     activeMenu.value = index
 }
 
-const updateLink = (value: any) => {
+watch(activeLink, (value) => {
+    if (!value.type) return
     emit('update:modelValue', value)
-}
+})
 
 watch(
     () => props.modelValue,
diff --git a/admin/src/components/link/picker.vue b/admin/src/components/link/picker.vue
index a486e1e3..cc899131 100644
--- a/admin/src/components/link/picker.vue
+++ b/admin/src/components/link/picker.vue
@@ -1,11 +1,6 @@
 <template>
     <div class="link-picker flex-1" @click="!disabled && popupRef?.open()">
-        <el-input
-            :model-value="modelValue?.name ?? modelValue?.path"
-            placeholder="请选择链接"
-            readonly
-            :disabled="disabled"
-        >
+        <el-input :model-value="getLink" placeholder="请选择链接" readonly :disabled="disabled">
             <template #suffix>
                 <icon v-if="!modelValue?.path" name="el-icon-ArrowRight" />
                 <icon
@@ -43,6 +38,17 @@ const activeLink = ref<Link>({ path: '', type: LinkTypeEnum.SHOP_PAGES })
 const handleConfirm = () => {
     emit('update:modelValue', activeLink.value)
 }
+
+const getLink = computed(() => {
+    switch (props.modelValue?.type) {
+        case LinkTypeEnum.SHOP_PAGES:
+            return props.modelValue.name
+        case LinkTypeEnum.CUSTOM_LINK:
+            return props.modelValue.query?.url
+        default:
+            return props.modelValue?.name
+    }
+})
 watch(
     () => props.modelValue,
     (value) => {
diff --git a/admin/src/router/index.ts b/admin/src/router/index.ts
index 9ed6e36e..8227b944 100644
--- a/admin/src/router/index.ts
+++ b/admin/src/router/index.ts
@@ -86,8 +86,6 @@ export function findFirstValidRoute(routes: RouteRecordRaw[]): string | undefine
 }
 
 export function getRoutePath(perms: string) {
-    console.log(router.getRoutes())
-    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/utils/request/axios.ts b/admin/src/utils/request/axios.ts
index e202935e..2b6c1a03 100644
--- a/admin/src/utils/request/axios.ts
+++ b/admin/src/utils/request/axios.ts
@@ -64,14 +64,13 @@ export class Axios {
                 return response
             },
             (err: AxiosError) => {
-                let cancelUrl = err.config?.url
                 if (isFunction(responseInterceptorsCatchHook)) {
                     responseInterceptorsCatchHook(err)
                 }
-                if (err.code == AxiosError.ERR_CANCELED) {
-                    cancelUrl = err.message
+                if (err.code != AxiosError.ERR_CANCELED) {
+                    this.removeCancelToken(err.config?.url!)
                 }
-                this.removeCancelToken(cancelUrl!)
+
                 if (err.code == AxiosError.ECONNABORTED) {
                     setTimeout(() => {
                         console.log(err)
diff --git a/admin/src/utils/util.ts b/admin/src/utils/util.ts
index d553beb3..57d9ab6e 100644
--- a/admin/src/utils/util.ts
+++ b/admin/src/utils/util.ts
@@ -149,3 +149,14 @@ export const timeFormat = (dateTime: number, fmt = 'yyyy-mm-dd') => {
     }
     return fmt
 }
+
+/**
+ * @description 获取不重复的id
+ * @param length { Number } id的长度
+ * @return { String } id
+ */
+export const getNonDuplicateID = (length = 8) => {
+    let idStr = Date.now().toString(36)
+    idStr += Math.random().toString(36).substring(3, length)
+    return idStr
+}
diff --git a/admin/src/views/article/column/index.vue b/admin/src/views/article/column/index.vue
index eb2829f1..e7d5cf0b 100644
--- a/admin/src/views/article/column/index.vue
+++ b/admin/src/views/article/column/index.vue
@@ -1,11 +1,21 @@
 <template>
     <div>
         <el-card class="!border-none" shadow="never">
-            <el-alert type="warning" title="温馨提示：用于管理网站的分类，只可添加到一级" :closable="false" show-icon />
+            <el-alert
+                type="warning"
+                title="温馨提示：用于管理网站的分类，只可添加到一级"
+                :closable="false"
+                show-icon
+            />
         </el-card>
         <el-card class="!border-none mt-4" shadow="never" v-loading="pager.loading">
             <div>
-                <el-button class="mb-4" v-perms="['article:cate:add']" type="primary" @click="handleAdd()">
+                <el-button
+                    class="mb-4"
+                    v-perms="['article:cate:add']"
+                    type="primary"
+                    @click="handleAdd()"
+                >
                     <template #icon>
                         <icon name="el-icon-Plus" />
                     </template>
@@ -17,17 +27,32 @@
                 <el-table-column label="文章数" prop="number" min-width="120" />
                 <el-table-column label="状态" min-width="120">
                     <template #default="{ row }">
-                        <el-switch v-perms="['article:cate:change']" v-model="row.isShow" :active-value="1"
-                            :inactive-value="0" @change="changeStatus(row.id)" />
+                        <el-switch
+                            v-perms="['article:cate:change']"
+                            v-model="row.isShow"
+                            :active-value="1"
+                            :inactive-value="0"
+                            @change="changeStatus(row.id)"
+                        />
                     </template>
                 </el-table-column>
                 <el-table-column label="排序" prop="sort" min-width="120" />
                 <el-table-column label="操作" width="120" fixed="right">
                     <template #default="{ row }">
-                        <el-button v-perms="['article:cate:edit']" type="primary" link @click="handleEdit(row)">
+                        <el-button
+                            v-perms="['article:cate:edit']"
+                            type="primary"
+                            link
+                            @click="handleEdit(row)"
+                        >
                             编辑
                         </el-button>
-                        <el-button v-perms="['article:cate:del']" type="danger" link @click="handleDelete(row.id)">
+                        <el-button
+                            v-perms="['article:cate:del']"
+                            type="danger"
+                            link
+                            @click="handleDelete(row.id)"
+                        >
                             删除
                         </el-button>
                     </template>
diff --git a/admin/src/views/article/lists/index.vue b/admin/src/views/article/lists/index.vue
index a6f27c5a..9081b112 100644
--- a/admin/src/views/article/lists/index.vue
+++ b/admin/src/views/article/lists/index.vue
@@ -54,6 +54,8 @@
                             :src="row.image"
                             class="w-[60px] h-[45px]"
                             :preview-src-list="[row.image]"
+                            preview-teleported
+                            fit="contain"
                         />
                     </template>
                 </el-table-column>
diff --git a/admin/src/views/decoration/component/decoration-img.vue b/admin/src/views/decoration/component/decoration-img.vue
new file mode 100644
index 00000000..03a01067
--- /dev/null
+++ b/admin/src/views/decoration/component/decoration-img.vue
@@ -0,0 +1,59 @@
+<template>
+    <el-image :style="styles" v-bind="props" :src="getImageUrl(src)">
+        <template #placeholder>
+            <div class="image-slot"></div>
+        </template>
+        <template #error>
+            <div class="image-slot">
+                <icon name="el-icon-Picture" :size="30" />
+            </div>
+        </template>
+    </el-image>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import { addUnit } from '@/utils/util'
+import { imageProps } from 'element-plus'
+import useAppStore from '@/stores/modules/app'
+const props = defineProps({
+    width: {
+        type: [String, Number],
+        default: 'auto'
+    },
+    height: {
+        type: [String, Number],
+        default: 'auto'
+    },
+    radius: {
+        type: [String, Number],
+        default: 0
+    },
+    ...imageProps
+})
+
+const { getImageUrl } = useAppStore()
+const styles = computed<CSSProperties>(() => {
+    return {
+        width: addUnit(props.width),
+        height: addUnit(props.height),
+        borderRadius: addUnit(props.radius)
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.el-image {
+    display: block;
+    .image-slot {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        background: #fafafa;
+        color: #909399;
+    }
+}
+</style>
diff --git a/admin/src/views/decoration/component/pages/preview.vue b/admin/src/views/decoration/component/pages/preview.vue
index 818a2349..34a4f61f 100644
--- a/admin/src/views/decoration/component/pages/preview.vue
+++ b/admin/src/views/decoration/component/pages/preview.vue
@@ -1,31 +1,32 @@
 <template>
     <div class="shadow mx-[30px] pages-preview">
-        <div
-            v-for="(widget, index) in pageData"
-            :key="widget"
-            class="relative"
-            :class="{
-                'cursor-pointer': !widget?.disabled
-            }"
-            @click="handleClick(widget, index)"
-        >
+        <el-scrollbar>
             <div
-                class="absolute w-full h-full z-[100] border-dashed"
+                v-for="(widget, index) in pageData"
+                :key="widget.id"
+                class="relative"
                 :class="{
-                    select: index == modelValue,
-                    'border-br border-2': !widget?.disabled
+                    'cursor-pointer': !widget?.disabled
                 }"
-            ></div>
-            <slot>
-                <keep-alive>
+                @click="handleClick(widget, index)"
+            >
+                <div
+                    class="absolute w-full h-full z-[100] border-dashed"
+                    :class="{
+                        select: index == modelValue,
+                        'border-[#dcdfe6] border-2': !widget?.disabled
+                    }"
+                ></div>
+                <slot>
                     <component
                         :is="widgets[widget?.name]?.content"
                         :content="widget.content"
                         :styles="widget.styles"
+                        :key="widget.id"
                     />
-                </keep-alive>
-            </slot>
-        </div>
+                </slot>
+            </div>
+        </el-scrollbar>
     </div>
 </template>
 <script lang="ts" setup>
diff --git a/admin/src/views/decoration/component/widgets/banner/content.vue b/admin/src/views/decoration/component/widgets/banner/content.vue
index 6915116f..7633243a 100644
--- a/admin/src/views/decoration/component/widgets/banner/content.vue
+++ b/admin/src/views/decoration/component/widgets/banner/content.vue
@@ -1,14 +1,14 @@
 <template>
     <div class="banner">
         <div class="banner-image">
-            <image-contain width="100%" height="170px" :src="getImageUrl(getImage)" fit="contain" />
+            <decoration-img width="100%" height="170px" :src="getImage" fit="contain" />
         </div>
     </div>
 </template>
 <script lang="ts" setup>
-import useAppStore from '@/stores/modules/app'
 import type { PropType } from 'vue'
 import type options from './options'
+import DecorationImg from '../../decoration-img.vue'
 type OptionsType = ReturnType<typeof options>
 const props = defineProps({
     content: {
@@ -20,7 +20,7 @@ const props = defineProps({
         default: () => ({})
     }
 })
-const { getImageUrl } = useAppStore()
+
 const getImage = computed(() => {
     const { data } = props.content
     if (Array.isArray(data)) {
diff --git a/admin/src/views/decoration/component/widgets/customer-service/content.vue b/admin/src/views/decoration/component/widgets/customer-service/content.vue
index 8fa0c830..99d4f7e2 100644
--- a/admin/src/views/decoration/component/widgets/customer-service/content.vue
+++ b/admin/src/views/decoration/component/widgets/customer-service/content.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="customer-service">
-        <image-contain width="140px" height="140px" :src="getImageUrl(content.qrcode)" alt="" />
+        <decoration-img width="140px" height="140px" :src="content.qrcode" alt="" />
         <div class="text-[15px] mt-[7px] font-medium">{{ content.title }}</div>
         <div class="text-[#666] mt-[20px]">服务时间：{{ content.time }}</div>
         <div class="text-[#666] mt-[7px]">客服电话：{{ content.mobile }}</div>
@@ -12,9 +12,9 @@
     </div>
 </template>
 <script lang="ts" setup>
-import useAppStore from '@/stores/modules/app'
 import type { PropType } from 'vue'
 import type options from './options'
+import DecorationImg from '../../decoration-img.vue'
 type OptionsType = ReturnType<typeof options>
 defineProps({
     content: {
@@ -26,7 +26,6 @@ defineProps({
         default: () => ({})
     }
 })
-const { getImageUrl } = useAppStore()
 </script>
 
 <style lang="scss" scoped>
diff --git a/admin/src/views/decoration/component/widgets/my-service/content.vue b/admin/src/views/decoration/component/widgets/my-service/content.vue
index a43ceebe..90340906 100644
--- a/admin/src/views/decoration/component/widgets/my-service/content.vue
+++ b/admin/src/views/decoration/component/widgets/my-service/content.vue
@@ -9,7 +9,7 @@
                 :key="index"
                 class="flex flex-col items-center w-1/4 mb-[15px]"
             >
-                <image-contain width="26px" height="26px" :src="getImageUrl(item.image)" alt="" />
+                <decoration-img width="26px" height="26px" :src="item.image" alt="" />
                 <div class="mt-[7px]">{{ item.name }}</div>
             </div>
         </div>
@@ -19,7 +19,7 @@
                 :key="index"
                 class="flex items-center border-b border-[#e5e5e5] h-[50px] px-[12px]"
             >
-                <image-contain width="24px" height="24px" :src="getImageUrl(item.image)" alt="" />
+                <decoration-img width="24px" height="24px" :src="item.image" alt="" />
                 <div class="ml-[10px] flex-1">{{ item.name }}</div>
                 <div>
                     <icon name="el-icon-ArrowRight" />
@@ -29,9 +29,9 @@
     </div>
 </template>
 <script lang="ts" setup>
-import useAppStore from '@/stores/modules/app'
 import type { PropType } from 'vue'
 import type options from './options'
+import DecorationImg from '../../decoration-img.vue'
 type OptionsType = ReturnType<typeof options>
 defineProps({
     content: {
@@ -43,7 +43,6 @@ defineProps({
         default: () => ({})
     }
 })
-const { getImageUrl } = useAppStore()
 </script>
 
 <style lang="scss" scoped>
diff --git a/admin/src/views/decoration/component/widgets/nav/content.vue b/admin/src/views/decoration/component/widgets/nav/content.vue
index 9d707e05..39ca4776 100644
--- a/admin/src/views/decoration/component/widgets/nav/content.vue
+++ b/admin/src/views/decoration/component/widgets/nav/content.vue
@@ -1,21 +1,21 @@
 <template>
-    <div class="nav pt-[15px] pb-[8px]">
+    <div class="nav bg-white 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="getImageUrl(item.image)" alt="" />
+                <decoration-img width="41px" height="41px" :src="item.image" alt="" />
                 <div class="mt-[7px]">{{ item.name }}</div>
             </div>
         </div>
     </div>
 </template>
 <script lang="ts" setup>
-import useAppStore from '@/stores/modules/app'
 import type { PropType } from 'vue'
 import type options from './options'
+import DecorationImg from '../../decoration-img.vue'
 type OptionsType = ReturnType<typeof options>
 const props = defineProps({
     content: {
@@ -27,11 +27,6 @@ const props = defineProps({
         default: () => ({})
     }
 })
-const { getImageUrl } = useAppStore()
 </script>
 
-<style lang="scss" scoped>
-.nav {
-    background-color: #fff;
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/admin/src/views/decoration/component/widgets/news/attr.vue b/admin/src/views/decoration/component/widgets/news/attr.vue
new file mode 100644
index 00000000..6645dc41
--- /dev/null
+++ b/admin/src/views/decoration/component/widgets/news/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>
+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/news/content.vue b/admin/src/views/decoration/component/widgets/news/content.vue
new file mode 100644
index 00000000..197f9171
--- /dev/null
+++ b/admin/src/views/decoration/component/widgets/news/content.vue
@@ -0,0 +1,70 @@
+<template>
+    <div class="news">
+        <div class="flex items-center news-title mx-[10px] my-[15px] text-[17px] font-medium">
+            最新资讯
+        </div>
+        <div
+            v-for="item in newsList"
+            :key="item.id"
+            class="news-card flex bg-white px-[10px] py-[16px] text-[#333] border-[#f2f2f2] border-b"
+        >
+            <div class="mr-[10px]" v-if="item.image">
+                <img :src="item.image" class="w-[120px] h-[90px]" />
+            </div>
+            <div class="flex flex-col justify-between flex-1">
+                <div class="text-[15px] font-medium line-clamp-2">{{ item.title }}</div>
+                <div class="line-clamp-1 text-sm mt-[8px]">
+                    {{ item.intro }}
+                </div>
+
+                <div class="text-[#999] text-xs w-full flex justify-between mt-[8px]">
+                    <div>{{ item.createTime }}</div>
+                    <div class="flex items-center">
+                        <icon name="el-icon-View" />
+                        <div class="ml-[5px]">{{ item.visit }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import { getDecorateArticle } from '@/api/decoration'
+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 newsList = ref<any[]>([])
+const getData = async () => {
+    const data = await getDecorateArticle({
+        limit: 10
+    })
+    newsList.value = data
+}
+getData()
+</script>
+
+<style lang="scss" scoped>
+.news {
+    .news-title {
+        &::before {
+            content: '';
+            width: 4px;
+            height: 17px;
+            display: block;
+            margin-right: 5px;
+            background: #4173ff;
+        }
+    }
+}
+</style>
diff --git a/admin/src/views/decoration/component/widgets/news/index.ts b/admin/src/views/decoration/component/widgets/news/index.ts
new file mode 100644
index 00000000..c776bce3
--- /dev/null
+++ b/admin/src/views/decoration/component/widgets/news/index.ts
@@ -0,0 +1,8 @@
+import attr from './attr.vue'
+import content from './content.vue'
+import options from './options'
+export default {
+    attr,
+    content,
+    options
+}
diff --git a/admin/src/views/decoration/component/widgets/news/options.ts b/admin/src/views/decoration/component/widgets/news/options.ts
new file mode 100644
index 00000000..dde2c1f5
--- /dev/null
+++ b/admin/src/views/decoration/component/widgets/news/options.ts
@@ -0,0 +1,7 @@
+export default () => ({
+    title: '资讯',
+    name: 'news',
+    disabled: 1,
+    content: {},
+    styles: {}
+})
diff --git a/admin/src/views/decoration/component/widgets/user-banner/content.vue b/admin/src/views/decoration/component/widgets/user-banner/content.vue
index 9317842b..0a11a01c 100644
--- a/admin/src/views/decoration/component/widgets/user-banner/content.vue
+++ b/admin/src/views/decoration/component/widgets/user-banner/content.vue
@@ -1,14 +1,14 @@
 <template>
     <div class="banner mx-[10px] mt-[10px]">
         <div class="banner-image">
-            <image-contain width="100%" height="100px" :src="getImageUrl(getImage)" fit="contain" />
+            <decoration-img width="100%" height="100px" :src="getImage" fit="contain" />
         </div>
     </div>
 </template>
 <script lang="ts" setup>
-import useAppStore from '@/stores/modules/app'
 import type { PropType } from 'vue'
 import type options from './options'
+import DecorationImg from '../../decoration-img.vue'
 type OptionsType = ReturnType<typeof options>
 const props = defineProps({
     content: {
@@ -20,7 +20,6 @@ const props = defineProps({
         default: () => ({})
     }
 })
-const { getImageUrl } = useAppStore()
 const getImage = computed(() => {
     const { data } = props.content
     if (Array.isArray(data)) {
diff --git a/admin/src/views/decoration/pages/index.vue b/admin/src/views/decoration/pages/index.vue
index 4d9b83cd..de17adbe 100644
--- a/admin/src/views/decoration/pages/index.vue
+++ b/admin/src/views/decoration/pages/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="decoration-pages min-w-[1100px]">
-        <el-card shadow="never" class="!border-none flex-1" :body-style="{ height: '100%' }">
+        <el-card shadow="never" class="!border-none flex-1 flex" :body-style="{ flex: 1 }">
             <div class="flex h-full items-start">
                 <Menu v-model="activeMenu" :menus="menus" />
                 <preview v-model="selectWidgetIndex" :pageData="getPageData" />
@@ -19,6 +19,7 @@ import AttrSetting from '../component/pages/attr-setting.vue'
 import widgets from '../component/widgets'
 import { getDecoratePages, setDecoratePages } from '@/api/decoration'
 import feedback from '@/utils/feedback'
+import { getNonDuplicateID } from '@/utils/util'
 enum pagesTypeEnum {
     HOME = '1',
     USER = '2',
@@ -26,7 +27,13 @@ enum pagesTypeEnum {
 }
 
 const generatePageData = (widgetNames: string[]) => {
-    return widgetNames.map((widgetName) => widgets[widgetName]?.options() || {})
+    return widgetNames.map((widgetName) => {
+        const options = {
+            id: getNonDuplicateID(),
+            ...(widgets[widgetName]?.options() || {})
+        }
+        return options
+    })
 }
 
 const menus: Record<
@@ -41,7 +48,7 @@ const menus: Record<
         id: 1,
         pageType: 1,
         name: '商城首页',
-        pageData: generatePageData(['search', 'banner', 'nav'])
+        pageData: generatePageData(['search', 'banner', 'nav', 'news'])
     },
     [pagesTypeEnum.USER]: {
         id: 2,
@@ -70,6 +77,7 @@ const getData = async () => {
     const data = await getDecoratePages({ id: activeMenu.value })
     menus[String(data.id)].pageData = JSON.parse(data.pageData)
 }
+
 const setData = async () => {
     await setDecoratePages({
         ...menus[activeMenu.value],
diff --git a/admin/tailwind.config.js b/admin/tailwind.config.js
index 2d5b753f..35bd4b2e 100644
--- a/admin/tailwind.config.js
+++ b/admin/tailwind.config.js
@@ -60,5 +60,7 @@ module.exports = {
         }
     },
 
-    plugins: []
+    plugins: [
+        require('@tailwindcss/line-clamp') // 引入插件
+    ]
 }
diff --git a/admin/yarn.lock b/admin/yarn.lock
index a43dd0d5..8fd74929 100644
--- a/admin/yarn.lock
+++ b/admin/yarn.lock
@@ -426,6 +426,11 @@
   resolved "https://registry.npmmirror.com/@rushstack/eslint-patch/-/eslint-patch-1.1.4.tgz#0c8b74c50f29ee44f423f7416829c0bf8bb5eb27"
   integrity sha512-LwzQKA4vzIct1zNZzBmRKI9QuNpLgTQMEjsQLf3BXuGYb3QPTP4Yjf6mkdX+X1mYttZ808QpOwAzZjv28kq7DA==
 
+"@tailwindcss/line-clamp@^0.4.2":
+  version "0.4.2"
+  resolved "https://registry.npmmirror.com/@tailwindcss/line-clamp/-/line-clamp-0.4.2.tgz#f353c5a8ab2c939c6267ac5b907f012e5ee130f9"
+  integrity sha512-HFzAQuqYCjyy/SX9sLGB1lroPzmcnWv1FHkIpmypte10hptf4oPUfucryMKovZh2u0uiS9U5Ty3GghWfEJGwVw==
+
 "@transloadit/prettier-bytes@0.0.7":
   version "0.0.7"
   resolved "https://registry.npmmirror.com/@transloadit/prettier-bytes/-/prettier-bytes-0.0.7.tgz#cdb5399f445fdd606ed833872fa0cabdbc51686b"
diff --git a/app/src/components/tabbar/tabbar.vue b/app/src/components/tabbar/tabbar.vue
index 7540a235..63dd9d51 100644
--- a/app/src/components/tabbar/tabbar.vue
+++ b/app/src/components/tabbar/tabbar.vue
@@ -1,21 +1,30 @@
 <template>
-    <u-tabbar v-bind="tabbarStyle" :list="tabbarList" @change="handleChange"></u-tabbar>
+    <u-tabbar
+        v-model="current"
+        v-bind="tabbarStyle"
+        :list="tabbarList"
+        @change="handleChange"
+        :hide-tab-bar="false"
+    ></u-tabbar>
 </template>
 
 <script lang="ts" setup>
 import { useAppStore } from '@/stores/app'
-import { currentPage, navigateTo } from '@/utils/util'
-import { onLoad } from '@dcloudio/uni-app'
-import { computed, onMounted, ref } from 'vue'
+import { navigateTo } from '@/utils/util'
+import { computed, ref } from 'vue'
+const current = ref()
 const appStore = useAppStore()
 const tabbarList = computed(() => {
-    return appStore.getTabbarConfig.map((item: any) => ({
-        iconPath: item.unselected,
-        selectedIconPath: item.selected,
-        text: item.name,
-        link: JSON.parse(item.link),
-        pagePath: JSON.parse(item.link).path
-    }))
+    return appStore.getTabbarConfig.map((item: any) => {
+        const link = JSON.parse(item.link)
+        return {
+            iconPath: item.unselected,
+            selectedIconPath: item.selected,
+            text: item.name,
+            link,
+            pagePath: link.path
+        }
+    })
 })
 
 const tabbarStyle = computed(() => ({
@@ -26,8 +35,4 @@ const handleChange = (index: number) => {
     const selectTab = tabbarList.value[index]
     navigateTo(selectTab.link, 'reLaunch')
 }
-// onMounted(() => {
-//     const page = currentPage()
-//     console.log(page)
-// })
 </script>
diff --git a/app/src/uni_modules/vk-uview-ui/components/u-tabbar/u-tabbar.vue b/app/src/uni_modules/vk-uview-ui/components/u-tabbar/u-tabbar.vue
index 6ec5b686..c45f0d44 100644
--- a/app/src/uni_modules/vk-uview-ui/components/u-tabbar/u-tabbar.vue
+++ b/app/src/uni_modules/vk-uview-ui/components/u-tabbar/u-tabbar.vue
@@ -238,16 +238,20 @@ export default {
 		},
 		// 切换tab
 		switchTab(index) {
-			// 发出事件和修改v-model绑定的值
-			this.$emit("change", index);
+           
+			let pagePath = this.list[index].pagePath;
 			// 如果有配置pagePath属性，使用uni.switchTab进行跳转
-			if (this.list[index].pagePath) {
+			if (pagePath) {
+                if(pagePath == this.pageUrl || pagePath == "/" + this.pageUrl) return
+                // 发出事件和修改v-model绑定的值
+			    this.$emit("change", index);
 				uni.switchTab({
-					url: this.list[index].pagePath
+					url: pagePath
 				});
 			} else {
 				// 如果配置了papgePath属性，将不会双向绑定v-model传入的value值
 				// 因为这个模式下，不再需要v-model绑定的value值了，而是通过getCurrentPages()适配
+                this.$emit("change", index);
 				this.$emit("input", index);
 				this.$emit("update:modelValue", index);
 			}
@@ -370,4 +374,4 @@ export default {
 		}
 	}
 }
-</style>
+</style>
diff --git a/app/src/utils/util.ts b/app/src/utils/util.ts
index 4653ebf4..6385bcfe 100644
--- a/app/src/utils/util.ts
+++ b/app/src/utils/util.ts
@@ -53,15 +53,8 @@ export enum LinkTypeEnum {
 }
 
 export function navigateTo(link: Link, navigateType: 'navigateTo' | 'reLaunch' = 'navigateTo') {
-    let url: string
-    switch (link.type) {
-        case LinkTypeEnum.SHOP_PAGES:
-            url = link.query ? `${link.path}?${objectToQuery(link.query)}` : link.path
-            uni[navigateType]({ url })
-            break
-        case LinkTypeEnum.CUSTOM_LINK:
-            uni[navigateType]({ url: `/pages/webview/webview?url=${link.path}` })
-    }
+    const url = link.query ? `${link.path}?${objectToQuery(link.query)}` : link.path
+    uni[navigateType]({ url })
 }
 
 /**