优化评论功能API接口参数处理

api/channel/index.ts

@@ -49,7 +49,7 @@ export const getChannelPosts = (params: { id: number }) => {
  * @return {Promise}
  */
 export const postsDelete = (params: { id: number }) => {
-  return useDollarFetchRequest.del<IResponse<boolean>>('/prod-api/app-api/business/posts/delete', { params })
+  return useDollarFetchRequest.del<IResponse<boolean>>('/prod-api/app-api/business/posts/delete?id=' + params.id, {})
 }
 /**
  * 获取帖子详情
@@ -147,5 +147,5 @@ export const deleteChannelFollow = (params: { channelId: string }) => {
  * 根据群组ID获取群组成员
  */
 export const getGroupMembers = (params: { channelId: string }) => {
-  return useFetchRequest.get<IResponse<MemberUserRespDTO[]>>(`/prod-api/app-api/mqtt/session/users/${params.channelId}`)
+  return useDollarFetchRequest.get<IResponse<MemberUserRespDTO[]>>(`/prod-api/app-api/mqtt/session/users/${params.channelId}`)
 }

api/drawe-detail/index.ts

@@ -7,22 +7,22 @@ import type { ProjectRespVO, PageResultProjectCommentResVO, ProjectDrawPageRespV
  * @return {Promise}
  */
 export const getDetail = (params: { id?: number | string }) => {
-  return useFetchRequest.get<IResponse<ProjectRespVO>>('/prod-api/app-api/business/app/project-draw/preview', { query:params })
+  return useFetchRequest.get<IResponse<ProjectRespVO>>('/prod-api/app-api/business/app/project-draw/preview', { query: params })
 }
 
 /**
  * 获取评论列表
  * @return {Promise}
  */
-export const getCommentList = (params: { relationId?: number | string; pageNum?: number; pageSize?: number }) => {
+export const getCommentList = (params: { relationId?: number | string; pageNum?: number; pageSize?: number; type: number }) => {
-  return useDollarFetchRequest.get<IResponse<PageResultProjectCommentResVO>>('/prod-api/app-api/business/app/project-comment/page', { query:params })
+  return useDollarFetchRequest.get<IResponse<PageResultProjectCommentResVO>>('/prod-api/app-api/business/app/project-comment/page', { query: params })
 }
 
 /**
  * 发表评论
  * @return {Promise}
  */
-export const createComment = (params: { relationId?: number | string; content?: string; projectId?: number | string }) => {
+export const createComment = (params: { relationId?: number | string; content?: string; projectId?: number | string; type: number }) => {
   return useDollarFetchRequest.post<IResponse<boolean>>('/prod-api/app-api/business/app/project-comment/create', params)
 }
 
@@ -31,14 +31,14 @@ export const createComment = (params: { relationId?: number | string; content?:
  * @return {Promise}
  */
 export const getRelationRecommend = (params: { type?: number | string; projectType?: number | string }) => {
-  return useFetchRequest.get<IResponse<ProjectDrawPageRespVO[]>>('/prod-api/app-api/business/app/project-draw/top-list', { query:params })
+  return useFetchRequest.get<IResponse<ProjectDrawPageRespVO[]>>('/prod-api/app-api/business/app/project-draw/top-list', { query: params })
 }
 
 /**
  * 举报
  * @return {Promise}
  */
-export const report = (params: { id?: number | string; title?: string; comments?: string; files?: any; projectId: any; drawId: any }) => {
+export const report = (params: { id?: number | string; title?: string; comments?: string; files?: any; projectId?: any; drawId: any; type: any }) => {
   return useDollarFetchRequest.post<IResponse<boolean>>('/prod-api/app-api/business/project-report/create', params)
 }
 
@@ -50,6 +50,14 @@ export const getUserInfo = (params: { id?: number | string }) => {
   return useFetchRequest.get<IResponse<UserExtendSimpleRespDTO>>('/prod-api/app-api/business/app/project-draw/preview-user-info', { params })
 }
 
+/**
+ * 获取工具发布人信息
+ */
+
+export const getToolUserInfo = (params: { id?: number | string }) => {
+  return useFetchRequest.get<IResponse<UserExtendSimpleRespDTO>>('/prod-api/app-api/business/resource/publish-user-info', { params })
+}
+
 /**
  * 当前用户的主要作品内容
  */
@@ -59,7 +67,7 @@ export const getMainWork = (params: { id?: number | string; limit: number; membe
 /**
  * 创建内容信息
  */
-export const createContent = (params: { projectId: any; drawId: any }) => {
+export const createContent = (params: { projectId?: any; drawId: any; type: any }) => {
   return useDollarFetchRequest.post<IResponse<boolean>>('/prod-api/app-api/business/project-member-favorites/create', params)
 }
 

api/drawe-detail/types.ts

@@ -35,6 +35,7 @@ export interface ProjectRespVO {
   projectTypeName: string
   favoriteId?: string
   relationDraws: RelationDraws[]
+  no?: string
   filesInfo: {
     fileSize: string
     count: number
@@ -136,6 +137,7 @@ export interface UserExtendSimpleRespDTO {
   files: any[]
   fansCount: number
   projectCount: number
+  postsNum?: number
 }
 
 export interface ProjectDrawMemberRespVO {

api/home/index.ts

@@ -7,6 +7,8 @@ import type {
   ProjectDrawStatisticAppRespVO,
   ProjectTrendingScoreUserInfoVO,
   PageResultIndexSettingRespVO,
+  TdkSettingsRespVO,
+  TdkSettingsDO,
 } from './type'
 
 /**
@@ -88,3 +90,24 @@ export const tab2 = () => {
 export const getDictTree = (params: { type: number, id: number}) => {
   return useDollarFetchRequest.get<IResponse<ProjectDictNodeVO[]>>('/prod-api/app-api/business/app/dict/path-by-id', { query: params })
 }
+
+/**
+ * 获得网站 TDK设置
+ */
+export const getTDK = () => {
+  return useFetchRequest.get<IResponse<TdkSettingsRespVO>>('/prod-api/app-api/business/tdk-settings/get-index', {})
+}
+
+/**
+ * 获得网站 TDK栏目列表
+ */
+export const getTDKList = () => {
+  return useFetchRequest.get<IResponse<TdkSettingsDO[]>>('/prod-api/app-api/business/tdk-settings/list-menu', {})
+}
+
+/**
+ * 通知列表
+ */
+export const getNoticeList = () => {
+  return useDollarFetchRequest.get<IResponse<any>>('/prod-api/app-api/system/index-setting/notice-list', {})
+}

api/home/type.ts

@@ -105,3 +105,25 @@ export interface PageResultIndexSettingRespVO {
   status: number
   createTime: string
 }
+
+export interface TdkSettingsRespVO {
+  title: string
+  describeText: string
+  keyword: string
+}
+
+export interface TdkSettingsDO {
+  createTime?: string
+  updateTime?: string
+  creator?: string
+  updater?: string
+  deleted?: boolean
+  id?: number
+  title?: string
+  icon?: string
+  type?: number
+  path: string
+  describeText?: string
+  keyword?: string
+  remark: string
+}

api/login/index.ts

@@ -27,8 +27,14 @@ export const loginByMobile = (params: { mobile: string; code: string; socialCode
 /**
  * 发送邮箱验证码
  */
-export const sendEmailCode = (params: { email: string }) => {
+export const sendEmailCode = (data: { email: string }) => {
-  return useDollarFetchRequest.post<IResponse<any>>('/prod-api/app-api/member/auth/send-email-code', params)
+  return useDollarFetchRequest.post<IResponse<any>>('/prod-api/app-api/member/auth/send-email-code?email=' + data.email, {},{
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+      'Accept': 'application/json, text/plain, */*',
+      'Access-Control-Allow-Origin-Type': '*',
+    }
+  })
 }
 
 /**

api/personal-center/index.ts

@@ -43,7 +43,7 @@ export const updateUserExtend = (params: UserExtendSaveReqVO) => {
  * @returns
  */
 export const getUserAuthInfo = () => {
-  return useFetchRequest.get<IResponse<UserAuthInfoRespVO>>('/prod-api/app-api/member/user-auth-info/get', {})
+  return useDollarFetchRequest.get<IResponse<UserAuthInfoRespVO>>('/prod-api/app-api/member/user-auth-info/get', {})
 }
 /**
  * 创建用户信息
@@ -66,13 +66,13 @@ export const updateUserAuthInfo = (params: UserAuthInfoRespVO) => {
  * 获得内容信息分页
  */
 export const getContentPage = (params: { type: number }) => {
-  return useDollarFetchRequest.get<IResponse<PageResultProjectHistoryResVO>>('/prod-api/app-api/business/project-history/page', {query:params})
+  return useDollarFetchRequest.get<IResponse<PageResultProjectHistoryResVO>>('/prod-api/app-api/business/project-history/page', { query: params })
 }
 /**
  * 获得用户项目工具箱下载分页
  */
 export const getUserToolBoxPage = (params: { pageNum: number; pageSize: number; type?: number }) => {
-  return useDollarFetchRequest.get<IResponse<PageResultProjectHistoryResVO>>('/prod-api/app-api/business/project-member-file/page', {query:params})
+  return useDollarFetchRequest.get<IResponse<PageResultProjectHistoryResVO>>('/prod-api/app-api/business/project-member-file/page', { query: params })
 }
 
 /**
@@ -92,20 +92,20 @@ export const signIn = () => {
  * 获得用户积分记录分页
  */
 export const getUserPointPage = (params: { pageNo: number; pageSize: number }) => {
-  return useDollarFetchRequest.get<IResponse<PageResultMemberPointRecordRespVO>>('/prod-api/app-api/member/point/record/page', {query:params})
+  return useDollarFetchRequest.get<IResponse<PageResultMemberPointRecordRespVO>>('/prod-api/app-api/member/point/record/page', { query: params })
 }
 /**
  * 近期收益和近期活跃
  */
 export const getRecentIncomeAndActive = (params: { type: number; limit: number }) => {
-  return useDollarFetchRequest.get<IResponse<UserStatisticsLineRespVO>>('/prod-api/app-api/member/statistics/line', {query:params})
+  return useDollarFetchRequest.get<IResponse<UserStatisticsLineRespVO>>('/prod-api/app-api/member/statistics/line', { query: params })
 }
 /**
  * 
 资源下载分布
  */
 export const getResourceDistribution = (params: { type: number; limit: number }) => {
-  return useDollarFetchRequest.get<IResponse<UserStatisticsBarRespVO>>('/prod-api/app-api/member/statistics/bar', {query:params})
+  return useDollarFetchRequest.get<IResponse<UserStatisticsBarRespVO>>('/prod-api/app-api/member/statistics/bar', { query: params })
 }
 /**
  * 我的数据统计 包括我的金币 我的关注 我的发布等等
@@ -118,14 +118,16 @@ export const getUserStatistics = () => {
  * 获得项目订单用户收藏信息分页
  */
 export const getUserFavoritePage = (params: { pageNo: number; pageSize: number; userId: any; type: number }) => {
-  return useDollarFetchRequest.get<IResponse<PageResultProjectMemberFavoritesRespVO>>('/prod-api/app-api/business/project-member-favorites/page', {query:params})
+  return useDollarFetchRequest.get<IResponse<PageResultProjectMemberFavoritesRespVO>>('/prod-api/app-api/business/project-member-favorites/page', {
+    query: params,
+  })
 }
 
 /***
  * 自己发布的-内容信息分页
  */
 export const getOwnContentPage = (params: { pageNo: number; pageSize: number; type: number }) => {
-  return useDollarFetchRequest.get<IResponse<PageResultProjectHistoryResVO>>('/prod-api/app-api/business/app/project-draw/my-page', {query:params})
+  return useDollarFetchRequest.get<IResponse<PageResultProjectHistoryResVO>>('/prod-api/app-api/business/app/project-draw/my-page', { query: params })
 }
 
 /**
@@ -148,3 +150,17 @@ export const deleteResource = (params: { id: number }) => {
 export const getUserExtend = () => {
   return useFetchRequest.get<IResponse<UserExtendRespVO>>('/prod-api/app-api/member/user-extend/get', {})
 }
+
+/**
+ * 取消社交绑定
+ */
+export const cancelSocialBind = (params: { type: number; openid: string }) => {
+  return useDollarFetchRequest.post<IResponse<boolean>>('/prod-api/app-api/member/social-user/unbind', params)
+}
+
+/**
+ * 用户注销账号
+ */
+export const userLogout = () => {
+  return useDollarFetchRequest.del<IResponse<boolean>>('/prod-api/app-api/member/user/unregister-user', {})
+}

api/personal-center/types.ts

@@ -46,6 +46,8 @@ export interface UserExtendRespVO {
   description: string
   authStatus: number
   createTime: string
+  wxOpenId: string
+  qqOpenId: string
   files: {
     id: number
     memberId: number

api/toolbox/index.ts

@@ -1,6 +1,6 @@
 import * as useDollarFetchRequest from '~/composables/useDollarFetchRequest'
 import * as useFetchRequest from '~/composables/useFetchRequest'
-import type { TcreateReq, TpageReq, TpageRes } from './types'
+import type { TcreateReq, TpageReq, TpageRes, ProjectResourceRespVO } from './types'
 
 /**
  * 新建工具箱
@@ -8,12 +8,23 @@ import type { TcreateReq, TpageReq, TpageRes } from './types'
  * @returns
  */
 export const create = (params: TcreateReq) => {
-  return useDollarFetchRequest.post<IResponse<number>>('/prod-api/app-api/business/app/project-resource/create', params)
+  return useDollarFetchRequest.post<IResponse<number>>('/prod-api/app-api/business/resource/create', params)
 }
 
 /***
  * 获得内容信息分页
  */
-export const page = (params: TpageReq) => {
+export const page = (params: any) => {
-  return useFetchRequest.get<IResponse<TpageRes>>('/prod-api/app-api/business/app/project-resource/page', {query:params})
+  return useFetchRequest.get<IResponse<TpageRes>>('/prod-api/app-api/business/resource/page', {
+    query: params,
+  })
+}
+
+/**
+ * 获得工具箱
+ */
+export const get = (params: { id: string }) => {
+  return useFetchRequest.get<IResponse<ProjectResourceRespVO>>('/prod-api/app-api/business/resource/get', {
+    query: params,
+  })
 }

api/toolbox/types.ts

@@ -6,6 +6,9 @@ export interface TcreateReq {
   createAddress?: string
   createIp?: string
   projectType: number[]
+  categoryId?: number
+  sourceType?: number
+  categoryName?: string
   files: {
     id: number
     title: string
@@ -59,3 +62,57 @@ export interface TpageItem {
   commentsPoint: number
   ownedUserId: string
 }
+
+export interface ProjectResourceRespVO {
+  id: number
+  title: string
+  labels: string[]
+  createAddress: string
+  createIp: string
+  projectType: number[]
+  categoryId: number
+  categoryName: string
+  favoriteId?: number
+  downloadId?: string
+  sourceType: number
+  ownedUserName?: string
+  ownedUserAvatar?: string
+  ownedUserIdInfo: {
+    id: number
+    nickName: string
+    avatar: string
+  }
+  files: {
+    id: number
+    title: string
+    fileId: number
+    drawId: number
+    type: number
+    url: string
+    sort: number
+    size: number
+  }[]
+  coverImages: {
+    id: number
+    title: string
+    fileId: number
+    drawId: number
+    type: number
+    url: string
+    sort: number
+    size: number
+  }[]
+  points: number
+  createTime: string
+  updateTime: string
+  status: number
+  recommend: boolean
+  iconUrl: string
+  hotPoint: number
+  description: string
+  previewPoint: number
+  previewUrl: string
+  previewImageUrl: string
+  commentsPoint: number
+  ownedUserId: string
+}

api/upnew/index.ts

@@ -16,7 +16,7 @@ export const create = (params: TcreateReq) => {
  * @returns
  */
 export const parent = (params: { type: string | number; parentId: number | string }) => {
-  return useFetchRequest.get<IResponse<parentRes[]>>('/prod-api/app-api/business/app/dict/parent', { query: params })
+  return useDollarFetchRequest.get<IResponse<parentRes[]>>('/prod-api/app-api/business/app/dict/parent', { query: params })
 }
 /**
  * 获取具有上下级的字典信息
@@ -32,7 +32,7 @@ export const parentV2 = (params: { type: string | number; parentId: number | str
  * @returns
  */
 export const indexTabs = () => {
-  return useFetchRequest.get<IResponse<parentRes[]>>('/prod-api/app-api/business/project/index/index-tab3')
+  return useDollarFetchRequest.get<IResponse<parentRes[]>>('/prod-api/app-api/business/project/index/index-tab3')
 }
 /**
  * 模糊查询获取标签内容
@@ -40,7 +40,7 @@ export const indexTabs = () => {
  * @returns
  */
 export const keywords = (params: { type: string | number; keywords: string }) => {
-  return useFetchRequest.get<IResponse<boolean>>('/prod-api/app-api/business/app/dict/label-keywords', {query:params})
+  return useFetchRequest.get<IResponse<boolean>>('/prod-api/app-api/business/app/dict/label-keywords', { query: params })
 }
 /**
  * 获取格式类型字典信息
@@ -73,3 +73,24 @@ export const recommendTop = (params: recommendTopReq) => {
 export const homeLabel = () => {
   return useFetchRequest.get<IResponse<ProjectDictNodeVO[]>>('/prod-api/app-api/business/app/dict/index-tab')
 }
+
+/**
+ * 获取客服微信
+ */
+export const getWechat = () => {
+  return useDollarFetchRequest.get<IResponse<string>>('/prod-api/app-api/system/index-setting/kefu-wechat')
+}
+
+/**
+ * 查看图纸
+ */
+export const view = (params: { id: string | number; projectId: string | number }) => {
+  return useDollarFetchRequest.get<IResponse<TcreateReq>>('/prod-api/app-api/business/app/project-draw/get', { query: params })
+}
+
+/**
+ * 编辑图纸
+ */
+export const edit = (data: TcreateReq) => {
+  return useDollarFetchRequest.put<IResponse<boolean>>('/prod-api/app-api/business/app/project/update', data)
+}

api/upnew/types.ts

@@ -10,9 +10,9 @@ export interface FileItem {
 
 // 定义整个 JSON 对象的类型
 export interface TcreateReq {
-  activeName: string
+  activeName: string | number
   id: number | string
-  type: any[]
+  type: number
   isDomestic: number | string
   province: string // 省份编码
   city: string // 城市编码
@@ -61,6 +61,7 @@ export interface pageReq {
   createAddress?: string
   createIp?: string
   projectType?: any
+  recommend: boolean // 是否推荐
 }
 export interface pageRes {
   list: {
@@ -79,6 +80,7 @@ export interface pageRes {
     previewPoint?: number
     commentsPoint?: number
     hotPoint?: number
+    source?: number
   }[]
   total: number
 }

components/comment-section/index.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="mt-[30px] w-[100%]">
-    <div class="h-[48px] w-[100%] rounded-[1px] bg-[#F8F8F8] pl-[10px] text-[16px] text-[#333333] font-normal line-height-[50px]"> 共有{{ result.total || 0 }}条评论 </div>
+    <div class="h-[48px] w-[100%] rounded-[1px] bg-[#F8F8F8] pl-[10px] text-[16px] text-[#333333] font-normal line-height-[50px]">
+      共有{{ result.total || 0 }}条评论
+    </div>
     <div v-for="item in result.list" :key="item.id" class="mt-[20px] border-b-[1px] border-b-[#eee] border-b-solid pb-[14px]">
       <div class="flex items-start">
         <el-avatar :src="item.creatorInfo.avatar" alt="" srcset="" class="h-[50px] w-[49px] rounded-full" />
@@ -44,7 +46,7 @@
     },
     projectId: {
       type: Number,
-      required: true,
+      required: false,
     },
   })
 
@@ -66,7 +68,12 @@
 
   // 获取评论列表
   const handleGetCommentList = async () => {
-    const res = await getCommentList({ relationId: props.relationId, pageNum: query.value.pageNo, pageSize: query.value.pageSize })
+    const res = await getCommentList({
+      relationId: props.relationId,
+      pageNum: query.value.pageNo,
+      pageSize: query.value.pageSize,
+      type: props.projectId ? 1 : 2,
+    })
     if (res.code === 0) {
       result.value.list = res.data.list
       result.value.total = res.data.total
@@ -75,7 +82,7 @@
 
   // 发表评论
   const handleCreateComment = async () => {
-    const res = await createComment({ relationId: props.relationId, content: commentContent.value, projectId: props.projectId })
+    const res = await createComment({ relationId: props.relationId, content: commentContent.value, projectId: props.projectId || props.relationId, type: props.projectId ? 1 : 2 })
     if (res.code === 0) {
       commentContent.value = ''
       query.value.pageNo = 1
@@ -87,8 +94,9 @@
     () => props.relationId,
     () => {
       handleGetCommentList()
-    },{
+    },
-      immediate: true
+    {
+      immediate: true,
     }
   )
 </script>

components/drawe-components/RecommendedColumnsV2.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="relative mt-[34px] w-[100%]">
     <KlTabBar v-model="query.source" :data="tabBar" />
-    <div class="absolute right-[0px] top-[10px] text-[16px] text-[#999999] font-normal"
+    <div class="absolute right-[0px] top-[0px] text-[16px] text-[#999999] font-normal">
-      >共<span class="color-[#1A65FF]">{{ result?.total }}</span
+      <el-button type="warning" class="mr-4px" @click="handleUpload">上传工具</el-button>
+      共<span class="color-[#1A65FF]">{{ result?.total }}</span
       >个筛选结果</div
     >
     <div class="content mt-[10px]">
@@ -17,11 +18,12 @@
 </template>
 
 <script lang="ts" setup>
-  import KlTabBar from '~/components/kl-tab-bar/index.vue'
+  import KlTabBar from '~/components/kl-tab-bar/v3/index.vue'
   import CardPicture from '~/components/kl-card-picture/index.vue'
   import { ref } from 'vue'
   import type { pageRes, pageReq } from '~/api/upnew/types'
   import emptyImg from '~/assets/images/empty.png'
+  import useUserStore from '~/stores/user'
 
   const query = defineModel<pageReq>('modelValue', {
     required: true,
@@ -41,10 +43,18 @@
       value: 1,
     },
     {
-      label: '最新上传',
+      label: '转载分享',
       value: 2,
     },
   ])
+  const handleUpload = () => {
+    // 先判断登录
+    const store = useUserStore()
+    if (!store.token) {
+      return ElMessage.error('请先登录')
+    }
+    navigateTo('/upnew?drawType=1')
+  }
 </script>
 
 <style lang="scss" scoped></style>

components/foreign-components/BannerTips.vue

@@ -4,17 +4,33 @@
       <div class="banner-text">
         <h1 class="title">开启 CAD 学习之旅</h1>
         <p class="subtitle">为你的创意引擎注入强劲动力，驱动设计梦想在市场中乘风破浪</p>
-        <button class="join-button">快来加入</button>
+        <button class="join-button" @click="handleService">客服联系</button>
       </div>
       <div class="banner-image">
         <img src="~/assets/images/foreign_banner.png" alt="CAD工作环境" />
       </div>
     </div>
   </div>
+  <!-- 打开客服弹窗 弄成组件 -->
+  <KlService v-if="dialogVisible" v-model:dialog-visible="dialogVisible"></KlService>
 </template>
 
 <script setup lang="ts">
+  import useUserStore from '~/stores/user'
+  import KlService from '~/components/kl-quick-menu/components/kl-service.vue'
   // 组件逻辑可以在这里添加
+  const dialogVisible = ref(false)
+  const handleService = () => {
+    // 判断是否登录
+    const userStore = useUserStore()
+    if (!userStore.token) {
+      ElMessage.error('请先登录')
+      return
+    }
+    dialogVisible.value = true
+    // 读取未读消息
+    // readCount.value = false
+  }
 </script>
 
 <style scoped>

components/foreign-components/RecommendedColumnsV2.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="relative mt-[34px] w-[100%]">
-    <KlTabBar v-model="tabIndex" :data="tabBar" />
+    <KlTabBar v-model="query.source" :data="tabBar" />
     <KlWallpaperCategory v-model="query" v-model:level="level" :type="1" />
-    <div class="absolute right-[0px] top-[10px] text-[16px] text-[#999999] font-normal"
+    <div class="absolute right-[0px] top-[0px] text-[16px] text-[#999999] font-normal"
       >共<span class="color-[#1A65FF]">{{ result?.total }}</span
       >个筛选结果</div
     >
@@ -18,7 +18,7 @@
 </template>
 
 <script lang="ts" setup>
-  import KlTabBar from '~/components/kl-tab-bar/index.vue'
+  import KlTabBar from '~/components/kl-tab-bar/v3/index.vue'
   import CardPicture from '~/components/kl-card-picture/index.vue'
   import KlWallpaperCategory from '~/components/kl-wallpaper-category/index.vue'
   import { ref } from 'vue'

components/kl-card-picture/index.vue

@@ -6,12 +6,17 @@
     <div class="box-border p-[16px]">
       <div class="flex items-center justify-between">
         <div>
-          <div class="title mr-[38px] text-[16px] text-[#333333] font-bold">{{ props.itemInfo.title }}</div>
+          <div class="title mr-[38px] text-[16px] text-[#333333] font-bold flex items-center" :title="props.itemInfo.title">
+            <img v-if="props.itemInfo.source === 2" src="~/assets/images/zhuan.png" alt="" srcset="" class="mr-[2px] w-[22px] relative bottom-[-4px]" />
+            <img v-if="props.itemInfo.source === 1" src="~/assets/images/yuan.png" alt="" srcset="" class="mr-[2px] w-[20px] relative bottom-[-4px]" />
+            {{ props.itemInfo.title }}
+          </div>
           <div class="mt-[8px] text-[15px] text-[#999999] font-normal">by {{ props.itemInfo?.ownedUserIdInfo?.nickName }}</div>
+          <div class="mt-[4px] text-[13px] text-[#999999] font-normal">{{ dayjs(props.itemInfo.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
         </div>
         <div><img :src="props.itemInfo?.ownedUserIdInfo?.avatar" alt="" srcset="" class="h-[40px] w-[40px] rd-[50%]" /></div>
       </div>
-      <div class="mt-[24px] flex items-center justify-between">
+      <div class="mt-[14px] flex items-center justify-between">
         <div class="flex items-center justify-between text-[14px] text-[#666666] font-normal">
           <div class="mr-[9px] flex items-center">
             <img src="~/assets/images/look.png" alt="" srcset="" class="mr-[2px] h-[17px]" />
@@ -35,6 +40,7 @@
 </template>
 
 <script lang="ts" setup>
+  import dayjs from 'dayjs'
   import type { PropType } from 'vue'
   import type { pageRes } from '~/api/upnew/types'
   const props = defineProps({

components/kl-footer/index.vue

@@ -1,16 +1,16 @@
 <template>
-  <div class="mt-30px bg-[#14213d] px-[40px] pb-[20px] pt-[50px] text-white lg:px-[80px] sm:px-[60px]">
+  <div class="mt-[30px] bg-[#14213d] px-[40px] pb-[20px] pt-[50px] text-white lg:px-[80px] sm:px-[60px]">
     <!-- 主内容区 -->
     <div class="mb-[40px] flex flex-col items-start justify-between gap-[30px] lg:flex-row">
       <!-- 左侧 Logo -->
-      <div class="mx-auto w-[200px] shrink-0 lg:mx0">
+      <div class="mx-auto w-[200px] shrink-0 lg:mx-0">
         <img src="~/assets/images/logo5.png" class="h-auto w-full" />
       </div>
 
       <!-- 中间部分 -->
       <div class="grid grid-cols-2 mx-[80px] flex-1 gap-[10px] lg:grid-cols-3">
         <div v-for="(col, index) in bannerList?.slice(0, 3)" :key="index">
-          <h3 v-if="handle(col)" class="ma-0px mb-[20px] pa-0px text-[16px]">{{ handle(col) }}</h3>
+          <h3 v-if="handle(col)" class="ma-[0px] mb-[20px] pa-[0px] text-[16px]">{{ handle(col) }}</h3>
           <ul>
             <li
               v-for="(item, i) in handle2(col)"
@@ -44,6 +44,8 @@
     <div class="border-t border-white/20 pt-[20px] text-center text-[14px] text-white/70">
       Copyright 2007-2025 图夕夕网络科技(成都)有限公司
       <a href="http://beian.miit.gov.cn/" target="_blank" class="text-white/90 hover:text-blue-400!"> 蜀ICP备2025141494号-1</a>
+      <img src="~/assets/images/x.png" class="w-[20px] h-[20px] relative top-[2px]" />
+      <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=51010702043645" rel="noreferrer" target="_blank">川公网安备51010702043645号</a >
     </div>
 
     <el-image-viewer v-if="showViewer" :url-list="previewImgList" :url-index="0" @close="showViewer = false"></el-image-viewer>

components/kl-menus-v2/index.vue

@@ -8,13 +8,13 @@
         </div>
         <div class="item-center ml-[45px] w-[660px] flex justify-between">
           <nuxt-link
-            v-for="(item, index) in menuItems"
+            v-for="(item, index) in tdkList"
             :key="index"
             :to="item.path"
             class="parent-links relative rounded-lg px-3 py-2 text-[#1A65FF]"
           >
-            {{ item.name }}
+            {{ item.remark }}
-            <img v-if="item.path === '/communication/channel'" src="~/assets/images/hot.png" alt="火" class="absolute right-[-15px] top-[-2px]" />
+            <img v-if="item.path === '/channel'" src="~/assets/images/hot.png" alt="火" class="absolute right-[-12px] top-[0px]" />
           </nuxt-link>
         </div>
       </div>
@@ -31,19 +31,29 @@
 </template>
 <script setup lang="ts">
   import useUserStore from '~/stores/user'
+  import { getTDKList } from '~/api/home/index'
   const userStore = useUserStore()
   import { BellFilled } from '@element-plus/icons-vue'
   import { ref, computed } from 'vue'
-  const menuItems = ref([
+  // const menuItems = ref([
-    { name: '首页', path: '/' },
+  //   { name: '首页', path: '/' },
-    { name: '图纸', path: '/drawe' },
+  //   { name: '图纸', path: '/drawe' },
-    { name: '文本', path: '/text' },
+  //   { name: '文本', path: '/text' },
-    { name: '模型', path: '/model' },
+  //   { name: '模型', path: '/model' },
-    { name: '国外专区', path: '/foreign' },
+  //   { name: '国外专区', path: '/foreign' },
-    { name: '工具箱', path: '/toolbox' },
+  //   { name: '工具箱', path: '/toolbox' },
-    { name: '交流频道', path: '/channel' },
+  //   { name: '交流频道', path: '/channel' },
-    // { name: '牛人社区', path: '/community' },
+  //   // { name: '牛人社区', path: '/community' },
-  ])
+  // ])
+
+  const { data: tdkList } = await useAsyncData('get-tdk-list-home', async () => {
+    const res = await getTDKList()
+    // 添加首页
+    if (!res.data.find((c) => c.remark === '首页')) {
+      res.data.unshift({ remark: '首页', path: '/' })
+    }
+    return res.data
+  })
 
   // 是否登录
   const isLogin = computed(() => {

components/kl-nav-tab/index.vue

@@ -3,7 +3,9 @@
     <div class="relative ma-auto flex items-center py-[20px] w-[1500px]!">
       <img src="~/assets/images/logo5.png" alt="图夕夕" srcset="" class="h-[51px] w-[182px] cursor-pointer" @click="navigateTo('/')" />
       <div class="ml-[60px] flex items-center">
-        <span v-for="item in navList" :key="item" class="nav" :class="props.active === item ? 'active' : ''" @click="handleClick(item)">{{ item }}</span>
+        <span v-for="item in tdkList" :key="item.id" class="nav" :class="props.active === item.remark ? 'active' : ''" @click="handleClick(item.path)">{{
+          item.remark
+        }}</span>
       </div>
       <div class="relative ml-[30px]">
         <el-input
@@ -38,11 +40,11 @@
       <div class="absolute right-[10px] flex items-center">
         <div class="h-[36px] w-[36px] border-rd-[50%] bg-[#F5F5F5] text-center line-height-[44px]">
           <img v-if="!isLogin" src="~/assets/images/user.png" alt="" srcset="" class="h-[19px] w-[17px] relative top-[0px] left-[0px]" />
-          <img v-else :src="userStore.userInfoRes.avatar" alt="" srcset="" class="h-[19px] w-[17px] rd-[50%]" />
+          <img v-else :src="userStore.userInfoRes.avatar" alt="" srcset="" class="h-full w-full rd-[50%]" />
         </div>
         <span v-if="!isLogin" class="ml-[14px] cursor-pointer text-[14px] text-[#1A65FF] font-normal" @click="handleLogin">立即登录</span>
         <el-dropdown v-else placement="top-start" @command="handleCommand">
-          <span class="ml-[14px] cursor-pointer text-[14px] text-[#1A65FF] font-normal">{{ userStore.userInfoRes.nickname || '立即登录' }}</span>
+          <span class="ml-[10px] cursor-pointer text-[14px] text-[#1A65FF] font-normal">{{ userStore.userInfoRes.nickname || '立即登录' }}</span>
           <template #dropdown>
             <el-dropdown-menu>
               <el-dropdown-item command="个人中心"
@@ -64,7 +66,7 @@
   import { ref, getCurrentInstance, computed, onMounted } from 'vue'
   import { Setting, SwitchButton } from '@element-plus/icons-vue'
   import { page } from '~/api/upnew/index'
-  import { top } from '~/api/home/index'
+  import { top, getTDKList } from '~/api/home/index'
   import type { ProjectDrawStatisticAppRespVO } from '~/api/home/type'
   import { Search } from '@element-plus/icons-vue'
   import refreshToken from '~/utils/RefreshToken'
@@ -92,7 +94,15 @@
     return !!userStore.token
   })
 
-  const navList = ref(['首页', '图纸', '文本', '模型', '国外专区', '工具箱', '交流频道'])
+  const { data: tdkList } = await useAsyncData('get-tdk-list-nav', async () => {
+    const res = await getTDKList()
+    // 添加首页
+    if (!res.data.find((c) => c.remark === '首页')) {
+      res.data.unshift({ remark: '首页', path: '/' })
+    }
+    return res.data
+  })
+  // const navList = ref(['首页', '图纸', '文本', '模型', '国外专区', '工具箱', '交流频道'])
 
   const loading = ref(false)
   const handleHot = async () => {
@@ -147,34 +157,7 @@
   }
 
   const handleClick = (item: string) => {
-    switch (item) {
+    navigateTo(item)
-      case '首页':
-        navigateTo({ path: '/' }) // 修改为在新窗口打开
-        break
-      case '图纸':
-        navigateTo('/drawe') // 修改为在新窗口打开
-        break
-      case '文本':
-        navigateTo('/text') // 修改为在新窗口打开
-        break
-      case '模型':
-        navigateTo('/model') // 修改为在新窗口打开
-        break
-      case '国外专区':
-        navigateTo('/foreign') // 修改为在新窗口打开
-        break
-      case '牛人社区':
-        navigateTo('/community') // 修改为在新窗口打开
-        break
-      case '交流频道':
-        navigateTo('/channel') // 修改为在新窗口打开
-        break
-      case '工具箱':
-        navigateTo('/toolbox') // 修改为在新窗口打开
-        break
-      default:
-        break
-    }
   }
   const handleLogin = () => {
     app?.$openLogin() // 调用全局方法

components/kl-quick-menu/components/kl-vip.vue

@@ -153,8 +153,10 @@
   .vip-cards {
     display: flex;
     gap: 32px;
-    justify-content: center;
+    /* justify-content: center; */
     margin: 24px 0;
+    overflow-x: auto;
+    padding: 10px;
   }
   .vip-card {
     background: #fff;

components/kl-tab-bar/index.vue

@@ -7,7 +7,7 @@
   >
     <el-tab-pane v-for="(item, index) in data" :key="index" :label="item.label" :name="item.value">
       <template v-if="showNum" #label>
-        <img v-if="item.value === tabActive && showIcon" src="~/assets/images/2.png" alt="" srcset="" class="mr-7px" />
+        <img v-if="item.value === tabActive && showIcon" src="~/assets/images/2.png" alt="" srcset="" class="mr-[7px]" />
         <span>{{ item.label }}</span>
         <el-badge :value="item.num" class="item" :max="9999999999999" :hidden="!item.num" />
       </template>

components/kl-tab-bar/v3/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="flex items-center gap-[50px] mb-[20px]">
+    <el-link
+      v-for="(item, index) in props.data"
+      :key="index"
+      class="text-[15px]!"
+      :underline="modelValue === item.value ? 'always' : 'never'"
+      :type="modelValue === item.value ? 'primary' : 'info'"
+      @click="handleChange(item)"
+    >
+      {{ item.label }}
+    </el-link>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { PropType } from 'vue'
+  const props = defineProps({
+    data: {
+      type: Array as PropType<{ num?: number; label: string; value: string | number; [key: string]: any }[]>,
+      default: () => [],
+    },
+  })
+
+  const emits = defineEmits(['change'])
+
+  const modelValue = defineModel<any>('modelValue', {
+    required: true,
+  }) // 双向绑定的value
+
+  const handleChange = (value: { value: string | number; [key: string]: any }) => {
+    modelValue.value = value.value
+    emits('change', value)
+  }
+</script>
+
+<style lang="scss" scoped>
+  :deep(.el-link.is-underline) {
+    &::hover {
+      color: #1a65ff !important; // 鼠标悬停时的颜色
+    }
+    &::after {
+      bottom: -3px;
+      border-bottom: 2px solid #1a65ff; // 去掉下划线
+    }
+  }
+</style>

components/kl-uploader/index.vue

@@ -323,7 +323,7 @@
 
   // 判断是否是图片
   const handelFileType = (fileName: string) => {
-    const ext = fileName.split('.').pop()?.toLowerCase() || ''
+    const ext = fileName?.split('.').pop()?.toLowerCase() || ''
     return ['png', 'jpg', 'jpeg'].includes(ext)
   }
 </script>

components/kl-wallpaper-category/index.vue

@@ -83,9 +83,16 @@
     return props.type === 1 ? '图纸' : props.type === 3 ? '模型' : '文本'
   })
 
+  /** 版本 */
+  const { data: editionsList } = useAsyncData(`editionsList-${props.type}}`, async () => {
+    const res = await parent({ type: 2, parentId: 0 })
+    const all = [{ id: '-1', name: '全部' }]
+    return [...all, ...res.data]
+  })
+
   // 获取面包屑
   const { data: breadList } = await useAsyncData(
-    `breadList-${props.type}-${props.id}-${query.value.projectType}-${Date.now()}`,
+    `breadList-${props.type}-${props.id}-${query.value.projectType}}`,
     async () => {
       const res = await getDictTree({ type: 1, id: query.value.projectType })
       const all = [
@@ -97,13 +104,8 @@
       ]
       const arr = [...res.data, ...all]
       return arr.reverse()
-    },
-    {
-      immediate: true,
     }
   )
-
-  console.log('breadList', breadList);
   
   // const projectTypeList = ref<any>([])
   /** 获取分类下拉框 */
@@ -133,35 +135,49 @@
   // }
   // getEditionsList()
 
-  /**获取分类下拉框 */
+  console.log('breadList.value.length----', breadList.value);
-  const { data: projectTypeList } = await useAsyncData(
+
-    `projectType-draw-${props.type}-${query.value.projectType}`,
+  // 服务端渲染兼容方案：顺序执行异步操作
-    async () => {
+  // 1. 先获取面包屑数据（已在上面通过useAsyncData获取）
-      let parentId: any = '0'
+  
-      if (breadList?.value && breadList?.value.length > 1) {
+  // 2. 顺序获取分类下拉框数据
-        if (breadList.value.length > 2) {
+  // 创建一个函数来获取分类数据，确保服务端渲染时能获取到数据
-          const length = breadList.value?.length
+  const getProjectTypeList = async () => {
-          parentId = breadList?.value[length - 2].id
+    let parentId: any = '0'
-        } else {
+    
-          const length = breadList.value?.length
+    // 计算parentId的逻辑
-          parentId = breadList?.value[length - 1].id
+    if (breadList?.value && breadList?.value.length > 1) {
-        }
+      if (breadList.value.length > 2) {
+        const length = breadList.value?.length
+        parentId = breadList?.value[length - 2].id
+      } else {
+        const length = breadList.value?.length
+        parentId = breadList?.value[length - 1].id
       }
+    }
+
+    console.log('parentId', parentId);
+    
+    
+    try {
+      // 获取分类数据
       const res = await parent({ type: 1, parentId: parentId })
       const all = [{ id: parentId === '0' ? '-1' : parentId, name: '全部' }]
       return [...all, ...res.data]
-    },
+    } catch (error) {
-    {
+      console.error('获取分类数据失败:', error)
-      immediate: true,
+      return []
     }
+  }
+  
+  // 使用useAsyncData获取分类列表，确保服务端渲染兼容性
+  const { data: projectTypeList } = await useAsyncData(
+    `projectType-draw-${props.type}-${query.value.projectType}}`,
+    getProjectTypeList,
+    { server: true } // 确保在服务端执行
   )
 
-  /** 版本 */
+
-  const { data: editionsList } = useAsyncData(`editionsList-${props.type}-${Date.now()}`, async () => {
-    const res = await parent({ type: 2, parentId: 0 })
-    const all = [{ id: '-1', name: '全部' }]
-    return [...all, ...res.data]
-  })
 
   const handleClick = (row: any) => {
     query.value.title = ''

components/m/RecommendItem/index.vue

@@ -0,0 +1,181 @@
+<template>
+  <view class="design-list">
+    <view class="design-item" v-for="(item, index) in items" :key="index">
+      <view class="design-preview">
+        <image :src="item.image" mode="aspectFit"></image>
+      </view>
+      <view class="design-info">
+        <view class="design-title">{{ item.title }}</view>
+        <view class="design-author">by:{{ item.author }}</view>
+
+        <view class="design-stats">
+          <view class="stat-item">
+            <text class="iconfont">👁</text>
+            <text>{{ item.views }}</text>
+          </view>
+          <view class="stat-item">
+            <text class="iconfont">👍</text>
+            <text>{{ item.likes }}</text>
+          </view>
+          <view class="stat-item">
+            <text class="iconfont">💬</text>
+            <text>{{ item.comments }}</text>
+          </view>
+        </view>
+      </view>
+      <view class="design-action">
+        <button class="view-btn">查看</button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "RecommendItem",
+  props: {
+    currentTab: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      items: [
+        {
+          id: 1,
+          title: "高压细水雾灭火推车描述",
+          author: "赵其",
+          image: "/static/images/activity1.png",
+          views: 128,
+          likes: 16,
+          comments: 35,
+          url: "/pages/drawings/detail?id=1",
+        },
+        {
+          id: 2,
+          title: "高压细水雾灭火推车描述",
+          author: "赵其",
+          image: "/static/images/activity2.png",
+          views: 128,
+          likes: 16,
+          comments: 35,
+          url: "/pages/drawings/detail?id=2",
+        },
+        {
+          id: 1,
+          title: "室内CAD模型设计室内CAD模型设计",
+          author: "张泽",
+          image: "/static/images/activity1.png",
+          views: 95,
+          likes: 12,
+          comments: 28,
+          url: "/pages/models/detail?id=1",
+        },
+        {
+          id: 1,
+          title: "CAD设计规范文档",
+          author: "李华",
+          image: "/static/images/activity2.png",
+          views: 156,
+          likes: 23,
+          comments: 42,
+          url: "/pages/documents/detail?id=1",
+        },
+      ],
+    };
+  },
+  methods: {
+    viewDetail(item) {
+      console.log("View detail for:", item.title);
+      uni.navigateTo({
+        url: item.url,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+// 变量定义
+$primary-color: #007aff;
+$text-color: #333;
+$secondary-text: #666;
+$light-text: #999;
+$bg-color: #f0f4f9;
+$white: #fff;
+$border-color: #eee;
+$border-radius: 15rpx;
+.design-list {
+  //   padding: 10rpx 20rpx;
+
+  .design-item {
+    display: flex;
+    margin-bottom: 20rpx;
+    background-color: $white;
+    border-radius: $border-radius;
+    border: 1px solid $border-color;
+    padding: 17rpx 10rpx;
+    box-sizing: border-box;
+    position: relative;
+    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
+
+    .design-preview {
+      width: 220rpx;
+      height: 168rpx;
+      overflow: hidden;
+
+      image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .design-info {
+      flex: 1;
+      padding: 0 20rpx;
+
+      .design-title {
+        font-size: 27rpx;
+        margin-bottom: 10rpx;
+      }
+
+      .design-author {
+        font-size: 25rpx;
+        color: $light-text;
+        margin-bottom: 30rpx;
+      }
+    }
+
+    .design-stats {
+      display: flex;
+
+      .stat-item {
+        display: flex;
+        align-items: center;
+        margin-right: 20rpx;
+        font-size: 24rpx;
+        color: $light-text;
+
+        .iconfont {
+          margin-right: 5rpx;
+        }
+      }
+    }
+
+    .design-action {
+      position: absolute;
+      right: 20rpx;
+      bottom: 20rpx;
+
+      .view-btn {
+        background-color: $primary-color;
+        color: $white;
+        font-size: 25rpx;
+        padding: 0rpx 25rpx !important;
+        border-radius: 5rpx;
+      }
+    }
+  }
+}
+</style>

components/m/detail-components/Works.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="works">
+    <RecommendList />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'Works' })
+import RecommendList from "~/components/m/RecommendItem/index.vue";
+</script>
+
+<style lang="scss" scoped>
+.works {
+  width: 100%;
+}
+</style>

components/m/detail-components/certificates.vue

@@ -0,0 +1,73 @@
+<template>
+  <div
+    class="cert-item"
+    v-for="(cert, index) in talentInfo.certificates"
+    :key="index"
+  >
+    <div
+      v-if="index !== talentInfo.certificates.length - 1"
+      class="border-left"
+    ></div>
+    <div class="cert-dot"></div>
+    <div class="cert-info">
+      <span class="cert-year">{{ cert.year }}</span>
+      <span class="cert-desc">{{ cert.description }}</span>
+    </div>
+  </div>
+  
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'Certificates' })
+interface Certificate { year: string; description: string }
+interface TalentInfo { certificates: Certificate[] }
+defineProps<{ talentInfo: TalentInfo }>()
+</script>
+
+<style lang="scss" scoped>
+.border-left {
+  width: 1px;
+  height: calc(100%);
+  border-left: 2px dotted #e6f0ff;
+  position: absolute;
+  left: 7rpx;
+  top: 0;
+}
+// 证书列表
+.cert-item {
+  display: flex;
+  align-items: flex-start;
+  position: relative;
+}
+
+.cert-dot {
+  width: 16rpx;
+  height: 16rpx;
+  border-radius: 50%;
+  background-color: #1a65ff;
+  //   margin-top: 12rpx;
+  margin-right: 20rpx;
+  flex-shrink: 0;
+  z-index: 1;
+}
+
+.cert-info {
+  flex: 1;
+  margin-bottom: 11rpx;
+  margin-top: -10rpx;
+  padding-bottom: 32rpx;
+}
+
+.cert-year {
+  font-size: 25rpx;
+  font-weight: bold;
+  color: #333;
+  display: block;
+  margin-bottom: 8rpx;
+}
+
+.cert-desc {
+  font-size: 21rpx;
+  color: #666;
+}
+</style>

components/m/detail-components/technicalCertificates.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="flex">
+    <div
+      class="cert-technicalCertificates"
+      v-for="(cert, index) in 10"
+      :key="index"
+    >
+      <img
+        class="cert-image"
+        :src="`https://picsum.photos/90/90?random=${index}`"
+        alt="certificate"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'TechnicalCertificates' })
+</script>
+
+<style lang="scss" scoped>
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 50rpx;
+}
+.cert-technicalCertificates {
+  width: 135rpx;
+  height: 191rpx;
+  .cert-image {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

components/m/nav-bar/index.vue

@@ -0,0 +1,201 @@
+<template>
+  <!-- 顶部导航栏 -->
+  <view class="nav-bar">
+    <view class="nav-item active">全部</view>
+    <view class="nav-item">机械设备</view>
+    <view class="nav-item">零部件模型</view>
+    <view class="nav-item">交通运输</view>
+    <view class="nav-item">电子产品</view>
+    <view class="expand-btn" @tap="toggleCategoryMenu">
+      <text class="expand-icon">≡</text>
+    </view>
+  </view>
+
+  <!-- 全部分类浮窗 -->
+  <view
+    class="category-popup"
+    v-if="showCategoryMenu"
+    @tap.stop="closeCategoryMenu"
+  >
+    <view class="popup-content" @tap.stop>
+      <view class="category-list">
+        <view
+          :key="index"
+          v-for="(section, index) in categoryList"
+          class="category-item"
+          @tap="selectCategory(section)"
+        >
+          {{ section.name }}
+        </view>
+      </view>
+    </view>
+  </view>
+
+  <!-- 筛选选项 -->
+  <view class="filter-bar">
+    <view class="filter-item"> 软件分类 <text class="icon-down">∨</text> </view>
+    <view class="filter-item"> 图纸类型 <text class="icon-down">∨</text> </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      showCategoryMenu: false,
+      categoryList: [
+        { name: "机械设备", active: false },
+        { name: "零部件模型", active: false },
+        { name: "交通运输", active: false },
+        { name: "电子产品", active: false },
+        { name: "机械设备", active: false },
+        { name: "零部件模型", active: false },
+        { name: "交通运输", active: false },
+        { name: "电子产品", active: false },
+        { name: "机械设备", active: false },
+        { name: "零部件模型", active: false },
+        { name: "交通运输", active: false },
+        { name: "电子产品", active: false },
+      ],
+    };
+  },
+  methods: {
+    toggleCategoryMenu() {
+      this.showCategoryMenu = !this.showCategoryMenu;
+    },
+    closeCategoryMenu() {
+      this.showCategoryMenu = false;
+    },
+    selectCategory(section) {
+      // 演示用：显示toast提示
+    },
+  },
+  onLoad(options) {
+    console.log(options);
+    // 监听点击事件，点击页面空白处关闭菜单
+    uni.$on("page-click", () => {
+      if (this.showCategoryMenu) {
+        this.closeCategoryMenu();
+      }
+    });
+  },
+  onUnload() {
+    // 移除事件监听
+    uni.$off("page-click");
+  },
+};
+</script>
+
+<style scoped lang="scss">
+// 变量定义
+$primary-color: #007aff;
+$text-color: #333;
+$secondary-text: #666;
+$light-text: #999;
+$bg-color: #fff;
+$white: #fff;
+$border-color: #eee;
+$border-radius: 10rpx;
+$mask-bg: rgba(0, 0, 0, 0.5);
+.nav-bar {
+  display: flex;
+  background-color: $white;
+  padding: 10rpx 0;
+  position: relative;
+  padding-right: 60rpx;
+
+  .nav-item {
+    flex: 1;
+    text-align: center;
+    font-size: 25rpx;
+    padding: 15rpx 0;
+
+    &.active {
+      color: $primary-color;
+      font-weight: bold;
+    }
+  }
+  .expand-btn {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    width: 80rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .expand-icon {
+      font-size: 40rpx;
+      color: $text-color;
+    }
+  }
+}
+
+// 分类浮窗样式
+.category-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: $mask-bg;
+  z-index: 999;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .popup-content {
+    width: 100%;
+    max-height: 80vh;
+    background-color: $white;
+    animation: slideDown 0.3s ease;
+    overflow-y: auto;
+
+    .category-list {
+      padding: 20rpx;
+      display: flex;
+      flex-wrap: wrap;
+
+      .category-item {
+        padding: 8rpx 12.94rpx;
+        box-sizing: border-box;
+        margin-right: 3%;
+        margin-bottom: 20rpx;
+        text-align: center;
+        font-size: 25rpx;
+        background-color: $bg-color;
+        border-radius: 4rpx;
+        border: 1px solid $border-color;
+        color: #666;
+      }
+    }
+  }
+}
+// 滑入动画
+@keyframes slideDown {
+  from {
+    transform: translateY(-100%);
+    opacity: 0.5;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.filter-bar {
+  display: flex;
+  padding: 20rpx 30rpx;
+
+  .filter-item {
+    margin-right: 30rpx;
+    font-size: 25rpx;
+    color: $secondary-text;
+  }
+
+  .icon-down {
+    font-size: 24rpx;
+  }
+}
+</style>

components/model-components/RecommendedColumnsV2.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="relative mt-[34px] w-[100%]">
     <KlTabBar v-model="query.source" :data="tabBar" />
-    <div class="absolute right-[0px] top-[10px] text-[16px] text-[#999999] font-normal"
+    <div class="absolute right-[0px] top-[0px] text-[16px] text-[#999999] font-normal">
-      >共<span class="color-[#1A65FF]">{{ result?.total }}</span
+      <el-button type="warning" class="mr-4px" @click="handleUpload">上传工具</el-button>
+      共<span class="color-[#1A65FF]">{{ result?.total }}</span
       >个筛选结果</div
     >
     <div class="content mt-[10px]">
@@ -17,16 +18,17 @@
 </template>
 
 <script lang="ts" setup>
-  import KlTabBar from '~/components/kl-tab-bar/index.vue'
+  import KlTabBar from '~/components/kl-tab-bar/v3/index.vue'
   import CardPicture from '~/components/kl-card-picture/index.vue'
   import { ref } from 'vue'
   import type { pageRes, pageReq } from '~/api/upnew/types'
   import emptyImg from '~/assets/images/empty.png'
+  import useUserStore from '~/stores/user'
 
   const query = defineModel<pageReq>('modelValue', {
     required: true,
   })
-  const result = defineModel<pageRes| null>('result', {
+  const result = defineModel<pageRes | null>('result', {
     required: true,
   })
 
@@ -44,6 +46,15 @@
       value: 2,
     },
   ])
+
+  const handleUpload = () => {
+    // 先判断登录
+    const store = useUserStore()
+    if (!store.token) {
+      return ElMessage.error('请先登录')
+    }
+    navigateTo('/upnew?drawType=3')
+  }
 </script>
 
 <style lang="scss" scoped></style>

components/seo-head/index.vue

@@ -16,7 +16,7 @@
   })
 
   useHead({
-    title: `${props.title} - 图夕夕`,
+    title: `${props.title}`,
     meta: [
       { name: 'description', content: `${props.description}`},
       { name: 'keywords', content: props.keywords },

components/text-components/RecommendedColumnsV2.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="relative mt-[34px] w-[100%]">
     <KlTabBar v-model="query.source" :data="tabBar" />
-    <div class="absolute right-[0px] top-[10px] text-[16px] text-[#999999] font-normal"
+    <div class="absolute right-[0px] top-[0px] text-[16px] text-[#999999] font-normal">
-      >共<span class="color-[#1A65FF]">{{ result?.total }}</span
+      <el-button type="warning" class="mr-4px" @click="handleUpload">上传工具</el-button>
-      >个筛选结果</div
+      共<span class="color-[#1A65FF]">{{ result?.total }}</span>
-    >
+      个筛选结果
+    </div>
     <div class="content mt-[10px]">
       <el-row :gutter="20">
         <el-col v-for="(item, index) in result?.list" :key="index" :span="6">
@@ -17,11 +18,12 @@
 </template>
 
 <script lang="ts" setup>
-  import KlTabBar from '~/components/kl-tab-bar/index.vue'
+  import KlTabBar from '~/components/kl-tab-bar/v3/index.vue'
   import CardPicture from '~/components/kl-card-picture/index.vue'
   import { ref } from 'vue'
   import type { pageRes, pageReq } from '~/api/upnew/types'
   import emptyImg from '~/assets/images/empty.png'
+  import useUserStore from '~/stores/user'
 
   const query = defineModel<pageReq>('modelValue', {
     required: true,
@@ -34,7 +36,7 @@
   const tabBar = ref([
     {
       label: '文本推荐',
-      value: -1
+      value: -1,
     },
     {
       label: '原创文本',
@@ -45,6 +47,15 @@
       value: 2,
     },
   ])
+
+  const handleUpload = () => {
+    // 先判断登录
+    const store = useUserStore()
+    if (!store.token) {
+      return ElMessage.error('请先登录')
+    }
+    navigateTo('/upnew?drawType=2')
+  }
 </script>
 
 <style lang="scss" scoped></style>

components/toolbox-components/kl-wallpaper-category.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="box-border w-[100%] border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] px-[20px] py-[26px]">
+    <div class="mb-[10px] flex items-start">
+      <div class="flex-shrink-0 text-[15px] text-[#333333] font-normal">软件分类</div>
+      <div class="ml-[30px] mt-[-6px] flex flex-wrap">
+        <div
+          v-for="(item, index) in projectTypeList"
+          :key="index"
+          class="mb-[8px] mr-[26px] cursor-pointer rounded-[15px] px-[15px] py-[6px] text-[14px] text-[#666666] font-normal"
+          :class="item.id === query ? '!bg-[#ebeefe] !text-[#1A65FF]' : ''"
+          @click="handleClick(item)"
+          >{{ item.name }}</div
+        >
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { computed, ref } from 'vue'
+  import { parent } from '~/api/upnew/index'
+  import type { pageReq } from '~/api/upnew/types'
+  import { getDictTree } from '~/api/home/index'
+  import { ArrowRight } from '@element-plus/icons-vue'
+
+  const props = defineProps({
+    type: {
+      type: Number,
+      default: 1,
+    },
+    id: {
+      type: String,
+      default: '',
+    },
+    groundId: {
+      type: String,
+      default: '',
+    },
+  })
+
+  const query = defineModel<string | undefined>('modelValue', {
+    required: true,
+  })
+
+  // 服务端渲染兼容方案：顺序执行异步操作
+  // 1. 先获取面包屑数据（已在上面通过useAsyncData获取）
+
+  // 2. 顺序获取分类下拉框数据
+  // 创建一个函数来获取分类数据，确保服务端渲染时能获取到数据
+  const getProjectTypeList = async () => {
+    try {
+      // 获取分类数据
+      const res = await parent({
+        type: 3,
+        parentId: 0,
+      })
+      const all = [{ id: '-1', name: '全部' }]
+      return [...all, ...res.data]
+    } catch (error) {
+      return []
+    }
+  }
+
+  // 使用useAsyncData获取分类列表，确保服务端渲染兼容性
+  const { data: projectTypeList } = await useAsyncData(
+    `projectType-draw-toolbox-${props.type}-${query.value}}`,
+    getProjectTypeList,
+    { server: true } // 确保在服务端执行
+  )
+
+  const handleClick = (row: any) => {
+    query.value = row.id
+  }
+
+  const handleClickBread = (row: any, index: number) => {
+    query.value = row.id
+  }
+</script>

composables/useDollarFetchRequest.ts

@@ -1,77 +1,56 @@
-import { isArray } from "~/utils/utils";
+import { isArray } from '~/utils/utils'
+import useUserStore from '~/stores/user'
 // import refreshToken from "~/utils/RefreshToken";
 
-type FetchType = typeof $fetch;
+type FetchType = typeof $fetch
-export type FetchOptions = Parameters<FetchType>[1];
+export type FetchOptions = Parameters<FetchType>[1]
 
-const useClientRequest = async <T = unknown>(
+const useClientRequest = async <T = unknown>(url: string, opts?: FetchOptions) => {
-  url: string,
+  const token = useCookie<string | undefined>('token')
-  opts?: FetchOptions
+  const runtimeConfig = useRuntimeConfig()
-) => {
+  const userStore = useUserStore()
-  const token = useCookie<string | undefined>("token");
-  const runtimeConfig = useRuntimeConfig();
 
   const defaultOptions: FetchOptions = {
     baseURL: runtimeConfig.public.apiBase,
     onRequest({ options }) {
-      options.headers = options.headers || 'application/json';
+      options.headers = options.headers || 'application/json'
-      if (token.value) {
+      if (token.value || userStore.token) {
-        options.headers.set("Authorization", `Bearer ${token.value}`);
+        options.headers.set('Authorization', `Bearer ${token.value || userStore.token}`)
       }
     },
     onResponse({ response }) {
       if (+response.status === 200 && +response._data.code !== 0) {
-        ElMessage.error(response._data.msg);
+        ElMessage.error(response._data.msg)
       }
     },
     onResponseError({ response }) {
-      ElMessage.error(
+      ElMessage.error(isArray(response._data.data.msg) ? response._data.data.msg[0] : response._data.data.msg)
-        isArray(response._data.data.msg)
-          ? response._data.data.msg[0]
-          : response._data.data.msg
-      );
     },
-  };
-
-   // 明确转换返回类型
-  const response = await $fetch(url, { ...defaultOptions, ...opts });
-  return response as unknown as T;
-};
-
-  // GET请求
-  export const get = <T = unknown>(
-    endpoint: string, 
-    config?: Omit<FetchOptions, 'method'>
-  ): Promise<T> => {
-    return useClientRequest<T>(endpoint, { ...config, method: 'GET' })
-
   }
 
-    // POST请求
+  // 明确转换返回类型
-  export const post = <T = unknown>(
+  const response = await $fetch(url, { ...defaultOptions, ...opts })
-    endpoint: string, 
+  return response as unknown as T
-    body?: any, 
+}
-    config?: Omit<FetchOptions, 'method' | 'body'>
-  ): Promise<T> => {
-    return useClientRequest<T>(endpoint, { ...config, method: 'POST', body })
-  }
 
-  
+// GET请求
-  // DELETE请求
+export const get = <T = unknown>(endpoint: string, config?: Omit<FetchOptions, 'method'>): Promise<T> => {
-  export const del = <T = unknown>(
+  return useClientRequest<T>(endpoint, { ...config, method: 'GET' })
-    endpoint: string, 
+}
-    config?: Omit<FetchOptions, 'method'>
-  ): Promise<T> => {
-    return useClientRequest<T>(endpoint, { ...config, method: 'DELETE' })
-  }
 
-    // PUT请求
+// POST请求
-  export const put = <T = unknown>(
+export const post = <T = unknown>(endpoint: string, body?: any, config?: Omit<FetchOptions, 'method' | 'body'>): Promise<T> => {
-    endpoint: string, 
+  return useClientRequest<T>(endpoint, { ...config, method: 'POST', body })
-    body?: any, 
+}
-    config?: Omit<FetchOptions, 'method' | 'body'>
+
-  ): Promise<T> => {
+// DELETE请求
-    console.log({ ...config, method: 'PUT', body });
+export const del = <T = unknown>(endpoint: string, config?: Omit<FetchOptions, 'method'>): Promise<T> => {
-    
+  return useClientRequest<T>(endpoint, { ...config, method: 'DELETE' })
-    return useClientRequest<T>(endpoint, { ...config, method: 'PUT', body })
+}
-  }
+
+// PUT请求
+export const put = <T = unknown>(endpoint: string, body?: any, config?: Omit<FetchOptions, 'method' | 'body'>): Promise<T> => {
+  console.log({ ...config, method: 'PUT', body })
+
+  return useClientRequest<T>(endpoint, { ...config, method: 'PUT', body })
+}

composables/useFetchRequest.ts

@@ -10,6 +10,7 @@ const useServerRequest = async <T>(url: string, opts?: UseFetchOptions<T, unknow
     baseURL: runtimeConfig.public.apiBase,
     onRequest({ options }) {
       options.headers = options.headers || {}
+      
       if (token.value) {
         options.headers.set('Authorization', `Bearer ${token.value}`)
       }

composables/useMessage.ts

@@ -0,0 +1,81 @@
+import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
+export const useMessage = () => {
+  return {
+    // 消息提示
+    info(content: string) {
+      ElMessage.info(content)
+    },
+    // 错误消息
+    error(content: string) {
+      ElMessage.error(content)
+    },
+    // 成功消息
+    success(content: string) {
+      ElMessage.success(content)
+    },
+    // 警告消息
+    warning(content: string) {
+      ElMessage.warning(content)
+    },
+    // 弹出提示
+    alert(content: string, title: string) {
+      ElMessageBox.alert(content, title)
+    },
+    // 错误提示
+    alertError(content: string, title: string) {
+      ElMessageBox.alert(content, title, { type: 'error' })
+    },
+    // 成功提示
+    alertSuccess(content: string, title: string) {
+      ElMessageBox.alert(content, title, { type: 'success' })
+    },
+    // 警告提示
+    alertWarning(content: string, title: string) {
+      ElMessageBox.alert(content, title, { type: 'warning' })
+    },
+    // 通知提示
+    notify(content: string) {
+      ElNotification.info(content)
+    },
+    // 错误通知
+    notifyError(content: string) {
+      ElNotification.error(content)
+    },
+    // 成功通知
+    notifySuccess(content: string) {
+      ElNotification.success(content)
+    },
+    // 警告通知
+    notifyWarning(content: string) {
+      ElNotification.warning(content)
+    },
+    // 确认窗体
+    confirm(content: string, title?: string, options?: any) {
+      return ElMessageBox.confirm(content, title, {
+        type: 'warning',
+        ...options
+      })
+    },
+    // 删除窗体
+    delConfirm(content?: string, title?: string, options?: any) {
+      return ElMessageBox.confirm(content, title, {
+        type: 'warning',
+        ...options
+      })
+    },
+    // 导出窗体
+    exportConfirm(content?: string, title?: string, options?: any) {
+      return ElMessageBox.confirm(content, title, {
+        type: 'warning',
+        ...options
+      })
+    },
+    // 提交内容
+    prompt(content: string, title: string, options?: any) {
+      return ElMessageBox.prompt(content, title, {
+        type: 'warning',
+        ...options
+      })
+    }
+  }
+}

layouts/m.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+  const active = ref('home')
+</script>
+
+<template>
+  <div class="m">
+    <div class="scroll-container">
+      <slot />
+    </div>
+    <!-- 底部信息 -->
+    <div class="footer">
+      <van-tabbar v-model="active">
+        <van-tabbar-item name="home" icon="home-o">标签</van-tabbar-item>
+        <van-tabbar-item name="search" icon="search">标签</van-tabbar-item>
+        <van-tabbar-item name="friends" icon="friends-o">标签</van-tabbar-item>
+        <van-tabbar-item name="setting" icon="setting-o">标签</van-tabbar-item>
+      </van-tabbar>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  /* 移动端样式重置 - 只在移动端布局中生效 */
+  .m {
+    display: flex;
+    flex-direction: column;
+    background-color: #f8f8f8;
+    .scroll-container {
+      // flex: 1;
+      overflow-y: auto;
+      height: calc(100vh - 40px);
+    }
+    .footer {
+      height: auto;
+    }
+    /* 重置 body 的最小宽度限制 */
+    :global(body) {
+      min-width: unset !important;
+      width: 100% !important;
+      max-width: 100% !important;
+      background-color: #f8f8f8;
+    }
+
+    /* 重置 #__nuxt 容器的样式 */
+    :global(#__nuxt) {
+      min-width: unset !important;
+      width: 100% !important;
+      max-width: 100% !important;
+
+      // .page-content {
+      //   padding: 0 !important;
+      //   overflow-x: hidden !important;
+
+      //   .page-table-wrap {
+      //     padding: 8px !important;
+      //   }
+
+      //   .page-card {
+      //     padding: 8px !important;
+      //   }
+      // }
+    }
+
+    /* 移动端优化滚动条 */
+    :global(::-webkit-scrollbar) {
+      width: 4px !important;
+      height: 4px !important;
+    }
+  }
+</style>

middleware/login.global.ts

@@ -0,0 +1,12 @@
+import useUserStore from '~/stores/user'
+export default defineNuxtRouteMiddleware((to, from) => {
+  const { code, state, type } = to.query
+  if (code && state && type && import.meta.client) {
+    const userStore = useUserStore()
+    userStore.getToken({
+      code: code as string,
+      state: state as string,
+      type: type as string,
+    })
+  }
+})

middleware/systom.global.ts

@@ -6,13 +6,13 @@ export default defineNuxtRouteMiddleware((to, from) => {
     // 是否是移动端设备
     const isMobile = /(Android|webOS|iPhone|iPod|tablet|BlackBerry|Mobile)/i.test(navigator.userAgent)
     // 是否是手机端路由开头
-    const isRouterMobile = to.path.startsWith('/m')
+    const isRouterMobile = to.path.startsWith('/mobile')
 
     console.log(isMobile, isRouterMobile);
     
     // 移动端并且 不是/m开头路由
     if (isMobile && !isRouterMobile) {
-      return navigateTo(`/m`)
+      return navigateTo(`/mobile`)
     }
     // 不是移动端 是/m开头路由
     if (!isMobile && isRouterMobile) {

middleware/tdk.global.ts

@@ -0,0 +1,19 @@
+import { getTDKList } from '~/api/home/index'
+// middleware/tdk.global.ts
+export default defineNuxtRouteMiddleware(async (to) => {
+    const { data: tdkData } = await getTDKList()
+    // 获取当前路由
+    const currentPath = to.path;
+    // 根据当前路由获取对应的TDK数据
+    const currentTdk = tdkData?.find((item) => item.path === currentPath)
+    
+    if (currentTdk) {
+      useHead({
+        title: currentTdk.title,
+        meta: [
+          { name: 'description', content: currentTdk.describeText },
+          { name: 'keywords', content: currentTdk.keyword }
+        ]
+      })
+    }
+  })

nuxt.config.ts

@@ -12,7 +12,7 @@ export default defineNuxtConfig({
   debug: process.env.NODE_ENV === 'development', // 开启详细调试日志
 
   ssr: true,
-  modules: ['@unocss/nuxt', '@pinia/nuxt', '@element-plus/nuxt', 'pinia-plugin-persistedstate/nuxt'],
+  modules: ['@unocss/nuxt', '@pinia/nuxt', '@element-plus/nuxt', 'pinia-plugin-persistedstate/nuxt','@vant/nuxt'],
   unocss: {
     nuxtLayers: true,
   },
@@ -31,26 +31,31 @@ export default defineNuxtConfig({
       postcss: {
         plugins: [
           postcsspxtoviewport({
-            unitToConvert: 'px', // 要转化的单位
+            unitToConvert: 'px',
-            viewportWidth: 750, // UI设计稿的宽度
+            viewportWidth: 750,
-            unitPrecision: 6, // 转换后的精度，即小数点位数
+            unitPrecision: 6,
-            propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
+            propList: ['*'],
-            viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
+            viewportUnit: 'vw',
-            fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
+            fontViewportUnit: 'vw',
-            selectorBlackList: ['el-'], // 指定不转换为视窗单位的类名,例如van-（vantUI组件），
+            selectorBlackList: ['el-'],
-            minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
+            minPixelValue: 1,
-            mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
+            mediaQuery: true,
-            replace: true, // 是否转换后直接更换属性值
+            replace: true,
-            exclude: [/node_modules/, /^(?!.*\/pages\/m\/).*$/], // 排除node_modules和非pages/m目录下的文件
+            // 严格只允许 pages/mobile 下的文件被转换
-            landscape: false, // 是否处理横屏情况
+            // 使用强排除：排除 node_modules 和 所有不在 pages/mobile 下的文件
-            // 只转换pages下的m文件
+            exclude: [
-            include: [/pages\/m/],
+              /node_modules/,
+              /^(?!.*\/(pages|src)\/mobile\/).*$/
+            ],
+            landscape: false,
+            // 可选：进一步放宽 include，以便某些移动端专用布局文件也参与
+            include: [/\/pages\/mobile\//],
           }),
         ],
       },
     },
     optimizeDeps: {
-      include: ['naive-ui'],
+      include: ['element-plus','unocss'], // 预构建依赖项
     },
     // 生产环境构建优化
     build: {
@@ -137,7 +142,7 @@ export default defineNuxtConfig({
   },
 
   build: {
-    transpile: ['vueuc', '@css-render/vue3-ssr', '@tinymce/tinymce-vue', 'tinymce'],
+    transpile: process.env.NODE_ENV === 'production' ? ['lodash'] : [],
   },
   plugins: [
     // 在这里引入插件

package.json

@@ -1,5 +1,6 @@
 {
   "name": "nuxt-app",
+  "version": "1.0.0",
   "private": true,
   "type": "module",
   "scripts": {
@@ -16,12 +17,14 @@
     "@wangeditor/editor-for-vue": "^5.1.12",
     "decimal.js": "^10.6.0",
     "echarts": "^6.0.0",
+    "lodash": "^4.17.21",
     "mqtt": "^5.14.0",
     "nuxt": "^3.18.1",
     "pdfjs-dist": "^5.4.54",
     "pinia": "^3.0.3",
     "postcss-px-to-viewport": "^1.1.1",
     "qrcode.vue": "^3.6.0",
+    "vant": "^4.9.21",
     "vue": "^3.5.18",
     "vue-pdf-embed": "^2.1.3",
     "vue-router": "^4.5.1",

pages/channel/components/RightContent.vue

@@ -2,6 +2,7 @@
   <div class="ml-[19px] w-[100%]">
     <ChannelHeader v-if="Object.keys(lunTanRes || {}).length" v-model="lunTanRes"></ChannelHeader>
     <div
+      v-if="pageRes?.list.length"
       class="mb-[13px] box-border flex flex-1 flex-col cursor-pointer gap-[12px] border border-[#EEEEEE] rounded-[8px] border-solid bg-[#FFFFFF] px-[20px] py-[16px]"
     >
       <div
@@ -20,7 +21,7 @@
         <div class="w-[100px] flex flex-shrink-0 items-center justify-end">
           <span class="ellipsis text-[13px] color-[#96999f]">{{ item.creatorName }}</span>
           <!-- 删除 -->
-          <el-button v-if="false" type="danger" size="small" @click="handleDelete(item.postsId)">删除</el-button>
+          <el-button v-if="false" type="danger" size="small" @click.stop="handleDelete(item.postsId)">删除</el-button>
         </div>
       </div>
     </div>

pages/down-drawe-detail/[id].vue

@@ -1,6 +1,11 @@
 <template>
   <SeoHead :title="detail?.title" :description="detail?.description" :keywords="detail?.labels?.toString()" />
   <KlNavTab />
+  <div v-if="breadList && breadList.length > 1" class="mb-[-10px] mt-[20px] w-[1440px] mx-auto">
+    <el-breadcrumb :separator-icon="ArrowRight">
+      <el-breadcrumb-item v-for="(item, index) in breadList" :key="item.name">{{ item.name }}</el-breadcrumb-item>
+    </el-breadcrumb>
+  </div>
   <div class="ml-auto mr-auto mt-[20px] w-[1440px]">
     <div class="flex items-center">
       <div
@@ -56,7 +61,11 @@
           {{ detail?.type === 1 ? '图纸' : detail?.type === 2 ? '文本' : '模型' }}中包含的文件
         </div>
         <div>
-          <div v-for="item in detail?.files" :key="item.id" class="flex items-center justify-between border-b-[1px] border-b-[#eee] border-b-solid py-[10px]">
+          <div
+            v-for="item in detail?.otherFiles"
+            :key="item.id"
+            class="flex items-center justify-between border-b-[1px] border-b-[#eee] border-b-solid py-[10px]"
+          >
             <!-- <img src="~/assets/images/avater.png" alt="" srcset="" class="h-30px w-30px" /> -->
             <div>
               <!-- <span class="ml-[10px] cursor-pointer" @click="handleDownloadPreview(item)">{{ item.title }}</span> -->
@@ -102,7 +111,7 @@
     </div>
     <div class="ml-[22px]">
       <div class="box-border min-h-[269px] w-[397px] border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] pa-[22px]">
-        <div class="mb-[10px]">图纸ID: {{ detail?.id }}</div>
+        <div class="mb-[10px]">图纸ID: {{ detail?.no }}</div>
         <div class="mb-[10px]">文件大小：{{ detail?.filesInfo?.fileSize || 0 }} </div>
         <!-- <div class="mb-10px">图纸版本：{{ detail.editionsName }} </div> -->
         <div class="mb-[10px]">图纸格式：{{ detail?.formatType?.toString() }}</div>
@@ -137,7 +146,7 @@
               <div class="h-[20px]">
                 <img src="~/assets/images/user4.png" alt="fans" class="w-[80%] rounded-full vertical-top" />
               </div>
-              <div class="relative top-[-3px] ml-[8px] text-[14px] text-[#666] font-normal">粉丝: {{ userInfo.fansCount || 0 }}</div>
+              <div class="relative top-[-3px] ml-[8px] text-[14px] text-[#666] font-normal">发帖数: {{ userInfo.postsNum || 0 }}</div>
             </div>
           </div>
 
@@ -176,11 +185,13 @@
 
 <script setup lang="ts">
   import dayjs from 'dayjs'
+  import { ArrowRight } from '@element-plus/icons-vue'
   import { downloadFile } from '~/utils/utils'
   import { useMessage } from '~/utils/useMessage'
   import { Warning } from '@element-plus/icons-vue'
   import SeoHead from '~/components/seo-head/index.vue'
   import CardPicture from '~/components/kl-card-picture/index.vue'
+  import { getDictTree } from '~/api/home/index'
   import { getDetail, getRelationRecommend, report, getUserInfo, getMainWork, createContent, createUserProject, deleteProject } from '~/api/drawe-detail/index'
   import KlNavTab from '~/components/kl-nav-tab/index.vue'
   import ThumBnail from './components/swiper.vue'
@@ -213,6 +224,20 @@
     })
   }
 
+  // 获取面包屑
+  const { data: breadList } = await useAsyncData(`breadList-detail-${route.params.id}}`, async () => {
+    const res = await getDictTree({ type: 1, id: detail.value?.projectType?.[0] })
+    const all = [
+      {
+        id: -1,
+        name: detail.value?.type === 1 ? '图纸库' : detail.value?.type === 3 ? '模型库' : '文本库',
+        isChildren: false,
+      },
+    ]
+    const arr = [...res.data, ...all]
+    return arr.reverse()
+  })
+
   // const init = () => {
   //   getDetail({ id }).then((res) => {
   //     if (res.code === 0) {
@@ -336,6 +361,7 @@
         comments: value,
         projectId: detail.value?.projectId,
         drawId: detail.value?.id,
+        type: detail.value?.type,
       }).then((res) => {
         if (res.code === 0) {
           ElMessage.success('举报成功')
@@ -355,6 +381,7 @@
       : await createContent({
           projectId: detail.value?.projectId,
           drawId: detail.value?.id,
+          type: detail.value?.type,
         })
     if (res.code === 0) {
       ElMessage.success(`${detail.value?.favoriteId ? '取消' : '收藏'}成功`)

pages/drawe/[projectType]/[pageNo]/[pageSize]/[[editions]]/[[source]].vue

@@ -1,6 +1,5 @@
 <template>
   <!-- 导航 -->
-  <SeoHead title="工程设计图纸下载_CAD设计图纸资源库" />
   <KlNavTab active="图纸" :type="1" />
   <div class="ma-auto w-[1440px]">
     <!-- 图纸分类 -->
@@ -63,6 +62,7 @@
     source: source.value || -1,
     type: 1,
     title: keywords.value,
+    recommend: source.value === -1 ? true : false,
   })
   // const result = reactive<pageRes>({
   //   list: [],
@@ -94,6 +94,7 @@
         editions: query.value.editions === '-1' ? '' : query.value.editions,
         source: query.value.source === -1 ? '' : query.value.source,
         projectType: query.value.projectType === '-1' ? '' : query.value.projectType,
+        recommend: query.value.source === -1 ? true: false,
       })
       return res.data
     },

pages/drawe/index.vue

@@ -1,6 +1,5 @@
 <template>
   <!-- 导航 -->
-  <SeoHead title="工程设计图纸下载_CAD设计图纸资源库" />
   <KlNavTab active="图纸" :type="1" />
   <div class="ma-auto w-[1440px]">
     <!-- 图纸分类 -->
@@ -56,6 +55,7 @@
     source: -1,
     type: 1,
     title: keywords.value,
+    recommend: true,
   })
   // const result = reactive<pageRes>({
   //   list: [],
@@ -80,13 +80,14 @@
   }
 
   const { data: result, refresh: getPage } = useAsyncData(
-    `draw-page-list-${query.value.projectType}-${query.value.editions}-${query.value.source}-${query.value.pageNo}-${query.value.pageSize}-${query.value.title}`,
+    `draw-page-list-drawe-${query.value.projectType}-${query.value.editions}-${query.value.source}-${query.value.pageNo}-${query.value.pageSize}-${query.value.title}`,
     async () => {
       const res = await page({
         ...query.value,
         editions: query.value.editions === '-1' ? '' : query.value.editions,
         source: query.value.source === -1 ? '' : query.value.source,
         projectType: query.value.projectType === '-1' ? '' : query.value.projectType,
+        recommend: query.value.source === -1 ? true: false,
       })
       return res.data
     },

pages/foreign/[projectType]/[pageNo]/[pageSize]/[[editions]]/[[source]].vue

@@ -26,7 +26,6 @@
 </template>
 <script setup lang="ts">
   import KlNavTab from '~/components/kl-nav-tab/index.vue'
-  import KlWallpaperCategory from '~/components/kl-wallpaper-category/index.vue'
   import RecommendedColumnsV2 from '~/components/foreign-components/RecommendedColumnsV2.vue'
   import BannerTips from '~/components/foreign-components/BannerTips.vue'
   // import FeaturedSpecials from './components/FeaturedSpecials.vue'

pages/foreign/index.vue

@@ -35,13 +35,19 @@
   import { page } from '~/api/upnew/index'
   import type { pageRes, pageReq } from '~/api/upnew/types'
 
-  const query = reactive<pageReq>({
+  const query = reactive<
+    pageReq & {
+      isDomestic: number
+    }
+  >({
     pageNo: 1,
     pageSize: 10,
     projectType: '-1',
     editions: '-1',
     source: -1,
     type: 1,
+    /**是否是国内: 1是 0否 */
+    isDomestic: 1,
   })
   // const result = reactive<pageRes>({
   //   list: [],

pages/home/components/LoginForm.vue

@@ -2,7 +2,7 @@
   <div class="login-container flex flex-col justify-between">
     <div class="ma-auto mt-[25px] w-[100%] flex flex-col items-center">
       <el-image
-        :src="userStore.userInfoRes.avatar || 'https://tuxixi.oss-cn-chengdu.aliyuncs.com/avater.png'"
+        :src="userStore.userInfoRes.avatar || 'https://static.tuxixi.net/1757297277142/2025/09/08/10/07/57/tuxixi.png'"
         alt=""
         srcset=""
         class="h-[69px] w-[69px] rd-[50%]"
@@ -11,7 +11,7 @@
         @click="handleUserInfo"
       />
       <div class="mt-[10px] text-[16px] text-[#333333] font-normal flex items-center">
-        Hi，{{ userStore.userInfoRes.nickname || '欢迎访问~' }}
+        Hi，{{ userStore.userInfoRes.nickname || '欢迎访问图夕夕' }}
         <img v-if="userStore.userInfoRes.vipLevel === 1" src="~/assets/svg/vip.svg" alt="" class="relative top-[1px]" />
         <img v-if="userStore.userInfoRes.vipLevel === 2" src="~/assets/svg/svip.svg" alt="" class="relative top-[1px]" />
       </div>
@@ -102,19 +102,19 @@
   }
 
   const handleLogin = () => {
-      app.$openLogin()
+    app.$openLogin()
   }
 
   const handleRegister = () => {
-      app.$openRegister()
+    app.$openRegister()
   }
 
   const handleLoginPhone = () => {
-      app.$openLogin('verify')
+    app.$openLogin('verify')
   }
 
   const handleLoginEmail = () => {
-      app.$openLoginEmail()
+    app.$openLoginEmail()
   }
 
   const handleUserInfo = () => {
@@ -129,10 +129,9 @@
 
   // 推出登录
   const handleLoginOut = () => {
-    REFRESHTOKEN.removeToken()
+    clearNuxtState(['token', 'userInfo'])
-    userStore.setToken('')
+    userStore.logout()
-    userStore.setUserId('')
+    userStore.$reset()
-    userStore.setRefreshToken('')
     window.location.reload()
   }
 

pages/home/components/MainContent.vue

@@ -2,27 +2,19 @@
 <template>
   <div class="main-content">
     <div class="flex">
-      <div class="h-424px w-957px">
+      <div class="h-[424px] w-[957px]">
         <el-carousel height="424px" indicator-position="none">
           <el-carousel-item v-for="(item, index) in bannerList" :key="index">
-            <el-image
+            <el-image :src="item.content" class="w-[100%]" :class="{ 'cursor-pointer': item.url }" fit="cover" @click="handleClick(item.url)" />
-              :src="item.content"
-              class="w-100%"
-              :class="{ 'cursor-pointer': item.url }"
-              fit="cover"
-              @click="handleClick(item.url)"
-            />
           </el-carousel-item>
         </el-carousel>
       </div>
       <LoginForm />
     </div>
-    <div
+    <div class="box-border h-[56px] w-[1219px] flex items-center border border-[#EEEEEE] border-solid border-t-none bg-[#FFFFFF] pl-[10px] line-height-[46px]">
-      class="box-border h-56px w-1219px flex items-center border border-[#EEEEEE] border-solid border-t-none bg-[#FFFFFF] pl-10px line-height-46px"
+      <img src="~/assets/images/voice.png" alt="" srcset="" class="mr-[10px] h-[15px] w-[16px]" />
-    >
-      <img src="~/assets/images/voice.png" alt="" srcset="" class="mr-10px h-15px w-16px" />
       <Vue3Marquee :duration="10" direction="normal" pause-on-hover>
-        · 经典来袭，SolidWorks装配经典案例之气动发动机
+        <template v-for="(item, index) in noticeList" :key="index"> {{ item }} </template>
       </Vue3Marquee>
     </div>
   </div>
@@ -33,7 +25,7 @@
   import LoginForm from './LoginForm.vue'
   import { Vue3Marquee } from 'vue3-marquee'
 
-  import { getSettingPage } from '~/api/home/index'
+  import { getSettingPage, getNoticeList } from '~/api/home/index'
 
   const pageReq = reactive({
     type: 1,
@@ -50,6 +42,9 @@
       navigateTo(url)
     }
   }
+
+  const { data: noticeList } = await getNoticeList()
+  console.log(noticeList)
 </script>
 
 <style scoped lang="scss">

pages/home/components/SideMenu.vue

@@ -169,7 +169,7 @@
   .menu-item {
     /* position: relative; */
     text-align: center;
-    padding: 10px 24px;
+    padding: 9px 24px;
     cursor: pointer;
     /* transition: all 0.3s ease; */
     color: #333;

pages/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="ma-auto w-1440px">
+    <SeoHead :title="tdkData?.title" :description="tdkData?.describeText" :keywords="tdkData?.keyword" />
     <!-- 搜索 -->
     <KlSearch></KlSearch>
     <!-- 菜单 -->
@@ -29,6 +30,12 @@
   import PopularDrawings from '~/pages/home/components/PopularDrawings.vue'
   import Leaderboard from '~/pages/home/components/Leaderboard.vue'
   import LearningRecommendations from '~/pages/home/components/LearningRecommendations.vue'
+  import { getTDK } from '~/api/home/index'
+
+  const { data: tdkData } = useAsyncData('get-tdk-home', async () => {
+    const res = await getTDK()
+    return res.data
+  })
 </script>
 
 <style scoped>

pages/m/index.vue

@@ -1,11 +0,0 @@
-<template>
-  <div>
-    <h1>Mobile Page</h1>
-  </div>
-</template>
-
-<script setup lang="ts">
-  // Mobile specific logic can be added here
-</script>
-
-<style lang="scss" scoped></style>

pages/mobile/channel/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="page-channel">
+    <div class="text">交流频道</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: 'm' })
+</script>
+
+<style scoped>
+.page-channel { padding: 16px; }
+.text { font-size: 16px; }
+</style>

pages/mobile/find/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="page-find">
+    <div class="text">发现</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: 'm' })
+</script>
+
+<style scoped>
+.page-find { padding: 16px; }
+.text { font-size: 16px; }
+</style>

pages/mobile/gloabal-cad-drawings/index.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="container">
+    <!-- 设计图列表 -->
+    <div class="design-list">
+      <div
+        class="design-item"
+        v-for="(item, index) in designList"
+        :key="index"
+      >
+        <div class="design-preview">
+          <img :src="item.image" alt="preview" />
+        </div>
+        <div class="design-info">
+          <div class="design-title">{{ item.title }}</div>
+          <div class="design-author">by:{{ item.author }}</div>
+
+          <div class="design-stats">
+            <div class="stat-item">
+              <span class="iconfont">👁</span>
+              <span>{{ item.views }}</span>
+            </div>
+            <div class="stat-item">
+              <span class="iconfont">👍</span>
+              <span>{{ item.likes }}</span>
+            </div>
+            <div class="stat-item">
+              <span class="iconfont">💬</span>
+              <span>{{ item.comments }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="design-action">
+          <button class="view-btn" @click="viewDesign(index)">查看</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: 'm' })
+import { ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+const router = useRouter()
+const route = useRoute()
+
+const designList = ref([
+  { title: '高压细水雾灭火推车描述', author: '赵其', image: '/static/images/activity1.png', views: 128, likes: 16, comments: 35 },
+  { title: '高压细水雾灭火推车描述', author: '赵其', image: '/static/images/activity2.png', views: 128, likes: 16, comments: 35 },
+  { title: '高压细水雾灭火推车描述', author: '赵其', image: '/static/images/activity1.png', views: 128, likes: 16, comments: 35 },
+  { title: '高压细水雾灭火推车描述', author: '赵其', image: '/static/images/activity2.png', views: 128, likes: 16, comments: 35 },
+])
+
+function viewDesign(index: number) {
+  router.push({ path: '/mobile/design-detail', query: { id: String(index) } })
+}
+
+onMounted(() => {
+  const titleFromQuery = (route.query.titleName as string) || '详情'
+  if (titleFromQuery) {
+    document.title = decodeURIComponent(titleFromQuery)
+  }
+})
+</script>
+
+<style lang="scss">
+// 变量定义
+$primary-color: #007aff;
+$text-color: #333;
+$secondary-text: #666;
+$light-text: #999;
+$bg-color: #fff;
+$white: #fff;
+$border-color: #eee;
+$border-radius: 10rpx;
+$mask-bg: rgba(0, 0, 0, 0.5);
+
+.container {
+  padding: 0;
+  background-color: $bg-color;
+  position: relative;
+}
+
+.design-list {
+  padding: 10rpx 20rpx;
+
+  .design-item {
+    display: flex;
+    margin-bottom: 20rpx;
+    background-color: $white;
+    border-radius: $border-radius;
+    border: 1px solid $border-color;
+    padding: 20rpx;
+    position: relative;
+    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
+
+    .design-preview {
+      width: 220rpx;
+      height: 160rpx;
+      overflow: hidden;
+      border: 1px solid $border-color;
+
+      image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .design-info {
+      flex: 1;
+      padding: 0 20rpx;
+
+      .design-title {
+        font-size: 27rpx;
+        margin-bottom: 10rpx;
+      }
+
+      .design-author {
+        font-size: 25rpx;
+        color: $light-text;
+        margin-bottom: 30rpx;
+      }
+    }
+
+    .design-stats {
+      display: flex;
+
+      .stat-item {
+        display: flex;
+        align-items: center;
+        margin-right: 20rpx;
+        font-size: 24rpx;
+        color: $light-text;
+
+        .iconfont {
+          margin-right: 5rpx;
+        }
+      }
+    }
+
+    .design-action {
+      position: absolute;
+      right: 20rpx;
+      bottom: 20rpx;
+
+      .view-btn {
+        background-color: $primary-color;
+        color: $white;
+        font-size: 26rpx;
+        padding: 0rpx 25rpx;
+        border-radius: 5rpx;
+      }
+    }
+  }
+}
+</style>

pages/mobile/index.vue

@@ -0,0 +1,571 @@
+<template>
+  <div class="contains content">
+    <div class="search-container">
+      <van-search shape="round" class="vant-input" background="#fff" placeholder="请输入搜索关键词" />
+    </div>
+
+    <!-- Banner Section -->
+    <div class="banner-section">
+      <div class="banner-swiper">
+        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+          <van-swipe-item>
+            <img src="~/assets/images/banner.png" alt="banner" />
+          </van-swipe-item>
+          <van-swipe-item>
+            <img src="~/assets/images/banner.png" alt="banner" />
+          </van-swipe-item>
+          <van-swipe-item>
+            <img src="~/assets/images/banner.png" alt="banner" />
+          </van-swipe-item>
+          <van-swipe-item>
+            <img src="~/assets/images/banner.png" alt="banner" />
+          </van-swipe-item>
+        </van-swipe>
+      </div>
+    </div>
+
+    <!-- Category Grid -->
+    <div class="category-grid">
+      <!-- First Row -->
+      <div class="category-row">
+        <div class="category-item" @click="navigateTo('图纸')">
+          <div class="category-icon">
+            <img src="~/assets/images/tuzhi (3).png" alt="banner" />
+          </div>
+          <span class="category-text">图纸</span>
+        </div>
+
+        <div class="category-item" @click="navigateTo('文本')">
+          <div class="category-icon">
+            <img src="~/assets/images/tuzhi (2).png" alt="banner" />
+          </div>
+          <span class="category-text">文本</span>
+        </div>
+
+        <div class="category-item" @click="navigateTo('模型')">
+          <div class="category-icon">
+            <img src="~/assets/images/tuzhi (1).png" alt="banner" />
+          </div>
+          <span class="category-text">模型</span>
+        </div>
+
+        <div class="category-item" @click="navigateTo('community')">
+          <div class="category-icon">
+            <img src="~/assets/images/tuzhi (4).png" alt="banner" />
+          </div>
+          <span class="category-text">牛人社区</span>
+        </div>
+      </div>
+
+      <!-- Second Row -->
+      <div class="category-row mb-[10px]!">
+        <div class="category-item" @click="navigateTo('international')">
+          <div class="category-icon">
+            <img src="~/assets/images/tuzhi (5).png" alt="banner" />
+          </div>
+          <span class="category-text">国外专区</span>
+        </div>
+
+        <div class="category-item" @click="navigateTo('channel')">
+          <div class="category-icon">
+            <img src="~/assets/images/tuzhi (6).png" alt="banner" />
+          </div>
+          <span class="category-text">交流频道</span>
+        </div>
+
+        <div class="category-item"></div>
+        <div class="category-item"></div>
+      </div>
+    </div>
+  </div>
+  <!--  -->
+  <div class="divider"></div>
+  <div class="contains content">
+    <!--最新活动 -->
+    <div class="activity-section">
+      <div class="section-header">
+        <span class="section-title">最新活动</span>
+        <a href="/mobile/activity/list" class="view-all">
+          <span>查看全部</span>
+          <span class="chevron">></span>
+        </a>
+      </div>
+
+      <div class="activity-scroll">
+        <div class="activity-container">
+          <div
+            class="activity-card"
+            v-for="(item, index) in activityList"
+            :key="index"
+            @click="goToActivity(item)"
+            :style="{ marginRight: index === activityList.length - 1 ? '0px' : '9px' }"
+          >
+            <img :src="item.image" class="activity-image" alt="activity" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="divider"></div>
+  <div class="contains content">
+    <!-- 推荐功能 -->
+    <div class="recommend-section">
+      <div class="tab-navigation">
+        <div v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: currentTab === index }" @click="switchTab(index)">
+          <span>{{ tab.title }}</span>
+        </div>
+        <button class="view-all" @click="viewAll">
+          <span>查看全部</span>
+          <span class="icon-right">></span>
+        </button>
+      </div>
+
+      <!-- 内容区域 -->
+      <div class="design-list">
+        <div class="design-item" v-for="(item, index) in items" :key="index">
+          <div class="design-preview">
+            <img :src="activity2" mode="aspectFit"></img>
+          </div>
+          <div class="design-info">
+            <div class="design-title">{{ item.title }}</div>
+            <div class="design-author">by:{{ item.author }}</div>
+
+            <div class="design-stats">
+              <div class="stat-item">
+                <img class="img1" src="~/assets/images/home-l (2).png" alt="banner" />
+                <span>{{ item.views }}</span>
+              </div>
+              <div class="stat-item">
+                <img class="img2" src="~/assets/images/home-l (3).png" alt="banner" />
+                <span>{{ item.likes }}</span>
+              </div>
+              <div class="stat-item">
+                <img class="img3" src="~/assets/images/home-l (1).png" alt="banner" />
+                <span>{{ item.comments }}</span>
+              </div>
+            </div>
+          </div>
+          <div class="design-action">
+            <button class="view-btn">查看</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useRouter } from 'vue-router'
+  import activity1 from '~/assets/images/activity1.png'
+  import activity2 from '~/assets/images/activity2.png'
+  import activity3 from '~/assets/images/activity2.png'
+  definePageMeta({ 
+    layout: 'm' 
+  })
+  
+  const router = useRouter()
+
+  function navigateTo(category: string) {
+    router.push({ path: '/mobile/gloabal-cad-drawings', query: { titleName: encodeURIComponent(category) } })
+  }
+
+  const activityList = ref([
+    { id: 1, title: '积分兑换有好礼', image: activity1, url: '/mobile/activity/detail?id=1' },
+    { id: 2, title: 'CAD高效学习', image: activity2, url: '/mobile/activity/detail?id=2' },
+    { id: 3, title: '学习有奖', image: activity3, url: '/mobile/activity/detail?id=3' },
+  ])
+
+  function goToActivity(item: { url: string }) {
+    router.push(item.url)
+  }
+
+  const currentTab = ref(0)
+  const tabs = ref([
+    { title: '推荐图纸', type: 'drawings' },
+    { title: '推荐模型', type: 'models' },
+    { title: '推荐文本', type: 'documents' },
+  ])
+
+  function switchTab(index: number) {
+    currentTab.value = index
+  }
+
+  function viewAll() {
+    const type = tabs.value[currentTab.value].type
+    router.push(`/mobile/${type}/list`)
+  }
+
+  const items = [
+    {
+      id: 1,
+      title: '高压细水雾灭火推车描述',
+      author: '赵其',
+      image: '/static/images/activity1.png',
+      views: 128,
+      likes: 16,
+      comments: 35,
+      url: '/pages/drawings/detail?id=1',
+    },
+    {
+      id: 2,
+      title: '高压细水雾灭火推车描述',
+      author: '赵其',
+      image: '/static/images/activity2.png',
+      views: 128,
+      likes: 16,
+      comments: 35,
+      url: '/pages/drawings/detail?id=2',
+    },
+    {
+      id: 1,
+      title: '室内CAD模型设计室内CAD模型设计',
+      author: '张泽',
+      image: '/static/images/activity1.png',
+      views: 95,
+      likes: 12,
+      comments: 28,
+      url: '/pages/models/detail?id=1',
+    },
+    {
+      id: 1,
+      title: 'CAD设计规范文档',
+      author: '李华',
+      image: '/static/images/activity2.png',
+      views: 156,
+      likes: 23,
+      comments: 42,
+      url: '/pages/documents/detail?id=1',
+    },
+  ]
+
+  const viewDetail = (item: any) => {
+    console.log('View detail for:', item.title)
+    // uni.navigateTo({
+    //   url: item.url,
+    // });
+  }
+</script>
+
+<style scoped lang="scss">
+  // 变量定义
+  $primary-color: #007aff;
+  $text-color: #333;
+  $secondary-text: #666;
+  $light-text: #999;
+  $bg-color: #f0f4f9;
+  $white: #fff;
+  $border-color: #eee;
+  $border-radius: 15rpx;
+  .design-list {
+    .design-item {
+      display: flex;
+      margin-bottom: 20px;
+      background-color: $white;
+      border-radius: $border-radius;
+      border: 1px solid $border-color;
+      padding: 17px 10px;
+      box-sizing: border-box;
+      position: relative;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+
+      .design-preview {
+        width: 220px;
+        height: 168px;
+        overflow: hidden;
+
+        image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .design-info {
+        flex: 1;
+        padding: 0 20px;
+
+        .design-title {
+          font-size: 27px;
+          margin-bottom: 10px;
+        }
+
+        .design-author {
+          font-size: 25px;
+          color: $light-text;
+          margin-bottom: 30px;
+        }
+      }
+
+      .design-stats {
+        display: flex;
+
+        .stat-item {
+          display: flex;
+          align-items: center;
+          margin-right: 20px;
+          font-size: 24px;
+          color: $light-text;
+
+          img {
+            margin-right: 4px;
+          }
+
+          .img1 {
+            width: 32px;
+            height: 24px;
+          }
+          .img2 {
+            width: 26px;
+            height: 28px;
+          }
+          .img3 {
+            width: 28px;
+            height: 26px;
+          }
+        }
+      }
+
+      .design-action {
+        position: absolute;
+        right: 20px;
+        top: 70px;
+
+        .view-btn {
+          background-color: $primary-color;
+          color: $white;
+          font-size: 25px;
+          padding: 10px 26px !important;
+          border-radius: 5px;
+          border:none;
+        }
+      }
+    }
+  }
+  .recommend-section {
+    //   padding: 0 20rpx;
+    //   margin: 30rpx 0 50rpx;
+  }
+
+  .tab-navigation {
+    display: flex;
+    align-items: center;
+    margin-bottom: 25px;
+  }
+
+  .tab-item {
+    padding: 8px 0;
+    margin-right: 40px;
+    font-size: 29px;
+    color: #333;
+    position: relative;
+    transition: all 0.3s ease;
+
+    &.active {
+      color: #2970ff;
+      position: relative;
+
+      &::after {
+        content: '';
+        background-image: url('~/assets/images/bg-yy.png');
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        position: absolute;
+        bottom: 1px;
+        left: 0;
+        width: 100%;
+        height: 8px;
+      }
+    }
+  }
+
+  .view-all {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    font-size: 25px;
+    color: #666;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+  }
+  .view-all .icon-right {
+    margin-left: 4rpx;
+    font-size: 25px;
+  }
+  .activity-section {
+    margin: 21.53rpx 0;
+    //   padding: 0 20rpx;
+  }
+
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20rpx;
+  }
+
+  .section-title {
+    font-size: 31px;
+    font-weight: 500;
+    color: #333;
+  }
+
+  .view-all {
+    display: flex;
+    align-items: center;
+    font-size: 25px !important;
+    color: #666;
+    text-decoration: none;
+  }
+  .view-all .chevron {
+    margin-left: 4px;
+    font-size: 20rpx;
+  }
+
+  .activity-scroll {
+    width: 100%;
+    overflow-x: auto;
+    padding-left: 20rpx; // 左侧padding，与section对齐
+    margin-left: -20rpx; // 抵消父容器的padding
+  }
+
+  .activity-container {
+    display: inline-flex;
+    padding: 10px 0px 0px 0px !important; // 留出阴影空间
+  }
+
+  .activity-card {
+    width: 292px;
+    height: 125px;
+    border-radius: 12rpx;
+    overflow: hidden;
+    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+    transition: all 0.2s;
+
+    &:active {
+      transform: scale(0.98);
+      opacity: 0.9;
+    }
+  }
+
+  .activity-image {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  .search-container {
+    background-color: #fff;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex: 1;
+    .vant-input {
+      flex: 1;
+      padding: 0px !important;
+      /* 设置 Vant Search 内部输入高度 */
+      --van-search-input-height: 65px;
+      :deep(.van-search__content) {
+        min-height: 65px;
+      }
+      :deep(.van-field__control) {
+        height: 65px;
+        line-height: 65px;
+      }
+    }
+  }
+  .divider {
+    height: 17px;
+    background-color: #f8f8f8;
+    border-radius: 1px;
+  }
+  .content {
+    display: flex;
+    flex-direction: column;
+    background-color: #fff;
+    padding: 21px;
+    box-sizing: border-box;
+  }
+
+  .banner-section {
+    margin-top: 25px;
+    border-radius: 20px;
+    overflow: hidden;
+    height: 285px;
+  }
+
+  .banner-swiper {
+    width: 100%;
+    height: 100%;
+    .my-swipe {
+      height: 100%;
+      .van-swipe-item {
+        color: #fff;
+        font-size: 20px;
+        height: 100%;
+        text-align: center;
+        background-color: #39a9ed;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+
+  .slogan-main {
+    font-size: 48rpx;
+    font-weight: bold;
+    margin-bottom: 10rpx;
+  }
+
+  .slogan-sub {
+    font-size: 38rpx;
+    font-weight: bold;
+    background-color: rgba(109, 200, 255, 0.8);
+    align-self: flex-start;
+    padding: 5rpx 20rpx;
+    border-radius: 5rpx;
+  }
+
+  .banner-graphics {
+    flex: 1;
+    position: relative;
+  }
+
+  .category-grid {
+    margin-top: 33px;
+  }
+
+  .category-row {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 40px;
+  }
+
+  .category-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 22%;
+  }
+
+  .category-icon {
+    width: 78px;
+    height: 78px;
+    border-radius: 20rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 10rpx;
+    img {
+      width: 100%;
+      height: 100%;
+      margin-bottom: 17px;
+    }
+  }
+
+  .category-text {
+    font-size: 25px;
+    color: #191919;
+  }
+</style>

pages/mobile/message_notice/index.vue

@@ -0,0 +1,245 @@
+<template>
+  <div class="message-notice-container">
+    <div class="tab-navigation">
+      <div
+        v-for="(tab, index) in tabs"
+        :key="index"
+        :class="['tab-item', { active: activeTab === index }]"
+        @click="activeTab = index"
+      >
+        <span v-if="index === 0" class="iconfont icon-system"></span>
+        <span v-else-if="index === 1" class="iconfont icon-transaction"></span>
+        <span v-else class="iconfont icon-forum"></span>
+        {{ tab.name }}
+      </div>
+    </div>
+
+    <div class="message-content">
+      <template v-if="activeTab === 0">
+        <div
+          class="message-item"
+          v-for="(message, index) in systemMessages"
+          :key="index"
+        >
+          <div class="message-left">
+            <span class="iconfont icon-speaker"></span>
+            <span class="dot"></span>
+          </div>
+          <div class="message-body">
+            <div class="message-header">
+              <div class="message-title text-ellipsis">{{ message.title }}</div>
+              <div class="message-time">{{ message.time }}</div>
+            </div>
+            <div class="message-description">{{ message.content }}</div>
+          </div>
+        </div>
+      </template>
+
+      <template v-if="activeTab === 1">
+        <div class="empty-content">
+          <div class="notice-text">交易消息和论坛社区互动的图标统一下，样式一样</div>
+        </div>
+      </template>
+
+      <template v-if="activeTab === 2">
+        <div class="empty-content">
+          <div class="notice-text">交易消息和论坛社区互动的图标统一下，样式一样</div>
+        </div>
+      </template>
+    </div>
+  </div>
+  
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: 'm' })
+import { ref } from 'vue'
+
+const activeTab = ref(0)
+const tabs = ref([
+  { name: '系统消息', icon: 'icon-system' },
+  { name: '交易消息', icon: 'icon-transaction' },
+  { name: '论坛社区互动', icon: 'icon-forum' },
+])
+
+const systemMessages = ref([
+  { title: '图夕夕金币充值有优惠!', content: '图夕夕限时优惠, 微信冲500送50金币, 充200送10金币', time: '2025-03-05 17:00:57' },
+  { title: '图夕夕金币充值有优惠!', content: '图夕夕限时优惠, 微信冲500送50金币, 充200送10金币图夕夕限时优惠, 微信冲500送50金币, 充200送10金币', time: '2025-03-05 17:00:57' },
+])
+
+const transactionMessages = ref<any[]>([])
+const forumMessages = ref<any[]>([])
+</script>
+
+<style>
+page {
+  background-color: #f5f7fa;
+  height: 100%;
+}
+
+.message-notice-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.tab-navigation {
+  display: flex;
+  background-color: #fff;
+  border-bottom: 1px solid #eee;
+}
+
+.tab-item {
+  flex: 1;
+  padding: 30rpx 0;
+  text-align: center;
+  color: #666;
+  position: relative;
+  font-size: 28rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tab-item .iconfont {
+  font-size: 32rpx;
+  margin-right: 10rpx;
+}
+
+.tab-item.active {
+  color: #4082ff;
+  font-weight: 500;
+}
+
+.tab-item.active::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 25%;
+  width: 50%;
+  height: 6rpx;
+  background-color: #4082ff;
+}
+
+.icon-system:before {
+  content: "🔔";
+}
+
+.icon-transaction:before {
+  content: "💰";
+}
+
+.icon-forum:before {
+  content: "💬";
+}
+
+.icon-speaker:before {
+  content: "📢";
+}
+
+.message-content {
+  flex: 1;
+  padding: 20rpx;
+  background-color: #f5f7fa;
+}
+
+.message-item {
+  display: flex;
+  background-color: #fff;
+  padding: 30rpx;
+  margin-bottom: 16rpx;
+  border-radius: 8rpx;
+  align-items: flex-start;
+  border-left: 6rpx solid transparent;
+  position: relative;
+}
+
+.message-left {
+  position: relative;
+  margin-right: 20rpx;
+  width: 60rpx;
+  height: 60rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.message-left .iconfont {
+  font-size: 40rpx;
+  color: #4082ff;
+}
+
+.dot {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 16rpx;
+  height: 16rpx;
+  border-radius: 50%;
+  background-color: #ff4d4f;
+}
+
+.message-body {
+  flex: 1;
+  overflow: hidden;
+}
+
+.message-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12rpx;
+}
+
+.message-title {
+  font-weight: bold;
+  font-size: 28rpx;
+  color: #333;
+  flex: 1;
+}
+
+.message-time {
+  color: #999;
+  font-size: 24rpx;
+  text-align: right;
+  flex-shrink: 0;
+  margin-left: 20rpx;
+}
+
+.message-description {
+  color: #666;
+  font-size: 26rpx;
+  line-height: 1.5;
+}
+
+.empty-content {
+  height: 300rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #e6f0ff;
+  margin-top: 20rpx;
+  border-radius: 8rpx;
+}
+
+.notice-text {
+  color: #666;
+  font-size: 28rpx;
+}
+
+.page-title {
+  padding: 20rpx;
+  text-align: center;
+  font-size: 28rpx;
+  background-color: transparent;
+  color: #666;
+  border-top: 2rpx solid #eee;
+}
+
+.text-ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+</style>

pages/mobile/talent-detail/index.vue

@@ -0,0 +1,309 @@
+<template>
+  <view class="talent-detail">
+    <!-- 个人信息卡片 -->
+    <view class="profile-card">
+      <view class="profile-header">
+        <view class="left-section">
+          <image
+            class="avatar"
+            :src="talentInfo.avatar"
+            mode="aspectFill"
+          ></image>
+          <view class="basic-info">
+            <view class="name-row">
+              <text class="name">{{ talentInfo.name }}</text>
+              <view class="tags">
+                <view
+                  class="tag"
+                  v-for="(tag, index) in talentInfo.tags"
+                  :key="index"
+                  >{{ tag }}</view
+                >
+              </view>
+            </view>
+            <text class="education">毕业院校：{{ talentInfo.education }}</text>
+          </view>
+        </view>
+        <div class="follow-btn" @click="followTalent">
+          {{ isFollowed ? "已关注" : "+ 关注" }}
+        </div>
+      </view>
+
+      <!-- 数据统计 -->
+      <view class="stats">
+        <view class="stat-item works">
+          <text class="stat-number">{{ talentInfo.worksCount }}</text>
+          <text class="stat-label">作品量</text>
+        </view>
+        <!-- 加跟竖线 隔离下 -->
+        <view class="stat-item-line"></view>
+        <view class="stat-item fans">
+          <text class="stat-number">{{ talentInfo.fansCount }}</text>
+          <text class="stat-label">粉丝量</text>
+        </view>
+      </view>
+      <!-- 个人简介 -->
+      <view class="section-header">
+        <image class="crown-icon" src="/static/images/crown.png"></image>
+        <text class="section-title">个人简介</text>
+      </view>
+      <text class="intro-text">{{ talentInfo.introduction }}</text>
+    </view>
+
+    <!-- 选项卡导航 -->
+    <view class="tab-nav">
+      <view
+        v-for="(tab, index) in tabs"
+        :key="index"
+        class="tab-item"
+        :class="{ active: currentTab === index }"
+        @click="switchTab(index)"
+      >
+        <text>{{ tab }}</text>
+      </view>
+    </view>
+
+    <!-- 技术证书内容 -->
+    <view class="tab-content" v-if="currentTab === 0">
+      <!-- 技术证书列表 图片展示 -->
+      <TechnicalCertificates />
+    </view>
+
+    <!-- 个人履历内容 -->
+    <view class="tab-content" v-if="currentTab === 1">
+      <!-- 个人履历内容 -->
+      <Certificates :talentInfo="talentInfo" />
+    </view>
+
+    <!-- 作品展示内容 -->
+    <view class="tab-content" v-if="currentTab === 2">
+      <!-- 作品展示内容 -->
+      <Works :talentInfo="talentInfo" />
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: 'm' })
+import TechnicalCertificates from "~/components/m/detail-components/technicalCertificates.vue";
+import Certificates from "~/components/m/detail-components/certificates.vue";
+import Works from "~/components/m/detail-components/Works.vue";
+import { reactive, ref } from 'vue'
+
+const isFollowed = ref(false)
+const currentTab = ref(0)
+const tabs = ['技术证书', '个人履历', '作品展示']
+const talentInfo = reactive({
+  id: 1,
+  name: '王刚',
+  avatar: '/static/images/avater2.png',
+  tags: ['五金工具', '电子产品'],
+  education: '重庆工商大学',
+  worksCount: 876,
+  fansCount: 98,
+  introduction:
+    '你好！我是专注于工业设计和机械设计领域的专业设计师，擅长进行外观设计、结构设计、板金设计等各类工程设计工作。我拥有丰富的经验，能够为客户提供高质量的设计解决方案，包括PCB外壳设计、框架设计、运动仿真、逆向工程等。此外，我熟练使用Creo、CAD等设计软件，能够进行精准的3D建模、渲染、2D工程图绘制、CAD代画以及三维转二维等工作。',
+  certificates: [
+    { year: '2020年', description: '韩国内基211学府设计的一款月度采样机' },
+    { year: '2021年', description: '韩国内基211学府设计的一款月度采样机' },
+    { year: '2022年', description: '韩国内基211学府设计的一款月度采样机' },
+    { year: '2023年', description: '韩国内基211学府设计的一款月度采样机' },
+    { year: '2024年', description: '韩国内基211学府设计的一款月度采样机' },
+    { year: '2025年', description: '韩国内基211学府设计的一款月度采样机' },
+  ],
+})
+
+function followTalent() {
+  isFollowed.value = !isFollowed.value
+}
+function switchTab(index: number) {
+  currentTab.value = index
+}
+</script>
+
+<style lang="scss" scoped>
+.talent-detail {
+  min-height: 100vh;
+  background-color: #fff;
+  padding: 30rpx 30rpx 0;
+  background-image: url("~/assets/images/talent-detail-bg.png");
+  background-size: 100%;
+  background-repeat: no-repeat;
+  background-position: top;
+
+  // 个人信息卡片样式
+  .profile-card {
+    background-color: #fff;
+    border-radius: 12rpx;
+    padding: 30rpx;
+    margin-bottom: 20rpx;
+    border: 1px solid #eee;
+    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
+    margin-top: 164rpx;
+
+    .profile-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+
+      .left-section {
+        display: flex;
+        align-items: flex-start;
+
+        .avatar {
+          width: 120rpx;
+          height: 120rpx;
+          border-radius: 50%;
+          margin-right: 20rpx;
+        }
+
+        .basic-info {
+          display: flex;
+          flex-direction: column;
+
+          .name-row {
+            display: flex;
+            align-items: center;
+            margin-bottom: 10rpx;
+
+            .name {
+              font-size: 36rpx;
+              font-weight: bold;
+              margin-right: 20rpx;
+            }
+
+            .tags {
+              display: flex;
+
+              .tag {
+                font-size: 24rpx;
+                color: #1a65ff;
+                background-color: #e6f0ff;
+                padding: 4rpx 16rpx;
+                border-radius: 20rpx;
+                margin-right: 12rpx;
+              }
+            }
+          }
+
+          .education {
+            font-size: 28rpx;
+            color: #666;
+          }
+        }
+      }
+
+      .follow-btn {
+        width: 89rpx;
+        height: 44rpx;
+        border-radius: 7rpx;
+        border: 1px solid #d7d7d7;
+        text-align: center;
+        line-height: 44rpx;
+        font-size: 21rpx;
+        color: #0a6fff;
+      }
+    }
+
+    // 数据统计区域
+    .stats {
+      display: flex;
+      margin-top: 30rpx;
+      margin-left: 140rpx;
+
+      .stat-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .stat-number {
+          font-size: 40rpx;
+          font-weight: bold;
+          color: #333;
+          line-height: 1.2;
+        }
+
+        .stat-label {
+          font-size: 28rpx;
+          color: #999;
+          margin-top: 4rpx;
+        }
+      }
+
+      .stat-item-line {
+        width: 1px;
+        height: 90rpx;
+        background-color: #eee;
+        margin: 0 50rpx;
+      }
+    }
+
+    .section-header {
+      display: flex;
+      align-items: center;
+      margin-top: 40rpx;
+      margin-bottom: 20rpx;
+      width: 100%;
+      justify-content: center;
+      height: 56rpx;
+      background: rgba(26, 101, 255, 0.1);
+      border-radius: 28rpx;
+
+      .crown-icon {
+        width: 40.97rpx;
+        height: 35.42rpx;
+        margin-right: 10rpx;
+      }
+
+      .section-title {
+        font-size: 29rpx;
+        font-weight: bold;
+        color: #333;
+      }
+    }
+
+    .intro-text {
+      font-size: 24rpx;
+      color: #666;
+      line-height: 1.6;
+    }
+  }
+
+  // 选项卡导航
+  .tab-nav {
+    display: flex;
+    background-color: #fff;
+    border-radius: 12rpx 12rpx 0 0;
+
+    .tab-item {
+      padding: 24rpx 0;
+      margin-right: 60rpx;
+      position: relative;
+      font-size: 25rpx;
+      color: #666;
+      transition: all 0.3s ease;
+
+      &.active {
+        color: #1a65ff;
+
+        &::after {
+          content: "";
+          position: absolute;
+          left: 0;
+          bottom: 14rpx;
+          width: 100%;
+          height: 4rpx;
+          background-color: #1a65ff;
+        }
+      }
+    }
+  }
+
+  // 选项卡内容
+  .tab-content {
+    background-color: #fff;
+    border-radius: 0 0 12rpx 12rpx;
+    padding: 20rpx 0rpx;
+  }
+}
+</style>

pages/mobile/transaction_record/index.vue

@@ -0,0 +1,221 @@
+<template>
+  <div class="transaction-record">
+    <!-- Balance Card -->
+    <div class="balance-card">
+      <div class="balance-title">
+        <span>我的余额 (元)</span>
+        <span class="verify-text">🏅 资产保障中</span>
+      </div>
+      <div class="balance-amount">{{ balance.toFixed(2) }}</div>
+      <div class="action-buttons">
+        <div class="btn-recharge">充值</div>
+        <div class="btn-withdraw">提现</div>
+      </div>
+    </div>
+
+    <!-- Transaction Filter -->
+    <div class="transaction-filter">
+      <div class="filter-type">
+        <span>全部</span>
+      </div>
+      <div class="filter-date">
+        <label class="date-picker-trigger">
+          <span>当前时间: <span style="color:#4080ff">{{ currentMonth }}</span></span>
+          <input type="month" v-model="selectedMonth" @change="onMonthChange" />
+        </label>
+      </div>
+    </div>
+
+    <!-- Transaction List -->
+    <div class="transaction-list">
+      <div
+        v-for="(transaction, index) in transactions"
+        :key="index"
+        class="transaction-item"
+      >
+        <div class="transaction-info">
+          <span class="transaction-type">{{ transaction.type }}</span>
+          <span class="transaction-date">{{ transaction.date }}</span>
+        </div>
+        <div
+          class="transaction-amount"
+          :class="{ 'amount-positive': transaction.amount > 0 }"
+        >
+          <span>{{
+            transaction.amount > 0
+              ? "+" + transaction.amount
+              : transaction.amount
+          }}</span>
+          <span class="transaction-reference">{{ transaction.reference }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="transaction-footer">
+      <span>当前仅展示本月明细，切换查看更多</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: 'm' })
+import { ref, onMounted } from 'vue'
+
+const balance = ref(6357.0)
+const selectedMonth = ref('')
+const currentMonth = ref('')
+const transactions = ref([
+  { type: '转出到银行卡', date: '2024-03-10 15:38', amount: -3578, reference: '56784' },
+  { type: '转出到银行卡', date: '2024-03-10 15:38', amount: 3578, reference: '56784' },
+  { type: '转出到银行卡', date: '2024-03-10 15:38', amount: -3578, reference: '56784' },
+  { type: '转出到银行卡', date: '2024-03-10 15:38', amount: -3578, reference: '56784' },
+  { type: '转出到银行卡', date: '2024-03-10 15:38', amount: -3578, reference: '56784' },
+  { type: '转出到银行卡', date: '2024-03-10 15:38', amount: -3578, reference: '56784' },
+])
+
+function onMonthChange(e: Event) {
+  const value = (e.target as HTMLInputElement).value // yyyy-mm
+  if (!value) return
+  const [y, m] = value.split('-')
+  currentMonth.value = `${y}.${m}`
+}
+
+onMounted(() => {
+  const now = new Date()
+  const year = now.getFullYear()
+  const month = String(now.getMonth() + 1).padStart(2, '0')
+  currentMonth.value = `${year}.${month}`
+  selectedMonth.value = `${year}-${month}`
+})
+</script>
+
+<style>
+.transaction-record {
+  background-color: #f5f5f5;
+  padding-bottom: 20px;
+  height: 100%;
+}
+
+.balance-card {
+  background-color: white;
+  padding: 20px;
+  margin-bottom: 10px;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.balance-title {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  color: #666;
+  font-size: 14px;
+  margin-bottom: 10px;
+}
+
+.verify-text {
+  color: #4080ff;
+  font-size: 12px;
+  border: 1px solid #4080ff;
+  border-radius: 10px;
+  padding: 0 5px;
+  margin-left: 10px;
+}
+
+.balance-amount {
+  font-size: 32px;
+  font-weight: bold;
+  margin-bottom: 15px;
+}
+
+.action-buttons {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.btn-recharge,
+.btn-withdraw {
+  border: none;
+  padding: 8px 60rpx;
+  border-radius: 5px;
+  margin-right: 30rpx;
+  font-size: 28rpx;
+}
+
+.btn-recharge {
+  background-color: #4080ff;
+  color: white;
+}
+
+.btn-withdraw {
+  background-color: white;
+  border: 1px solid #ddd;
+  color: #333;
+}
+
+.transaction-filter {
+  display: flex;
+  justify-content: space-between;
+  padding: 15px;
+  font-size: 14px;
+  color: #666;
+}
+
+.transaction-list {
+  background-color: white;
+}
+
+.transaction-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 15px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.transaction-type {
+  font-size: 14px;
+  color: #333;
+  margin-bottom: 5px;
+  display: block;
+}
+
+.transaction-date {
+  font-size: 12px;
+  color: #999;
+  display: block;
+}
+
+.transaction-amount {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+  text-align: right;
+}
+
+.amount-positive {
+  color: #4caf50;
+}
+
+.transaction-reference {
+  font-size: 12px;
+  color: #999;
+  font-weight: normal;
+  margin-top: 5px;
+  display: block;
+}
+
+.transaction-footer {
+  text-align: center;
+  color: #999;
+  font-size: 12px;
+  padding: 15px;
+  background-color: white;
+  border-top: 1px solid #f0f0f0;
+}
+
+.date-picker-trigger {
+  display: flex;
+  align-items: center;
+}
+</style>

pages/mobile/user/index.vue

@@ -0,0 +1,345 @@
+<template>
+  <div class="user-container">
+    <!-- 顶部蓝色背景 -->
+    <div class="top-bg"></div>
+
+    <!-- 用户信息卡片 -->
+    <div class="user-card">
+      <!-- 用户信息 -->
+      <div class="user-info">
+        <img class="avatar" src="~/assets/images/avater2.png" />
+        <div class="login-info">
+          <div class="login-text">登录/注册</div>
+          <div class="login-desc">登录注册后享受更多精彩内容</div>
+        </div>
+        <!-- 设置图标 -->
+        <div class="setting-icon">⚙️</div>
+      </div>
+
+      <!-- 数据统计 -->
+      <div class="data-stats">
+        <div class="stat-item">
+          <div class="stat-num">200</div>
+          <div class="stat-text">金币余额（元）</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-num">135</div>
+          <div class="stat-text">今日浏览量</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-num">370</div>
+          <div class="stat-text">今日收益（元）</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 资源中心区域 -->
+    <div class="resource-section">
+      <div class="section-title">资源中心</div>
+
+      <div class="resource-grid">
+        <div class="resource-item">
+          <div class="resource-icon blue">
+            <img
+              src="~/assets/images/my_release.png"
+              alt=""
+              srcset=""
+              class="w-77rpx h-71rpx"
+            />
+          </div>
+          <span class="resource-text">我的发布</span>
+        </div>
+
+        <div class="resource-item">
+          <div class="resource-icon blue">
+            <img
+              src="~/assets/images/my_download.png"
+              alt=""
+              srcset=""
+              class="w-98rpx h-68rpx"
+            />
+          </div>
+          <span class="resource-text">我的下载</span>
+        </div>
+
+        <div class="resource-item">
+          <div class="resource-icon blue">
+            <img
+              src="~/assets/images/my_attention.png"
+              alt=""
+              srcset=""
+              class="w-76rpx h-77rpx"
+            />
+          </div>
+          <span class="resource-text">我的关注</span>
+        </div>
+
+        <div class="resource-item">
+          <div class="resource-icon blue">
+            <img
+              src="~/assets/images/my_collect.png"
+              alt=""
+              srcset=""
+              class="w-64rpx h-73rpx"
+            />
+          </div>
+          <span class="resource-text">我的收藏</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 功能列表 -->
+    <div class="function-list">
+      <!-- 安全中心 -->
+      <div class="function-item" @click="navigateTo('/mobile/safety')">
+        <div class="function-left">
+          <div class="function-icon orange">✅</div>
+          <span class="function-text">安全中心</span>
+        </div>
+        <span>›</span>
+      </div>
+
+      <!-- 消息中心 -->
+      <div class="function-item" @click="navigateTo('/mobile/message_notice')">
+        <div class="function-left">
+          <div class="function-icon blue">🔔</div>
+          <span class="function-text">消息中心</span>
+        </div>
+        <span>›</span>
+      </div>
+
+      <!-- 交易记录 -->
+      <div
+        class="function-item"
+        @click="navigateTo('/mobile/transaction_record')"
+      >
+        <div class="function-left">
+          <div class="function-icon green">🧾</div>
+          <span class="function-text">交易记录</span>
+        </div>
+        <span>›</span>
+      </div>
+
+      <!-- 关于我们 -->
+      <div class="function-item" @click="navigateTo('/mobile/about')">
+        <div class="function-left">
+          <div class="function-icon purple">ℹ️</div>
+          <span class="function-text">关于我们</span>
+        </div>
+        <span>›</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: 'm' })
+import { useRouter } from 'vue-router'
+const router = useRouter()
+function navigateTo(url: string) {
+  router.push(url)
+}
+</script>
+
+<style lang="scss" scoped>
+// 颜色变量
+$primary-color: #0080ff;
+$orange-color: #ff9500;
+$green-color: #34c759;
+$purple-color: #af52de;
+$text-primary: #333;
+$text-secondary: #999;
+$bg-color: #f7f7f7;
+$card-bg: #ffffff;
+$border-color: #f5f5f5;
+
+.user-container {
+  min-height: 100vh;
+  background-color: $bg-color;
+  position: relative;
+  padding-top: 127rpx;
+
+  // 顶部蓝色背景
+  .top-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 200rpx;
+    background-color: $primary-color;
+    z-index: 0;
+  }
+
+  // 用户信息卡片
+  .user-card {
+    position: relative;
+    margin: 0 20rpx;
+    padding: 30rpx;
+    background-color: $card-bg;
+    border-radius: 16rpx;
+    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+    z-index: 1;
+
+    .user-info {
+      display: flex;
+      align-items: center;
+
+      .avatar {
+        width: 120rpx;
+        height: 120rpx;
+        border-radius: 60rpx;
+        margin-right: 20rpx;
+        background-color: #f0f0f0;
+      }
+
+      .login-info {
+        flex: 1;
+
+        .login-text {
+          font-size: 34rpx;
+          font-weight: 500;
+          color: $text-primary;
+          margin-bottom: 8rpx;
+        }
+
+        .login-desc {
+          font-size: 24rpx;
+          color: $text-secondary;
+        }
+      }
+
+      .setting-icon {
+        padding: 10rpx;
+      }
+    }
+
+    // 数据统计
+    .data-stats {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 30rpx;
+
+      .stat-item {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .stat-num {
+          font-size: 36rpx;
+          font-weight: 500;
+          color: $text-primary;
+          margin-bottom: 10rpx;
+        }
+
+        .stat-text {
+          font-size: 24rpx;
+          color: $text-secondary;
+        }
+      }
+    }
+  }
+
+  // 资源中心
+  .resource-section {
+    margin: 20rpx;
+    padding: 30rpx;
+    background-color: $card-bg;
+    border-radius: 16rpx;
+
+    .section-title {
+      font-size: 30rpx;
+      font-weight: 500;
+      color: $text-primary;
+      margin-bottom: 30rpx;
+    }
+
+    .resource-grid {
+      display: flex;
+      justify-content: space-between;
+
+      .resource-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 25%;
+
+        .resource-icon {
+          width: 100rpx;
+          height: 100rpx;
+          border-radius: 50%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin-bottom: 16rpx;
+
+          &.blue {
+            // background-color: $primary-color;
+          }
+        }
+
+        .resource-text {
+          font-size: 28rpx;
+          color: $text-primary;
+        }
+      }
+    }
+  }
+
+  // 功能列表
+  .function-list {
+    margin: 20rpx;
+    background-color: $card-bg;
+    border-radius: 16rpx;
+    overflow: hidden;
+
+    .function-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 30rpx;
+      border-bottom: 1px solid $border-color;
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      .function-left {
+        display: flex;
+        align-items: center;
+
+        .function-icon {
+          width: 80rpx;
+          height: 80rpx;
+          border-radius: 50%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin-right: 20rpx;
+
+          &.orange {
+            background-color: $orange-color;
+          }
+
+          &.blue {
+            background-color: $primary-color;
+          }
+
+          &.green {
+            background-color: $green-color;
+          }
+
+          &.purple {
+            background-color: $purple-color;
+          }
+        }
+
+        .function-text {
+          font-size: 30rpx;
+          color: $text-primary;
+        }
+      }
+    }
+  }
+}
+</style>

pages/mobile/user_info/index.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="user-info-container">
+    <div class="info-item">
+      <div class="label">头像</div>
+      <div class="value">
+        <img :src="userInfo.avatar" alt="User Avatar" class="avatar" />
+      </div>
+    </div>
+
+    <div class="info-item">
+      <div class="label">用户名</div>
+      <div class="value">{{ userInfo.username }}</div>
+    </div>
+
+    <div class="info-item">
+      <div class="label">真实姓名</div>
+      <div class="value">
+        {{ userInfo.realName }}
+        <span v-if="userInfo.verified" class="verified-badge">已认证</span>
+      </div>
+    </div>
+
+    <div class="info-item">
+      <div class="label">手机号</div>
+      <div class="value">{{ userInfo.phone }}</div>
+    </div>
+
+    <div class="info-item">
+      <div class="label">邮箱</div>
+      <div class="value">{{ userInfo.email }}</div>
+    </div>
+
+    <div class="info-item">
+      <div class="label">城市</div>
+      <div class="value">{{ userInfo.city }}</div>
+    </div>
+
+    <div class="info-item">
+      <div class="label">技能标签</div>
+      <div class="value">
+        <span v-for="(tag, index) in userInfo.tags" :key="index" class="tag">
+          #{{ tag }}
+        </span>
+      </div>
+    </div>
+
+    <div class="info-item">
+      <div class="label">技能证书</div>
+      <div class="value certificates">
+        <img
+          v-for="(cert, index) in userInfo.certificates"
+          :key="index"
+          :src="cert"
+          alt="Certificate"
+          class="certificate-image"
+        />
+      </div>
+    </div>
+
+    <div class="info-item">
+      <div class="label">个人简介</div>
+      <div class="value bio">{{ userInfo.bio }}</div>
+    </div>
+  </div>
+  
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: 'm' })
+import { reactive } from 'vue'
+
+const userInfo = reactive({
+  avatar: "/static/images/avater2.png",
+  username: "王刚",
+  realName: "王刚",
+  verified: true,
+  phone: "138******96",
+  email: "651234754@qq.com",
+  city: "重庆",
+  tags: ["五金工具", "电子产品"],
+  certificates: [
+    "/static/images/cert1.jpg",
+    "/static/images/cert2.jpg",
+    "/static/images/cert3.jpg",
+  ],
+  bio: "你好！我是专注于工业设计和机械设计领域...",
+})
+</script>
+
+<style scoped>
+.user-info-container {
+  padding: 20px;
+  background-color: #f9f9f9;
+}
+
+.info-item {
+  display: flex;
+  padding: 12px 0;
+  border-bottom: 1px solid #eee;
+}
+
+.label {
+  width: 80px;
+  color: #666;
+  font-size: 14px;
+}
+
+.value {
+  flex: 1;
+  text-align: right;
+  color: #333;
+  font-size: 14px;
+}
+
+.avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.verified-badge {
+  background-color: #4080ff;
+  color: white;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  margin-left: 10px;
+}
+
+.tag {
+  margin-left: 8px;
+  color: #4080ff;
+}
+
+.certificates {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.certificate-image {
+  width: 60px;
+  height: 80px;
+  margin-left: 10px;
+  object-fit: cover;
+}
+
+.bio {
+  text-align: left;
+  line-height: 1.5;
+}
+</style>

pages/model/[projectType]/[pageNo]/[pageSize]/[[editions]]/[[source]].vue

@@ -1,6 +1,5 @@
 <template>
   <!-- 导航 -->
-  <SeoHead title="工程设计模型下载_CAD设计图纸资源库" />
   <KlNavTab active="模型" :type="3" />
   <div class="ma-auto w-[1440px]">
     <!-- 图纸分类 -->
@@ -63,6 +62,7 @@
     source: source.value || -1,
     type: 3,
     title: keywords.value,
+    recommend: source.value === -1 ? true: false,
   })
   // const result = reactive<pageRes>({
   //   list: [],
@@ -94,6 +94,7 @@
         editions: query.value.editions === '-1' ? '' : query.value.editions,
         source: query.value.source === -1 ? '' : query.value.source,
         projectType: query.value.projectType === '-1' ? '' : query.value.projectType,
+        recommend: query.value.source === -1 ? true: false,
       })
       return res.data
     },

pages/model/index.vue

@@ -1,6 +1,5 @@
 <template>
   <!-- 导航 -->
-  <SeoHead title="工程设计模型下载_CAD设计图纸资源库" />
   <KlNavTab active="模型" :type="3" />
   <div class="ma-auto w-[1440px]">
     <!-- 图纸分类 -->
@@ -53,6 +52,7 @@
     editions: '-1',
     source: -1,
     type: 3,
+    recommend: true,
   })
   // const result = reactive<pageRes>({
   //   list: [],
@@ -65,13 +65,14 @@
   }
 
   const { data: result } = useAsyncData(
-    `draw-page-list-${query.value.projectType}-${query.value.editions}-${query.value.source}-${query.value.pageNo}-${query.value.pageSize}`,
+    `draw-page-list-model-${query.value.projectType}-${query.value.editions}-${query.value.source}-${query.value.pageNo}-${query.value.pageSize}`,
     async () => {
       const res = await page({
         ...query.value,
         editions: query.value.editions === '-1' ? '' : query.value.editions,
         source: query.value.source === -1 ? '' : query.value.source,
         projectType: query.value.projectType === '-1' ? '' : query.value.projectType,
+        recommend: query.value.source === -1 ? true: false,
       })
       return res.data
     },

pages/personal-Center/index.vue

@@ -1,6 +1,6 @@
 <template>
   <KlNavTab />
-  <div class="ma-auto w-[1198px] flex justify-between">
+  <div class="mx-auto w-[1198px] flex justify-between">
     <div
       class="left mt-[25px] box-border h-[370px] w-[260px] border border-[#EEEEEE] rounded-[4px] border-solid bg-[#FFFFFF] text-[15px] text-[#333333] font-medium"
     >
@@ -15,7 +15,7 @@
         </div>
       </nuxt-link>
 
-      <nuxt-link to="/personal-Center/personal-profile" class="flex items-center justify-between py-[14px]">
+      <!-- <nuxt-link to="/personal-Center/personal-profile" class="flex items-center justify-between py-[14px]">
         <div class="flex items-center pl-[20px]">
           <img v-if="!route.path.startsWith('/personal-Center/personal-profile')" src="~/assets/images/user_zl.png" alt="" srcset="" class="h-[16px]" />
           <img v-else src="~/assets/images/个人资料 (1).png" alt="" srcset="" class="h-[16px]" />
@@ -34,6 +34,16 @@
         <div class="pr-[20px]">
           <el-icon><ArrowRight /></el-icon>
         </div>
+      </nuxt-link> -->
+      <nuxt-link to="/personal-Center/account-management" class="flex items-center justify-between py-[14px]">
+        <div class="flex items-center pl-[20px]">
+          <img v-if="!route.path.startsWith('/personal-Center/account-management')" src="~/assets/images/account.png" alt="" srcset="" class="h-[20px]" />
+          <img v-else src="~/assets/images/账户安全.png" alt="" srcset="" class="h-[20px]" />
+          <span class="ml-[14px]">账户管理</span>
+        </div>
+        <div class="pr-[20px]">
+          <el-icon><ArrowRight /></el-icon>
+        </div>
       </nuxt-link>
       <nuxt-link to="/personal-Center/resource-center" class="flex items-center justify-between py-[14px]">
         <div class="flex items-center pl-[20px]">
@@ -49,7 +59,7 @@
         <div class="flex items-center pl-[20px]">
           <img v-if="!route.path.startsWith('/personal-Center/trading-center')" src="~/assets/images/pay.png" alt="" srcset="" class="h-[20px]" />
           <img v-else src="~/assets/images/交易管理.png" alt="" srcset="" class="h-[20px]" />
-          <span class="ml-[12px]">交易中心</span>
+          <span class="ml-[12px]">交易记录</span>
         </div>
         <div class="pr-[20px]">
           <el-icon><ArrowRight /></el-icon>

pages/personal-Center/index/account-bind.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="box-border w-auto border border-[#EEEEEE] rounded-6px border-solid bg-[#FFFFFF] px-30px py-21px mt-10px">
+    <div class="flex flex-col justify-center text-[14px] text-[#333333] font-normal">
+      <div class="mt-[6px] flex items-center justify-between">
+        <div class="flex items-center">
+          <el-icon size="32" color="#007AFF"><Iphone /></el-icon>
+          <!-- <img src="~/assets/images/qq-v2.png" alt="" srcset="" class="h-[35px] w-[34px]" /> -->
+          <div class="ml-[19px] w-fit flex flex-col">
+            <div class="color-#333 text-15px mb-4px">手机号{{ user.mobile ? '（已绑定）' : '' }}</div
+            ><div class="color-#999">手机号可以用于登录帐号{{ user.mobile }}</div></div
+          >
+        </div>
+        <el-button :type="user.mobile ? 'danger' : 'primary'" class="ml-10px">{{ user.mobile ? '解绑' : '绑定' }}</el-button>
+      </div>
+      <div class="mt-[30px] flex items-center justify-between">
+        <div class="flex items-center">
+          <img src="~/assets/images/qq-v2.png" alt="" srcset="" class="h-[35px] w-[34px]" />
+          <div class="ml-[19px] w-fit flex flex-col">
+            <div class="color-#333 text-15px mb-4px">QQ{{ user.qqOpenId ? '（已绑定）' : '' }}</div
+            ><div class="color-#999">QQ可以用于登录帐号</div></div
+          >
+        </div>
+        <el-button :type="user.qqOpenId ? 'danger' : 'primary'" class="ml-10px" @click="handleBind('qq')">{{ user.qqOpenId ? '解绑' : '绑定' }}</el-button>
+      </div>
+      <div class="mt-[30px] flex items-center justify-between">
+        <div class="flex items-center">
+          <img src="~/assets/images/weixin-v2.png" alt="" srcset="" class="h-[35px] w-[34px]" />
+          <div class="ml-[19px] w-fit flex flex-col">
+            <div class="color-#333 text-15px mb-4px">微信{{ user.wxOpenId ? '（已绑定）' : '' }}</div
+            ><div class="color-#999">微信可以用于登录帐号</div></div
+          >
+        </div>
+        <el-button :type="user.wxOpenId ? 'danger' : 'primary'" class="ml-10px" @click="handleBind('wx')">{{ user.wxOpenId ? '解绑' : '绑定' }}</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { Iphone } from '@element-plus/icons-vue'
+  import { onMounted } from 'vue'
+  import { handleLoginQQ, handleLoginWechat } from '~/utils/login'
+  import { getUserInfo, cancelSocialBind } from '~/api/personal-center/index'
+  import type { UserExtendRespVO } from '~/api/personal-center/types'
+  import { useMessage } from '~/composables/useMessage'
+  const message = useMessage()
+  onMounted(() => {
+    getUser()
+  })
+
+  const user = ref({} as UserExtendRespVO)
+  const getUser = async () => {
+    const res = await getUserInfo()
+    console.log(res)
+    user.value = res.data
+  }
+
+  const handleBind = async (type: string) => {
+    if (type === 'qq') {
+      if (user.value.qqOpenId) {
+        const res = await message.confirm('确定解绑QQ吗？', '提示')
+        if (!res) return
+        cancelSocialBind({ type: 35, openid: user.value.qqOpenId }).then((res) => {
+          if (res.code === 0) {
+            ElMessage.success('解绑成功')
+            getUser()
+          }
+        })
+      } else {
+        handleLoginQQ()
+      }
+    }
+    if (type === 'wx') {
+      if (user.value.wxOpenId) {
+        const res = await message.confirm('确定解绑微信吗？', '提示')
+        if (!res) return
+        cancelSocialBind({ type: 32, openid: user.value.wxOpenId }).then((res) => {
+          if (res.code === 0) {
+            getUser()
+            ElMessage.success('解绑成功')
+          }
+        })
+      } else {
+        handleLoginWechat()
+      }
+    }
+  }
+</script>
+
+<style scoped></style>

pages/personal-Center/index/account-logout.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="box-border w-auto border border-[#EEEEEE] rounded-6px border-solid bg-[#FFFFFF] px-30px py-21px mt-10px">
+    <el-button type="danger" @click="handleClick">注销账号</el-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import useUserStore from '~/stores/user'
+  const userStore = useUserStore()
+  import { userLogout } from '~/api/personal-center/index'
+  const handleClick = () => {
+    console.log('注销账号')
+    ElMessageBox.confirm('确定注销账号吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }).then(async () => {
+      console.log('注销账号')
+      const res = await userLogout()
+      if (res.code === 0) {
+        ElMessage.success('注销成功')
+        navigateTo('/')
+        clearNuxtState(['token', 'userInfo'])
+        userStore.logout()
+        userStore.$reset()
+      }
+    })
+  }
+</script>

pages/personal-Center/index/account-management.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="box-border w-913px border border-[#EEEEEE] rounded-6px border-solid bg-[#FFFFFF] px-30px py-21px">
+    <el-tabs v-model="activeName" class="demo-tabs">
+      <el-tab-pane label="个人资料" name="个人资料">
+        <PersonalProfile />
+      </el-tab-pane>
+      <el-tab-pane label="账户安全" name="账户安全">
+       <AccountSecurityV2 />
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import AccountSecurityV2 from './account-security-v2.vue'
+  import PersonalProfile from './personal-profile.vue'
+  const activeName = ref('个人资料')
+</script>

pages/personal-Center/index/account-security-v2.vue

@@ -0,0 +1,37 @@
+<template>
+  <KlTabBar v-model="type" :data="tabBar" />
+  <div v-if="type === '修改密码'">
+    <AccountSecurity />
+  </div>
+  <div v-else-if="type === '账号绑定'">
+    <AccountBind />
+  </div>
+  <div v-else-if="type === '账号注销'">
+    <AccountLogout />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import KlTabBar from '~/components/kl-tab-bar/v2/index.vue'
+  import AccountSecurity from './account-security.vue'
+  import AccountBind from './account-bind.vue'
+  import AccountLogout from './account-logout.vue'
+
+  const tabBar = ref([
+    {
+      label: '修改密码',
+      value: '修改密码',
+    },
+    {
+      label: '账号绑定',
+      value: '账号绑定',
+    },
+    {
+      label: '账号注销',
+      value: '账号注销',
+    },
+  ])
+  const type = ref('修改密码')
+</script>
+
+<style lang="scss" scoped></style>