需要添加客服，二维码，扫码功能

2026-01-14 23:38:29 +08:00
parent db1b797b68
commit 220b12e945
21 changed files with 721 additions and 182 deletions
--- a/App.vue
+++ b/App.vue
@@ -18,7 +18,6 @@
    if (token.value) {
      loginTencentIM()
      // reLaunch('/TUIKit/components/TUIConversation/index')
-
      return
    }

--- a/TUIKit/components/TUIChat/message-list/message-elements/message-text.vue
+++ b/TUIKit/components/TUIChat/message-list/message-elements/message-text.vue
@@ -1,191 +1,219 @@
 <template>
  <div :class="['message-text-container', isPC && 'text-select']">
-    <span
-      v-for="(item, index) in processedContent"
-      :key="index"
-    >
+    <span v-for="(item, index) in processedContent" :key="index">
      <span
        v-if="item.name === 'text'"
+        :style="{ 'font-size': `${fontSizeData}rpx` }"
        class="text"
      >
        {{ item.text }}
      </span>
      <span
        v-else-if="item.name === 'url'"
+        :style="{ 'font-size': `${fontSizeData}rpx` }"
        class="url-link"
        @click="navigateToUrl(item.url)"
      >
        {{ item.text }}
      </span>
-      <img
-        v-else
-        class="emoji"
-        :src="item.src"
-        :alt="item.emojiKey"
-      >
+      <img v-else class="emoji" :src="item.src" :alt="item.emojiKey" />
    </span>
  </div>
 </template>

 <script lang="ts" setup>
-import { watch, ref } from '../../../../adapter-vue';
-import { TUIStore, IMessageModel, TUIReportService } from '@tencentcloud/chat-uikit-engine-lite';
-import { TUIGlobal, parseTextAndValidateUrls } from '@tencentcloud/universal-api';
-import { CUSTOM_BASIC_EMOJI_URL, CUSTOM_BASIC_EMOJI_URL_MAPPING } from '../../emoji-config';
-import { isPC, isUniFrameWork } from '../../../../utils/env';
+  import { watch, ref } from '../../../../adapter-vue'
+  import {
+    TUIStore,
+    IMessageModel,
+    TUIReportService
+  } from '@tencentcloud/chat-uikit-engine-lite'
+  import {
+    TUIGlobal,
+    parseTextAndValidateUrls
+  } from '@tencentcloud/universal-api'
+  import {
+    CUSTOM_BASIC_EMOJI_URL,
+    CUSTOM_BASIC_EMOJI_URL_MAPPING
+  } from '../../emoji-config'
+  import { isPC, isUniFrameWork } from '../../../../utils/env'
+  import { useAuthUser } from '../../../../../composables/useAuthUser'

-interface IProps {
-  content: Record<string, any>;
-  messageItem: IMessageModel;
-  enableURLHighlight?: boolean;
-}
+  const { fontSizeData } = useAuthUser()

-interface TextItem {
-  name: string;
-  text: string;
-  src?: string;
-  type?: string;
-  emojiKey?: string;
-  url?: string;
-}
+  interface IProps {
+    content: Record<string, any>
+    messageItem: IMessageModel
+    enableURLHighlight?: boolean
+  }

-const props = withDefaults(defineProps<IProps>(), {
-  content: () => ({}),
-  messageItem: () => ({} as IMessageModel),
-  enableURLHighlight: false,
-});
+  interface TextItem {
+    name: string
+    text: string
+    src?: string
+    type?: string
+    emojiKey?: string
+    url?: string
+  }

-const processedContent = ref<TextItem>([]);
+  const props = withDefaults(defineProps<IProps>(), {
+    content: () => ({}),
+    messageItem: () => ({} as IMessageModel),
+    enableURLHighlight: false
+  })

-watch(
-  () => props.messageItem,
-  (newValue: IMessageModel, oldValue: IMessageModel) => {
-    if (newValue?.ID === oldValue?.ID) {
-      return;
-    }
+  const processedContent = ref<TextItem>([])

-    if(props.enableURLHighlight){
-      TUIReportService.reportFeature(208);
-    }
-
-    if(props.messageItem.getMessageContent){
-      processedContent.value =  props.messageItem.getMessageContent()?.text;
-    } else {
-      processedContent.value = TUIStore.getMessageModel(props.messageItem.ID)?.getMessageContent()?.text;
-    }
-    processedContent.value = processedContent.value || props.content?.text;
-
-    if (!processedContent.value?.length) {
-      processedContent.value = [];
-      return;
-    }
-
-    processedContent.value = processedContent.value.map((item: TextItem) => {
-      // handle custom emoji
-      if (item.name === 'img' && item?.type === 'custom') {
-        if (!CUSTOM_BASIC_EMOJI_URL) {
-          console.warn('CUSTOM_BASIC_EMOJI_URL is required for custom emoji.');
-          return item;
-        }
-        if (!item.emojiKey || !CUSTOM_BASIC_EMOJI_URL_MAPPING[item.emojiKey]) {
-          console.warn('emojiKey is required for custom emoji.');
-          return item;
-        }
-        return {
-          ...item,
-          src: CUSTOM_BASIC_EMOJI_URL + CUSTOM_BASIC_EMOJI_URL_MAPPING[item.emojiKey]
-        };
+  watch(
+    () => props.messageItem,
+    (newValue: IMessageModel, oldValue: IMessageModel) => {
+      if (newValue?.ID === oldValue?.ID) {
+        return
      }

-      // handle url
-      if (props.enableURLHighlight && item.name === 'text' && item.text) {
-        if(!parseTextAndValidateUrls){
-          console.warn('parseTextAndValidateUrls not found. Please update @tencentcloud/universal-api to 2.3.7 or higher.');
-          return item;
-        }
-        const segments = parseTextAndValidateUrls(item.text);
-        if (segments.length) {
-          return segments.map((segment)=>({
-            name: segment.type,
-            text: segment.text,
-            url: segment.url,
-          }));
-        }
+      if (props.enableURLHighlight) {
+        TUIReportService.reportFeature(208)
      }

-      return item;
-    })?.flat();
-  },
-  {
-    deep: true,
-    immediate: true,
-  }
-);
+      if (props.messageItem.getMessageContent) {
+        processedContent.value =
+          props.messageItem.getMessageContent()?.text
+      } else {
+        processedContent.value = TUIStore.getMessageModel(
+          props.messageItem.ID
+        )?.getMessageContent()?.text
+      }
+      processedContent.value =
+        processedContent.value || props.content?.text

-// Function to handle navigation
-function navigateToUrl(url: string) {
-  if (url) {
-    if (isUniFrameWork) {
-      // Use UniApp navigation
-      TUIGlobal.navigateTo({
-        url: `/pages/views/webview?url=${url}` // Assuming you have a webview page to handle external URLs
-      });
-    } else {
-      // Use standard browser navigation
-      TUIGlobal.open(url, '_blank');
+      if (!processedContent.value?.length) {
+        processedContent.value = []
+        return
+      }
+
+      processedContent.value = processedContent.value
+        .map((item: TextItem) => {
+          // handle custom emoji
+          if (item.name === 'img' && item?.type === 'custom') {
+            if (!CUSTOM_BASIC_EMOJI_URL) {
+              console.warn(
+                'CUSTOM_BASIC_EMOJI_URL is required for custom emoji.'
+              )
+              return item
+            }
+            if (
+              !item.emojiKey ||
+              !CUSTOM_BASIC_EMOJI_URL_MAPPING[item.emojiKey]
+            ) {
+              console.warn('emojiKey is required for custom emoji.')
+              return item
+            }
+            return {
+              ...item,
+              src:
+                CUSTOM_BASIC_EMOJI_URL +
+                CUSTOM_BASIC_EMOJI_URL_MAPPING[item.emojiKey]
+            }
+          }
+
+          // handle url
+          if (
+            props.enableURLHighlight &&
+            item.name === 'text' &&
+            item.text
+          ) {
+            if (!parseTextAndValidateUrls) {
+              console.warn(
+                'parseTextAndValidateUrls not found. Please update @tencentcloud/universal-api to 2.3.7 or higher.'
+              )
+              return item
+            }
+            const segments = parseTextAndValidateUrls(item.text)
+            if (segments.length) {
+              return segments.map(segment => ({
+                name: segment.type,
+                text: segment.text,
+                url: segment.url
+              }))
+            }
+          }
+
+          return item
+        })
+        ?.flat()
+    },
+    {
+      deep: true,
+      immediate: true
+    }
+  )
+
+  // Function to handle navigation
+  function navigateToUrl(url: string) {
+    if (url) {
+      if (isUniFrameWork) {
+        // Use UniApp navigation
+        TUIGlobal.navigateTo({
+          url: `/pages/views/webview?url=${url}` // Assuming you have a webview page to handle external URLs
+        })
+      } else {
+        // Use standard browser navigation
+        TUIGlobal.open(url, '_blank')
+      }
    }
  }
-}
 </script>

 <style lang="scss" scoped>
-.message-text-container {
-  display: inline;
-  font-size: 0;
-  letter-spacing: -1px;
-}
-
-.text-select {
-  -webkit-user-select: text;
-  -moz-user-select: text;
-  -ms-user-select: text;
-  user-select: text;
-}
-
-.text,.emoji,.url-link{
-  &::selection {
-    background-color: #b4d5fe;
-    color: inherit;
-    cursor: text;
-  }
-}
-
-.emoji {
-  font-size: 0;
-  vertical-align: bottom;
-  width: 20px;
-  height: 20px;
-}
-
-.text, .url-link {
-  font-size: 14px;
-  white-space: pre-wrap;
-  word-break: break-all;
-  letter-spacing: normal;
-}
-
-.url-link {
-  color: #0366d6;
-  text-decoration: none;
-  word-break: break-all;
-  cursor: text;
-
-  &:hover:not(:active) {
-    cursor: pointer;
+  .message-text-container {
+    display: inline;
+    font-size: 0;
+    letter-spacing: -1px;
  }

-  &:visited {
+  .text-select {
+    -webkit-user-select: text;
+    -moz-user-select: text;
+    -ms-user-select: text;
+    user-select: text;
+  }
+
+  .text,
+  .emoji,
+  .url-link {
+    &::selection {
+      background-color: #b4d5fe;
+      color: inherit;
+      cursor: text;
+    }
+  }
+
+  .emoji {
+    font-size: 0;
+    vertical-align: bottom;
+    width: 20px;
+    height: 20px;
+  }
+
+  .text,
+  .url-link {
+    white-space: pre-wrap;
+    word-break: break-all;
+    letter-spacing: normal;
+  }
+
+  .url-link {
    color: #0366d6;
+    text-decoration: none;
+    word-break: break-all;
+    cursor: text;
+
+    &:hover:not(:active) {
+      cursor: pointer;
+    }
+
+    &:visited {
+      color: #0366d6;
+    }
  }
-}
 </style>
--- a/TUIKit/components/TUIContact/contact-info/index.vue
+++ b/TUIKit/components/TUIContact/contact-info/index.vue
@@ -3,7 +3,7 @@
    v-if="typeof contactInfoData === 'object' && Object.keys(contactInfoData).length"
    :class="['tui-contact-info', !isPC && 'tui-contact-info-h5']"
  >
-    <Navigation :title="contactInfoTitle || TUITranslateService.t('TUIChat.腾讯云 IM')">
+    <Navigation>
      <template #left>
        <div @click="resetContactSearchingUIData">
          <Icon
--- a/TUIKit/components/TUIContact/contact-list/components/FriendList.vue
+++ b/TUIKit/components/TUIContact/contact-list/components/FriendList.vue
@@ -52,19 +52,7 @@
        friend.remark || friend.profile?.nick || friend.userID || ''
    )

-    console.log(groupedList, '====222==')
-    friendListData.value.map = {
-      A: [
-        {
-          profile: {
-            nick: '测试第三方',
-            avatar:
-              'https://jckj-1309258891.cos.ap-chengdu.myqcloud.com/common/19101767159307246_.png'
-          }
-        }
-      ],
-      ...groupedList
-    }
+    friendListData.value.map = groupedList
  }

  onMounted(() => {
--- a/TUIKit/components/TUIContact/index.vue
+++ b/TUIKit/components/TUIContact/index.vue
@@ -8,7 +8,7 @@
      :title="
        currentContactKey
          ? contactInfoTitle
-          : TUITranslateService.t('TUIChat.腾讯云 IM')
+          : '通讯录'
      "
    >
      <template #left>
--- a/TUIKit/components/TUIConversation/index.vue
+++ b/TUIKit/components/TUIConversation/index.vue
@@ -200,7 +200,8 @@
  }
 </script>

-<style lang="scss" scoped src="./style/index.scss">
+<style lang="scss" scoped src="./style/index.scss"></style>
+<style lang="scss" scoped>
  uni-page-body,
  html,
  body,
--- a/api/my-index.js
+++ b/api/my-index.js
@@ -241,3 +241,29 @@ export const deleteUserMoments = id => {
    method: 'delete'
  })
 }
+
+/** 添加意见反馈 */
+export const addUserFeedback = data => {
+  return http({
+    url: '/api/service/feedback',
+    method: 'post',
+    data
+  })
+}
+
+/** 获取消息通知列表 */
+export const getUserNoticeList = data => {
+  return http({
+    url: '/api/service/serNotification/list',
+    method: 'get',
+    data
+  })
+}
+
+/** 获取消息通知详情 */
+export const getUserNoticeDetail = id => {
+  return http({
+    url: `/api/service/serNotification/${id}`,
+    method: 'get'
+  })
+}
--- a/composables/useAuthUser.js
+++ b/composables/useAuthUser.js
@@ -10,12 +10,13 @@ export const useAuthUser = () => {
  const tokenStore = useTokenStore()

  // 响应式状态（state & getters）
-  const { userInfo, tencentUserSig } = storeToRefs(userStore)
+  const { userInfo, tencentUserSig, fontSizeData } = storeToRefs(userStore)
  const { token } = storeToRefs(tokenStore)

  return {
    userInfo,
    tencentUserSig,
+    fontSizeData,
    token
  }
 }
--- a/constants/storage-keys.js
+++ b/constants/storage-keys.js
@@ -1,5 +1,7 @@
 export const STORAGE_KEYS = {
  TOKEN: 'token',
  USER: 'userInfo',
-  TENCENT_USER_SIG: 'tencentUserSig' // 腾讯 IM 签名
+  TENCENT_USER_SIG: 'tencentUserSig', // 腾讯 IM 签名
+  // 字体大小
+  FONT_SIZE: 'fontSizeData',
 }
--- a/pages.json
+++ b/pages.json
@@ -142,6 +142,13 @@
        "navigationBarTitleText": "个人中心"
      }
    },
+    {
+      "path": "pages/my-index/qr-code/index",
+      "style": {
+        "navigationBarTitleText": "",
+        "navigationBarBackgroundColor": "#ffffff"
+      }
+    },
    {
      "path": "pages/my-index/wallet/index",
      "style": {
@@ -225,6 +232,34 @@
        "navigationBarBackgroundColor": "#ffffff"
      }
    },
+    {
+      "path": "pages/my-index/set-up/feedback",
+      "style": {
+        "navigationBarTitleText": "意见反馈",
+        "navigationBarBackgroundColor": "#ffffff"
+      }
+    },
+    {
+      "path": "pages/my-index/set-up/message/index",
+      "style": {
+        "navigationBarTitleText": "消息通知",
+        "navigationBarBackgroundColor": "#ffffff"
+      }
+    },
+    {
+      "path": "pages/my-index/set-up/message/details",
+      "style": {
+        "navigationBarTitleText": "通知详情",
+        "navigationBarBackgroundColor": "#ffffff"
+      }
+    },
+    {
+      "path": "pages/my-index/set-up/font-settings",
+      "style": {
+        "navigationBarTitleText": "字体设置",
+        "navigationBarBackgroundColor": "#ffffff"
+      }
+    },
    {
      "path": "pages/my-index/wallet/bank-card/card-details",
      "style": {
--- a/pages/anchor/index.nvue
+++ b/pages/anchor/index.nvue
@@ -27,7 +27,8 @@
            <image class="participant-avatar" :src="user?.avatarURL || defaultAvatarURL" mode="aspectFill" />
          </view>
          <view class="participant-count">
-            <text class="count-text">{{ audienceCount }}</text>
+             <text v-if="topNUmber" class="count-text">{{ Number(topNUmber) > 100 ? '99+' : topNUmber }}</text>
+              <text v-else class="count-text">{{ audienceCount }}</text>
          </view>
        </view>
        <view class="control-icons">
@@ -159,6 +160,7 @@
  import { useLiveSummaryState } from '@/uni_modules/tuikit-atomic-x/state/LiveSummaryState'
  import ActionSheet from '@/components/ActionSheet.nvue'
  import Activity from './components/activity.nvue'
+  import { LIVE_BUSINESS } from '@/constants/live-keys'

  const dom = uni.requireNativePlugin('dom')
  const { loginUserInfo } = useLoginState();
@@ -180,6 +182,8 @@
  const { summaryData } = useLiveSummaryState(uni.$liveID)
  const defaultCoverURL = 'https://liteav-test-1252463788.cos.ap-guangzhou.myqcloud.com/voice_room/voice_room_cover1.png';
  const defaultAvatarURL = 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_01.png';
+
+ const topNUmber = ref('')
  const audienceCount = computed(() => audienceList.value.length);
  const isShowEndSheet = ref(false)
  const endSheetTitle = ref('')
@@ -252,6 +256,17 @@
    }
  }, { immediate: true, deep: true });

+    // 监听自定义消息列表更新
+  watch(messageList, (newMessages) => {
+    if (newMessages && newMessages.length > 0) {
+      console.log('弹幕消息列表更新:', newMessages);
+      if (newMessages.some(v => v.businessID === LIVE_BUSINESS.ADMIN)) {
+        console.log('管理员消息====================', newMessages.find(v => v.businessID === LIVE_BUSINESS.ADMIN))
+        topNUmber.value = newMessages.find(v => v.businessID === LIVE_BUSINESS.ADMIN).data;
+      }
+    }
+  });
+
  const editCover = (data : string) => {
    coverURL.value = data
  };
--- a/pages/audience/index.nvue
+++ b/pages/audience/index.nvue
@@ -36,7 +36,7 @@
              <image class="participant-avatar" :src="user?.avatarURL || defaultAvatarURL" mode="aspectFill" />
            </view>
            <view class="participant-count">
-             <text v-if="topNUmber" class="count-text">{{ audienceList.length }}</text>
+             <text v-if="topNUmber" class="count-text">{{ Number(topNUmber) > 100 ? '99+' : topNUmber }}</text>
              <text v-else class="count-text">{{ audienceList.length }}</text>
            </view>
          </view>
--- a/pages/my-index/personal-center/index.vue
+++ b/pages/my-index/personal-center/index.vue
@@ -5,6 +5,7 @@
  import { chooseImage } from '@/utils/media.js'
  import { uploadSingleFile } from '@/utils/uploadFile'
  import { useUserStore } from '@/stores/user'
+  import { navigateTo } from '../../../utils/router'

  const { updateUserInfo } = useUserStore()

@@ -35,6 +36,10 @@
    perSignature: ''
  })
  const upInfo = (key, value) => {
+    if (key === '1') {
+      navigateTo('/pages/my-index/qr-code/index')
+      return
+    }
    if (MODIFY_KEY.includes(key)) {
      const titleData = {
        3: '昵称',
@@ -46,6 +51,7 @@
      popupData.title = titleData
      popupData.name = userInfo.value[value]
      popupData.show = true
+      return
    }
  }

--- a/pages/my-index/qr-code/index.vue
+++ b/pages/my-index/qr-code/index.vue
@@ -0,0 +1,68 @@
+<script setup>
+  import { useAuthUser } from '@/composables/useAuthUser'
+
+  const { userInfo } = useAuthUser()
+</script>
+
+<template>
+  <view class="code-box">
+    <view class="top-img">
+      <image
+        v-if="userInfo.avatar"
+        :src="userInfo.avatar"
+        mode="aspectFill"
+        class="avatar"
+      ></image>
+      <uni-icons v-else type="contact-filled" size="60"></uni-icons>
+      <view class="right-box">
+        <text>{{ userInfo.userName }}</text>
+        <text>ID: {{ userInfo.userId }}</text>
+      </view>
+    </view>
+    <view class="code-img">二维码</view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+  .code-box {
+    margin-top: 10vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .top-img {
+      width: 480rpx;
+      display: flex;
+      align-items: center;
+      margin-bottom: 46rpx;
+      .avatar {
+        width: 110rpx;
+        height: 110rpx;
+        border-radius: 110rpx;
+      }
+      .right-box {
+        margin-left: 16rpx;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        text {
+          font-size: 32rpx;
+          font-weight: 600;
+          color: #333333;
+          &:last-child {
+            margin-top: 10rpx;
+            font-weight: 500;
+            font-size: 24rpx;
+            color: #acacac;
+          }
+        }
+      }
+    }
+
+    .code-img {
+      background: rgb(165, 136, 136);
+      width: 480rpx;
+      height: 480rpx;
+    }
+  }
+</style>
--- a/pages/my-index/set-up/feedback.vue
+++ b/pages/my-index/set-up/feedback.vue
@@ -0,0 +1,81 @@
+<script setup>
+  import { reactive } from 'vue'
+  import CardInput from '../components/card-input.vue'
+  import { addUserFeedback } from '../../../api/my-index'
+  import { useUI } from '@/utils/use-ui'
+  import { navigateBack } from '../../../utils/router'
+
+  const list = [
+    { text: '功能建议', value: '1' },
+    { text: '问题反馈', value: '2' },
+    { text: '内容举报', value: '3' },
+    { text: '投诉建议', value: '4' },
+    { text: '其他', value: '5' }
+  ]
+
+  const { showDialog } = useUI()
+
+  const formData = reactive({
+    content: '',
+    images: '',
+    /** 反馈类型：1-功能建议 2-问题反馈 3-内容举报 4-投诉建议 5-其他 */
+    type: ''
+  })
+
+  const onConfirm = async () => {
+    await addUserFeedback(formData)
+    const show = await showDialog(
+      '提示',
+      '感谢您对我们的反馈意见，我们会尽快处理',
+      false
+    )
+    if (show) {
+      navigateBack()
+    }
+  }
+</script>
+
+<template>
+  <view class="fee-box">
+    <CardInput :is-input="false" title="反馈类型">
+      <uni-data-checkbox
+        mode="tag"
+        v-model="formData.type"
+        :localdata="list"
+      ></uni-data-checkbox>
+    </CardInput>
+
+    <CardInput :is-input="false" title="反馈描述">
+      <textarea
+        v-model="formData.content"
+        placeholder="说说您的建议或问题，以便我们提供更好的服务"
+        confirm-type="done"
+        @confirm="onConfirm"
+      />
+    </CardInput>
+
+    <CardInput :is-input="false" title="添加图片">
+      <cb-file-picker v-model="formData.images"></cb-file-picker>
+    </CardInput>
+
+    <!-- 底部按钮 -->
+    <bottom-view>
+      <cb-button
+        :disabled="!formData.content || !formData.type"
+        @click="onConfirm"
+      >
+        提交反馈
+      </cb-button>
+    </bottom-view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+  page {
+    background: #f9f9f9;
+  }
+
+  .fee-box {
+    padding: 20rpx 32rpx;
+  }
+</style>
--- a/pages/my-index/set-up/font-settings.vue
+++ b/pages/my-index/set-up/font-settings.vue
@@ -0,0 +1,62 @@
+<script setup>
+  import { ref } from 'vue'
+  import { useUserStore } from '../../../stores/user'
+  import { useAuthUser } from '../../../composables/useAuthUser'
+
+  const { fontSizeData } = useAuthUser()
+  const { updateFontSize } = useUserStore()
+
+  const size = ref(fontSizeData.value)
+  const sliderChange = ({ detail }) => {
+    const data = {
+      1: '20',
+      2: '26',
+      3: '36',
+      4: '42',
+      5: '50',
+      6: '56'
+    }[detail.value]
+
+    size.value = data
+    updateFontSize(data)
+  }
+</script>
+
+<template>
+  <view class="font-settings">
+    <view class="top-text">
+      <text :style="{ 'font-size': `${size}rpx` }">预览字体大小</text>
+    </view>
+    <slider
+      :max="6"
+      :min="1"
+      :value="
+        { '20': 1, '26': 2, '36': 3, '42': 4, '50': 5, '56': 6 }[
+          fontSizeData
+        ]
+      "
+      @change="sliderChange"
+    />
+  </view>
+</template>
+
+<style lang="scss" scoped>
+  // 背景色
+  page {
+    background: #f9f9f9;
+  }
+
+  .font-settings {
+    padding: 20rpx 32rpx;
+
+    .top-text {
+      padding: 24rpx 20rpx;
+      background: #ffffff;
+      border-radius: 16rpx;
+      margin-bottom: 100rpx;
+      text {
+        color: #333333;
+      }
+    }
+  }
+</style>
--- a/pages/my-index/set-up/index.vue
+++ b/pages/my-index/set-up/index.vue
@@ -1,29 +1,51 @@
 <script setup>
  import { useUserStore } from '@/stores/user'
  import { navigateTo } from '../../../utils/router'
+  import { useUI } from '../../../utils/use-ui'
+
+  const { showDialog, showToast } = useUI()

  // 基础设置
  const basicSetting = [
-    { name: '字体大小', value: '', url: '' },
+    {
+      name: '字体大小',
+      value: '',
+      url: '/pages/my-index/set-up/font-settings'
+    },
    // { name: '聊天背景', value: '', url: '' },
-    { name: '朋友圈设置', value: '', url: '' },
-    { name: '消息通知', value: '', url: '' },
+    // { name: '朋友圈设置', value: '', url: '' },
+    { name: '消息通知', value: '', url: '/pages/my-index/set-up/message/index' }
    // { name: '安全设置', value: '', url: '' },
    // { name: '群发消息', value: '', url: '' },
-    { name: '登录设备', value: '', url: '' }
+    // { name: '登录设备', value: '', url: '' }
  ]

  // 系统设置
  const systemSetting = [
-    { name: '隐私设置', value: '', url: '' },
-    { name: '清除缓存', value: '', url: '' },
-    { name: '意见反馈', value: '', url: '' },
+    // { name: '隐私设置', value: '', url: '' },
+    { name: '清除缓存', value: '2', url: '' },
+    {
+      name: '意见反馈',
+      value: '',
+      url: '/pages/my-index/set-up/feedback'
+    },
    { name: '关于我们', value: '', url: '/pages/discover/company' }
  ]

  const { clearUserInfo } = useUserStore()

  const onItem = item => {
+    if (item.value === '2') {
+      showDialog(
+        '确定要清理缓存吗',
+        '缓存是使用过程中的临时数据，清理缓存不会影响您正常使用软件'
+      ).then(show => {
+        if (show) {
+          showToast('清理成功', 'success')
+        }
+      })
+      return
+    }
    item.url && navigateTo(item.url)
  }
 </script>
--- a/pages/my-index/set-up/message/details.vue
+++ b/pages/my-index/set-up/message/details.vue
@@ -0,0 +1,55 @@
+<script setup>
+  import { ref } from 'vue'
+  import { onLoad } from '@dcloudio/uni-app'
+  import { getUserNoticeDetail } from '../../../../api/my-index'
+
+  const viewData = ref({})
+  const loading = ref(true)
+  onLoad(async e => {
+    const res = await getUserNoticeDetail(e.id)
+    viewData.value = res.data
+    loading.value = false
+  })
+</script>
+
+<template>
+  <view v-if="!loading" class="notice-detail">
+    <view class="box">
+      <text>{{ viewData.title }}</text>
+      <text>{{ viewData.content }}</text>
+      <text>{{ viewData.createTime }}</text>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+  page {
+    background: #f9f9f9;
+  }
+
+  .notice-detail {
+    padding: 20rpx 32rpx;
+    .box {
+      padding: 20rpx;
+      background: #ffffff;
+      border-radius: 16rpx;
+      display: flex;
+      flex-direction: column;
+      text {
+        font-size: 32rpx;
+        color: #333333;
+        // 第二个
+        &:nth-child(2) {
+          font-size: 28rpx;
+          color: #353535;
+          margin: 10rpx 0;
+        }
+        // 最后一个
+        &:last-child {
+          font-size: 24rpx;
+          color: #999999;
+        }
+      }
+    }
+  }
+</style>
--- a/pages/my-index/set-up/message/index.vue
+++ b/pages/my-index/set-up/message/index.vue
@@ -0,0 +1,120 @@
+<script setup>
+  import { ref } from 'vue'
+  import { getUserNoticeList } from '@/api/my-index'
+  import { navigateTo } from '../../../../utils/router'
+
+  // 类型：1-系统 gear 2-消息 chatbubble 3-提醒 notification
+  const iconMap = [
+    { icon: 'gear', bg: '#05b0ff1f', color: '#05b0ff' },
+    { icon: 'chatbubble', bg: '#23c4311a', color: '#23c431' },
+    { icon: 'notification', bg: '#dcdf111f', color: '#dbdf11' }
+  ]
+
+  const paging = ref(null)
+  const dataList = ref([])
+  const getData = async (pageNum, pageSize) => {
+    try {
+      const res = await getUserNoticeList({
+        pageNum,
+        pageSize
+      })
+      paging.value.complete(res.rows)
+    } catch (error) {
+      paging.value.complete(false)
+    }
+  }
+
+  const onGo = item => {
+    navigateTo('/pages/my-index/set-up/message/details', { id: item.id })
+  }
+</script>
+
+<template>
+  <z-paging
+    ref="paging"
+    v-model="dataList"
+    safe-area-inset-bottom
+    use-safe-area-placeholder
+    :default-page-size="15"
+    :show-loading-more-no-more-view="false"
+    @query="getData"
+  >
+    <view
+      v-for="item in dataList"
+      :key="item.id"
+      class="card-box"
+      @click="onGo(item)"
+    >
+      <view
+        :style="{ background: iconMap[item.type - 1].bg }"
+        class="icon-box"
+      >
+        <uni-icons
+          :type="iconMap[item.type - 1].icon"
+          :color="iconMap[item.type - 1].color"
+          size="30"
+        ></uni-icons>
+      </view>
+      <view class="content-box">
+        <view class="top">
+          <text>{{ item.title }}</text>
+          <text>{{ item.createTime }}</text>
+        </view>
+        <text class="content">
+          {{ item.content }}
+        </text>
+      </view>
+    </view>
+  </z-paging>
+</template>
+
+<style lang="scss" scoped>
+  .card-box + .card-box {
+    border-top: 2rpx solid #f5f5f5;
+    padding-top: 18rpx !important;
+  }
+  .card-box {
+    padding: 20rpx 30rpx;
+    display: flex;
+    align-items: center;
+    .icon-box {
+      flex-shrink: 0;
+      width: 84rpx;
+      height: 84rpx;
+      border-radius: 84rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 16rpx;
+    }
+    .content-box {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      .top {
+        display: flex;
+        justify-content: space-between;
+        text {
+          font-size: 32rpx;
+          color: #333333;
+          &:last-child {
+            font-size: 28rpx;
+            color: #a5a5a5;
+          }
+        }
+      }
+      .content {
+        margin-top: 6rpx;
+        font-size: 28rpx;
+        color: #979797;
+        // 超过1行显示省略号
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+        line-clamp: 1;
+      }
+    }
+  }
+</style>
--- a/stores/user.js
+++ b/stores/user.js
@@ -6,7 +6,10 @@ import {
  removeUserInfoData,
  getSig,
  setSig,
-  removeSig
+  removeSig,
+  getFontSize,
+  setFontSize,
+  removeFontSize
 } from '@/utils/storage'
 import { useTokenStore } from './token'
 import { getUserData, userLogout, updateUserData } from '@/api'
@@ -26,6 +29,9 @@ export const useUserStore = defineStore('user', () => {
  const userInfo = ref(
    getUserInfoData() ? JSON?.parse(getUserInfoData()) : {}
  )
+  /** 用户字体大小 */
+  const fontSizeData = ref(getFontSize())
+
  /** 腾讯 IM 存储数据 */
  const tencentUserSig = ref(getSig() ? JSON?.parse(getSig()) : {})

@@ -99,6 +105,7 @@ export const useUserStore = defineStore('user', () => {
    clearToken()
    removeUserInfoData()
    removeSig()
+    removeFontSize()
    await TUILogin.logout().then(() => {
      reLaunch('/pages/login/login')
    })
@@ -122,9 +129,17 @@ export const useUserStore = defineStore('user', () => {
    await refreshUserInfo()
  }

+  /** 更新字体大小 */
+  const updateFontSize = async fontSize => {
+    fontSizeData.value = fontSize
+    setFontSize(fontSize)
+  }
+
  return {
    userInfo,
    tencentUserSig,
+    fontSizeData,
+    updateFontSize,
    logout,
    refreshUserInfo,
    fetchUserInfo,
--- a/utils/storage.js
+++ b/utils/storage.js
@@ -47,3 +47,18 @@ export const getSig = () => {
 export const removeSig = () => {
  return uni.removeStorageSync(STORAGE_KEYS.TENCENT_USER_SIG)
 }
+
+/** 保存字体大小 */
+export const setFontSize = v => {
+  return uni.setStorageSync(STORAGE_KEYS.FONT_SIZE, v)
+}
+
+/** 获取字体大小 */
+export const getFontSize = () => {
+  return uni.getStorageSync(STORAGE_KEYS.FONT_SIZE) || 26
+}
+
+/** 删除字体大小 */
+export const removeFontSize = () => {
+  return uni.removeStorageSync(STORAGE_KEYS.FONT_SIZE)
+}