优化：去掉不必要的loading

更新：课程首页增加骨架屏
2025-12-12 11:57:43 +08:00 · 2025-12-12 10:22:44 +08:00
14 changed files with 408 additions and 223 deletions
--- a/api/config.ts
+++ b/api/config.ts
@@ -7,7 +7,7 @@ export const ENV = process.env.NODE_ENV || 'development';
 */
 const BASE_URL_MAP = {
  development: {
-		//MAIN: 'http://192.168.110.100:9300/pb/', // 张川川
+		// MAIN: 'http://192.168.110.100:9300/pb/', // 张川川
 		MAIN: 'https://global.nuttyreading.com/', // 线上
 		// PAYMENT: 'https://dev-pay.example.com', // 暂时用不到
 		// CDN: 'https://cdn-dev.example.com', // 暂时用不到
--- a/api/modules/auth.ts
+++ b/api/modules/auth.ts
@@ -8,7 +8,7 @@ import type { ILoginResponse } from '@/types/user'
 * @param code 验证码
 */
 export async function loginWithCode(tel: string, code: string) {
-  const res = await mainClient.request<IApiResponse<ILoginResponse>>({
+  const res = await mainClient.request<ILoginResponse>({
    url: 'book/user/registerOrLogin',
    method: 'GET',
    data: { tel, code }
@@ -22,7 +22,7 @@ export async function loginWithCode(tel: string, code: string) {
 * @param password 密码
 */
 export async function loginWithPassword(phone: string, password: string) {
-  const res = await mainClient.request<IApiResponse<ILoginResponse>>({
+  const res = await mainClient.request<ILoginResponse>({
    url: 'book/user/login',
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
--- a/api/modules/common.ts
+++ b/api/modules/common.ts
@@ -1,11 +1,9 @@
 // api/modules/common.ts
-import { mainClient } from '@/api/clients/main'
+import { mainClient, skeletonClient } from '@/api/clients'
 import type { IApiResponse } from '@/api/types'
 import type { IAgreement } from '@/types/user'
 import { useUserStore } from '@/stores/user'

-
-
 export const commonApi = {
 	/**
 	 * 发送邮箱验证码
@@ -24,7 +22,7 @@ export const commonApi = {
 	 * @param id 协议 ID (111: 用户协议, 112: 隐私政策)
 	 */
 	getAgreement: async (id: number) => {
-		const res = await mainClient.request<IApiResponse<IAgreement>>({
+		const res = await skeletonClient.request<IApiResponse<IAgreement>>({
 		  url: 'sys/agreement/getAgreement',
 		  method: 'POST',
 		  data: { id }
@@ -40,7 +38,7 @@ export const commonApi = {
 	 */
 	getMessageList(isBook: number, isMedical: number, isSociology: number) {
 		const userStore = useUserStore()
-		return mainClient.request<IMessageListResponse>({
+		return skeletonClient.request<IApiResponse>({
 		  url: userStore.token ? 'common/message/listByPage' : '/visitor/listByPage',
 		  method: 'POST',
 		  data: { isBook, isMedical, isSociology }
--- a/api/modules/course.ts
+++ b/api/modules/course.ts
@@ -36,7 +36,7 @@ export const courseApi = {
   * @returns 观看记录列表
   */
  getUserLateCourseList() {
-    return mainClient.request<IUserLateCourseListResponse>({
+    return skeletonClient.request<IUserLateCourseListResponse>({
      url: 'medical/home/getUserLateCourseList',
      method: 'POST',
      data: {}
@@ -56,7 +56,7 @@ export const courseApi = {
    limit: number
  }) {
 		const userStore = useUserStore()
-    return mainClient.request<IMarketCourseListResponse>({
+    return skeletonClient.request<IMarketCourseListResponse>({
      url: userStore.token ? 'medical/home/getMarketCourseList' : 'visitor/getMarketCourseList',
      method: 'POST',
      data
--- a/api/modules/cousre_subject_classification.ts
+++ b/api/modules/cousre_subject_classification.ts
@@ -8,6 +8,7 @@ import type {
  ICourseMedicalLabelsResponse
 } from '@/types/course'
 import { useUserStore } from '@/stores/user'
+import { skeletonClient } from '../clients'


 const client = createRequestClient({ baseURL: SERVICE_MAP.MAIN })
@@ -36,7 +37,7 @@ export const courseSubjectClassificationApi = {
   * @returns 分类数据
   */
  getCourseSoulTree() {
-    return client.request<ICourseCategoryResponse>({
+    return skeletonClient.request<ICourseCategoryResponse>({
      url: 'psyche/home/getPsycheLabels',
      method: 'POST',
      data: { id: 0 }
@@ -49,7 +50,7 @@ export const courseSubjectClassificationApi = {
   * @returns 分类数据
   */
  getCourseSociologyTree() {
-    return client.request<ICourseCategoryResponse>({
+    return skeletonClient.request<ICourseCategoryResponse>({
      url: 'sociology/home/getSociologyLabels',
      method: 'POST',
      data: { id: 0 }
--- a/api/modules/user.ts
+++ b/api/modules/user.ts
@@ -1,5 +1,5 @@
 // api/modules/user.ts
-import { mainClient } from '@/api/clients/main'
+import { mainClient, skeletonClient } from '@/api/clients'
 import { paymentClient } from '@/api/clients/payment'
 import type { IApiResponse } from '@/api/types'
 import type { 
@@ -17,7 +17,7 @@ import { SERVICE_MAP } from '@/api/config'
 * 获取用户信息
 */
 export async function getUserInfo() {
-  const res = await mainClient.request<IApiResponse<{ user: IUserInfo }>>({
+  const res = await skeletonClient.request<IApiResponse<{ user: IUserInfo }>>({
    url: 'common/user/getUserInfo',
    method: 'POST'
  })
--- a/components/Skeleton/Skeleton.vue
+++ b/components/Skeleton/Skeleton.vue
@@ -19,6 +19,9 @@ import LineList from './templates/LineList.vue'
 import BookCard from './templates/BookCard.vue'
 import ImageCard from './templates/ImageCard.vue'
 import BookInfo from './templates/BookInfo.vue'
+import Menu from './templates/Menu.vue'
+
+

 // 注册组件
 const components = {
@@ -28,6 +31,7 @@ const components = {
  'image-card': ImageCard,
  'book-card': BookCard,
  'book-info': BookInfo,
+  'menu': Menu
 }

 type RequestFn = () => Promise<any>
--- a/components/Skeleton/templates/Menu.vue
+++ b/components/Skeleton/templates/Menu.vue
@@ -0,0 +1,33 @@
+<template>
+  <view class="menu-box">
+     <wd-skeleton :row-col="grid" animation="gradient" />
+  </view>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  size?: any[],
+  count: number
+}>()
+const list = Array.from({ length: props.count }, (_, index) => (props.size || []))
+
+const grid = [
+  [
+    { width: '96rpx', height: '96rpx' },
+    { width: '96rpx', height: '96rpx' },
+    { width: '96rpx', height: '96rpx' },
+    { width: '96rpx', height: '96rpx' }
+  ]
+]
+</script>
+
+<style lang="scss" scoped>
+.menu-box {
+  padding: 40rpx 80rpx;
+  background-color: #f5f5f5;
+
+  :deep(.wd-skeleton) {
+    margin: 0 auto;
+  }
+}
+</style>
--- a/pages/course/index.vue
+++ b/pages/course/index.vue
@@ -31,80 +31,87 @@
      >{{ item }}</view>
    </view>
    <!-- 医学 -->
-    <view v-if="selectedFirstLevel === '医学'" class="newLeve2">
-      <view class="home_nar nomargin" style="padding: 0; background-color: #fff">
-        <view class="flexbox">
+    <Skeleton
+      v-if="selectedFirstLevel === '医学'"
+      ref="medicineMenuSkeletonRef"
+      theme="menu"
+      :request="getMedicineMenus"
+      @success="getMedicineMenusSuccess"
+    >
+      <template #content>
+        <view v-if="selectedFirstLevel === '医学'" class="newLeve2">
+          <view class="home_nar nomargin" style="padding: 0; background-color: #fff">
+            <view class="flexbox">
+              <view
+                :class="['hn_cl_tit', currentIndex == index ? 'active' : '']"
+                @click="curseClick(item, index)"
+                v-for="(item, index) in curseTagList"
+                :key="item.id"
+              >
+                <image :src="item.icon" mode="aspectFit"></image>
+                <text>{{ item.title }}</text>
+              </view>
+            </view>
+          </view>
          <view
-            :class="['hn_cl_tit', currentIndex == index ? 'active' : '']"
-            @click="curseClick(item, index)"
-            v-for="(item, index) in curseTagList"
-            :key="item.id"
+            class="fourBox"
+            style="padding: 0; padding-bottom: 8rpx"
+            v-if="sbuMedicalTagsList?.length > 0"
          >
-            <image :src="item.icon" mode="aspectFit"></image>
-            <text>{{ item.title }}</text>
+            <view
+              class="childrenBox fourIcon flexbox"
+              style="justify-content: space-around"
+            >
+              <view
+                class="item flexbox"
+                @click="curseClickJump(item)"
+                v-for="(item, index) in sbuMedicalTagsList"
+                :key="item.id"
+              >
+                <image
+                  :src="item.icon"
+                  mode="aspectFit"
+                  v-if="item.icon != '' && item.icon != null"
+                ></image>
+                <text>{{ item.title }}</text>
+              </view>
+            </view>
          </view>
        </view>
-      </view>
-      <view
-        class="fourBox"
-        style="padding: 0; padding-bottom: 8rpx"
-        v-if="sbuMedicalTagsList?.length > 0"
-      >
+      </template>
+    </Skeleton>
+    <!-- 心理学和国学 -->
+    <Skeleton
+      v-if="selectedFirstLevel === '心理学' || selectedFirstLevel === '国学'"
+      ref="menuSkeletonRef"
+      theme="menu"
+      :request="getMenus"
+    >
+      <template #content="{ data }">
        <view
-          class="childrenBox fourIcon flexbox"
-          style="justify-content: space-around"
+          v-if="data.labels.length > 0"
+          :class="[
+            {'sociology_cate_box': selectedFirstLevel === '国学'},
+            {'soul_cate_box': selectedFirstLevel === '心理学'}
+          ]"
        >
-          <view
-            class="item flexbox"
-            @click="curseClickJump(item)"
-            v-for="(item, index) in sbuMedicalTagsList"
-            :key="item.id"
-          >
-            <image
-              :src="item.icon"
-              mode="aspectFit"
-              v-if="item.icon != '' && item.icon != null"
-            ></image>
-            <text>{{ item.title }}</text>
-          </view>
-        </view>
-      </view>
-    </view>
-    <!-- 心理学 -->
-    <view v-if="selectedFirstLevel === '心理学'" class="soul_cate_box">
-      <scroll-view scroll-x="true">
-        <view class="cate_list" v-if="soulCateList.length > 0">
          <view
            class="cate_item_box"
-            v-for="(item, index) in soulCateList"
-            :key="index"
+            v-for="item in data.labels"
            @click="curseClickJump(item)"
          >
            <view class="cate_item_border">
-              <image :src="item.icon"></image>
+              <image
+                :src="item.icon"
+                mode="aspectFill"
+                style="width: 49rpx; height: 49rpx"
+              ></image>
            </view>
            <view class="cate_item_name">{{ item.title }}</view>
          </view>
        </view>
-      </scroll-view>
-    </view>
-    <!-- 国学 -->
-    <view v-if="selectedFirstLevel === '国学' && sociologyCateList.length > 0" class="sociology_cate_box">
-      <view
-        class="cate_item_box"
-        v-for="(v, i) in sociologyCateList"
-        @click="curseClickJump(v)"
-      >
-        <view class="cate_item_border">
-          <image
-            :src="v.icon"
-            mode="aspectFill"
-            style="width: 49rpx; height: 49rpx"
-          ></image>
-        </view>
-        <view class="cate_item_name">{{ v.title }}</view>
-      </view>
-    </view>
+      </template>
+    </Skeleton>

    <!-- 观看记录区域 -->
    <view class="learnBox" v-if="learnList.length > 0">
@@ -143,7 +150,7 @@
        <view class="newscoll">
          <swiper
            class="swiper"
-            interval="5000"
+            :interval="5000"
            circular
            autoplay
            vertical
@@ -163,58 +170,66 @@
    </view>

    <!-- 精彩试听区域 -->
-    <view class="learnBox" v-if="tryListenList.length > 0">
+    <view class="learnBox">
      <view class="titleBox flexbox">
        <image src="../../static/course/try_listen.png" mode="aspectFit"></image>
        <text>{{ $t('courseHome.tryListen') }}</text>
      </view>
-      <view class="learn flexbox shiting">
-        <view
-          class="item"
-          v-for="(item, index) in tryListenList"
-          :key="item.id"
-          @click="onPageJump('/pages/course/details/course', item.id, item.title)"
-        >
-          <view class="imgcontainer">
-            <image
-              v-if="item.image == '' || !item.image"
-              src="../../static/course/nobg.jpg"
-              mode="aspectFit"
+      <Skeleton
+        theme="image-card"
+        class=""
+        :size="Array(2).fill({ width: '48%', height: '260rpx' })"
+        :count="3"
+        :request="getTryListenList"
+      >
+        <template #content="{ data }">
+          <view v-if="data.courseList.records.length > 0" class="learn flexbox shiting">
+            <view
+              class="item"
+              v-for="(item, index) in data.courseList.records"
+              :key="item.id"
+              @click="onPageJump('/pages/course/details/course', item.id, item.title)"
            >
-            </image>
-            <image v-else :src="item.image"></image>
-          </view>
-          <view class="buyItems flexbox">
-            <view class="txt555">
-              {{ item.title }}
-            </view>
-            <view class="buybtn">
-              <span>{{ $t('courseHome.buy') }}</span>
+              <view class="imgcontainer">
+                <image
+                  v-if="item.image == '' || !item.image"
+                  src="../../static/course/nobg.jpg"
+                  mode="aspectFit"
+                >
+                </image>
+                <image v-else :src="item.image"></image>
+              </view>
+              <view class="buyItems flexbox">
+                <view class="txt555">
+                  {{ item.title }}
+                </view>
+                <view class="buybtn">
+                  <span>{{ $t('courseHome.buy') }}</span>
+                </view>
+              </view>
            </view>
          </view>
-        </view>
-      </view>
-      <view class="moreBox shiting">
-        <text @click="onPageJump('/pages/course/list/tryListen', 1, $t('courseHome.tryListen'))">{{ $t('courseHome.moreTryListen') }}</text>
-      </view>
+          <view class="moreBox shiting">
+            <text @click="onPageJump('/pages/course/list/tryListen', 1, $t('courseHome.tryListen'))">{{ $t('courseHome.moreTryListen') }}</text>
+          </view>
+        </template>
+      </Skeleton>
    </view>
  </view>
 </template>

 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { onShow, onHide, onPullDownRefresh, onPageScroll, onLoad } from '@dcloudio/uni-app'
-import { useI18n } from 'vue-i18n'
+import { onShow, onHide, onPullDownRefresh, onPageScroll } from '@dcloudio/uni-app'
 import { courseApi } from '@/api/modules/course'
 import { courseSubjectClassificationApi } from '@/api/modules/cousre_subject_classification'
 import { commonApi } from '@/api/modules/common'
 import { getNotchHeight } from '@/utils/system'
 // import { onPageJump } from '@/utils'
-import type { IMedicalTag, ICourse, INews } from '@/types/course'
+import type { ICategory, ICourse, INews } from '@/types/course'
 import { useUserStore } from '@/stores/user'

 const userStore = useUserStore()
-const { t } = useI18n()

 // 系统信息
 const scrollTop = ref<number>(0)            // 滚动位置
@@ -229,41 +244,25 @@ const handleSearch = ({ value }: { value: string }) => {
 }

 // 分类相关
-const curseTagList = ref<IMedicalTag[]>([])           // 一级分类标签列表
-const sbuMedicalTagsList = ref<IMedicalTag[]>([])     // 二级分类标签列表
+const curseTagList = ref<ICategory[]>([])           // 一级分类标签列表
+const sbuMedicalTagsList = ref<ICategory[]>([])     // 二级分类标签列表
 const currentIndex = ref<number>(0)                    // 当前选中的一级分类索引
-const currentItem = ref<IMedicalTag | null>(null)     // 当前选中的一级分类项
+const currentItem = ref<ICategory | null>(null)     // 当前选中的一级分类项

 // 学科数据
 const firstLevelCategories = ref<string[]>(['医学', '心理学', '国学'])
-const selectedFirstLevel = ref<number>('医学') // 当前选中的一级分类索引
-/**
- * 学科点击处理
- */
-const handleFirstLevelClick = (item: string) => {
-	getPrompt()
-	if(!uni.getStorageSync('token')) return
-	selectedFirstLevel.value = item
-	switch (item) {
-	  case '医学':
-	    getMedicalTags()
-	    break
-	  case '心理学':
-	    getSoulCateList()
-	    break
-	  case '国学':
-	    getSociologyCateList()
-	    break
-	}
-  
-}
+const selectedFirstLevel = ref('医学') // 当前选中的一级分类索引
+
 /**
 * 医学
 * 获取课程分类数据
 */
-const getMedicalTags = async () => {
+const medicineMenuSkeletonRef = ref()
+const getMedicineMenus = () => {
  sbuMedicalTagsList.value = []
-  const res = await courseSubjectClassificationApi.getCourseMedicalTree()
+  return courseSubjectClassificationApi.getCourseMedicalTree()
+}
+const getMedicineMenusSuccess = (res: any) => {
  if (res && res.code === 0) {
    if (res.labels && res.labels.length > 0) {
      curseTagList.value = res.labels
@@ -286,7 +285,7 @@ const getMedicalTags = async () => {
 * 医学
 * 一级分类点击处理
 */
-const curseClick = (item: IMedicalTag, index: number) => {
+const curseClick = (item: ICategory, index: number) => {
  currentItem.value = item
  currentIndex.value = index
  
@@ -304,33 +303,52 @@ const curseClick = (item: IMedicalTag, index: number) => {
 }

 /**
- * 心理学
+ * 菜单
 * 获取课程分类数据
 */
-const soulCateList = ref<IMedicalTag[]>([])
-const getSoulCateList = async () => {
-  const res = await courseSubjectClassificationApi.getCourseSoulTree()
-  if (res.labels&&res.labels.length>0) {
-    soulCateList.value = res.labels;
+const menuSkeletonRef = ref()
+const getMenus = () => {
+  switch (selectedFirstLevel.value) {
+    // case '医学':
+    //   return getMedicalTags()
+    case '心理学':
+      return courseSubjectClassificationApi.getCourseSoulTree()
+    case '国学':
+      return courseSubjectClassificationApi.getCourseSociologyTree()
  }
 }

 /**
- * 国学
- * 获取课程分类数据
+ * 学科点击处理
 */
-const sociologyCateList = ref<IMedicalTag[]>([])
-const getSociologyCateList = async () => {
-  const res = await courseSubjectClassificationApi.getCourseSociologyTree()
-  if (res.labels&&res.labels.length>0) {
-    sociologyCateList.value = res.labels;
+const handleFirstLevelClick = (item: string) => {
+	getPrompt()
+	if(!uni.getStorageSync('token')) return
+	selectedFirstLevel.value = item
+  if (item === '医学') {
+    medicineMenuSkeletonRef.value.reload()
+  } else {
+    menuSkeletonRef.value?.reload()
  }
+  
+	// switch (item) {
+	//   case '医学':
+	//     getMedicalTags()
+	//     break
+	//   case '心理学':
+	//     getSoulCateList()
+	//     break
+	//   case '国学':
+	//     getSociologyCateList()
+	//     break
+	// }
+  
 }

 /**
 * 终极分类点击处理
 */
-const curseClickJump = (item: IMedicalTag) => {
+const curseClickJump = (item: ICategory) => {
 	getPrompt()
 	if(!uni.getStorageSync('token')) return
 	uni.navigateTo({
@@ -399,24 +417,10 @@ const newsClick = (item: INews) => {
 }

 // 精彩试听
-const tryListenList = ref<ICourse[]>([]) // 试听课程列表
 /**
 * 获取试听课程列表
 */
-const getTryListenList = async () => {
-  const res = await courseApi.getMarketCourseList({
-    page: 1,
-    limit: 6,
-    id: 1
-  })
-  if (res && res.code === 0) {
-    if (res.courseList && res.courseList.records && res.courseList.records.length > 0) {
-      tryListenList.value = res.courseList.records
-    } else {
-      tryListenList.value = []
-    }
-  }
-}
+const getTryListenList = () => courseApi.getMarketCourseList({ page: 1, limit: 6, id: 1 })

 /**
 * 登录提示语
@@ -444,8 +448,7 @@ const getTryListenList = async () => {
 const requestAll = async () => {
  if(uni.getStorageSync('token')){
 		getLearnCourse()
-	} 
-	getMedicalTags()
+	}
 	getTryListenList()
 	getNewsList()
 }
@@ -472,16 +475,19 @@ onMounted(() => {
 */
 onShow(() => {  
  // 检查是否有固定的分类选择状态
-  const fixed = uni.getStorageSync('fixed')
-  if (fixed && currentItem.value) {
-    curseClick(currentItem.value, currentIndex.value)
-  } else {
-    currentIndex.value = 0
-    currentItem.value = null
-  }
+  // const fixed = uni.getStorageSync('fixed')
+  // if (fixed && currentItem.value) {
+  //   curseClick(currentItem.value, currentIndex.value)
+  // } else {
+  //   currentIndex.value = 0
+  //   currentItem.value = null
+  // }
  
  // 刷新数据
-  requestAll()
+  // requestAll()
+  if(userStore.token){
+		getLearnCourse()
+	} 
 })

 /**
@@ -504,7 +510,7 @@ onPullDownRefresh(() => {
 /**
 * 页面滚动
 */
-onPageScroll((e) => {
+onPageScroll((e: any) => {
  scrollTop.value = e.scrollTop
 })
 </script>
@@ -673,42 +679,47 @@ $border-color: #eeeeee;
  box-shadow: 0rpx 0rpx 6rpx 0rpx #f9f6ea;
  border-radius: 10rpx;
  margin: 0 10rpx;
+  
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  .cate_item_box {
+    width: 20%;
+    padding: 40rpx 0 30rpx;
+    text-align: center;

-  .cate_list {
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
+    .cate_item_border {
+      width: 60rpx;
+      height: 60rpx;
+      background-size: 100% 100%;
+      background-image: url("@/static/soul/cate_bg.png");
+      border-radius: 4rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0 auto;

-    .cate_item_box {
-      width: 20%;
-      padding: 40rpx 0 30rpx;
+      image {
+        width: 46rpx;
+        height: 46rpx;
+      }
+    }
+
+    .cate_item_name {
+      margin-top: 15rpx;
+      font-size: 24rpx;
+      line-height: 34rpx;
      text-align: center;
+      color: #fff;
+      font-weight: bold;
+    }

-      .cate_item_border {
-        width: 60rpx;
-        height: 60rpx;
-        background-size: 100% 100%;
-        background-image: url("@/static/soul/cate_bg.png");
-        border-radius: 4rpx;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin: 0 auto;
-
-        image {
-          width: 46rpx;
-          height: 46rpx;
-        }
-      }
-
-      .cate_item_name {
-        margin-top: 15rpx;
-        font-size: 24rpx;
-        line-height: 34rpx;
-        text-align: center;
-        color: #fff;
-        font-weight: bold;
-      }
+    .child-menu {
+      display: none;
+      background-color: #000;
+      box-shadow: 0 4rpx 12rpx rgba(51, 97, 165, 0.08);
+      border-radius: 0 0 20rpx 20rpx;
+      padding: 10rpx 0;
    }
  }
 }
@@ -890,7 +901,6 @@ $border-color: #eeeeee;

  .learn {
    justify-content: space-between;
-    margin-top: 20rpx;
    flex-wrap: wrap;

    .item {
@@ -917,6 +927,7 @@ $border-color: #eeeeee;

 .titleBox {
  align-items: center;
+  margin-bottom: 20rpx;

  image {
    width: 50rpx;
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="menu-container">
+
+    <!-- 一级导航 -->
+    <div class="menu-level-1">
+      <div
+        v-for="item in level1"
+        :key="item.id"
+        class="menu-item"
+        :class="{ active: selectedParentId === item.id }"
+        @click="selectParent(item)"
+      >
+        {{ item.name }}
+      </div>
+    </div>
+
+    <!-- 二级导航区域 -->
+    <transition name="fade">
+      <div
+        v-if="childList.length"
+        class="menu-level-2"
+        :style="{ gridRowStart: childRowIndex }"
+      >
+        <div
+          v-for="child in childList"
+          :key="child.id"
+          class="menu-item child"
+        >
+          {{ child.name }}
+        </div>
+      </div>
+    </transition>
+
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue"
+
+// 模拟接口返回的一级导航
+const level1 = ref([
+  { id: 1, name: "导航1", children: [] },
+  { id: 2, name: "导航2", children: [
+    { id: 21, name: "子2-1" },
+    { id: 22, name: "子2-2" },
+    { id: 23, name: "子2-3" }
+  ]},
+  { id: 3, name: "导航3", children: [] },
+  { id: 4, name: "导航4", children: [
+    { id: 41, name: "子4-1" },
+    { id: 42, name: "子4-2" }
+  ]},
+  { id: 5, name: "导航5", children: [] },
+  { id: 6, name: "导航6", children: [
+    { id: 61, name: "子6-1" },
+    { id: 62, name: "子6-2" },
+    { id: 63, name: "子6-3" },
+    { id: 64, name: "子6-4" },
+  ]},
+  { id: 7, name: "导航7", children: [] },
+  { id: 8, name: "导航8", children: [] }
+])
+
+// 选择的一级导航
+const selectedParentId = ref(null)
+
+// 当前一级导航的子级
+const childList = computed(() => {
+  const parent = level1.value.find(i => i.id === selectedParentId.value)
+  return parent ? parent.children : []
+})
+
+// 计算二级导航应该显示在哪一行（每行 4 个）
+const childRowIndex = computed(() => {
+  if (!selectedParentId.value) return 3
+  const index = level1.value.findIndex(i => i.id === selectedParentId.value)
+  return Math.floor(index / 4) + 2  // 第一行 row=1，二级导航从 row=2 或 row=3
+})
+
+const selectParent = (item) => {
+  // 点击同一个时关闭
+  if (selectedParentId.value === item.id) {
+    selectedParentId.value = null
+  } else {
+    selectedParentId.value = item.id
+  }
+}
+</script>
+
+<style scoped>
+.menu-container {
+  display: grid;
+  grid-template-rows: auto auto auto;
+  gap: 10px;
+}
+
+/* 一级导航：4列布局 */
+.menu-level-1 {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px;
+}
+
+.menu-item {
+  padding: 12px;
+  text-align: center;
+  background: #4a90e2;
+  color: white;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.menu-item.active {
+  background: #2d73c7;
+}
+
+/* 二级导航：自动换行 */
+.menu-level-2 {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+  background: #2d73c7;
+  padding: 10px;
+  border-radius: 6px;
+}
+
+.menu-item.child {
+  background: #1e4f8a;
+}
+
+/* 动画 */
+.fade-enter-active, .fade-leave-active {
+  transition: all .2s ease;
+}
+.fade-enter-from, .fade-leave-to {
+  opacity: 0;
+  transform: translateY(-5px);
+}
+</style>
--- a/pages/login/forget.vue
+++ b/pages/login/forget.vue
@@ -1,6 +1,8 @@
 <template>
  <view class="page">
-    <view class="title" :style="{ 'margin-top': getNotchHeight() + 'px' }">{{ $t('forget.title') }}</view>
+    <!-- 自定义导航栏 -->
+    <nav-bar :title="$t('forget.title')" />
+    <!-- <view class="title" :style="{ 'margin-top': getNotchHeight() + 'px' }">{{ $t('forget.title') }}</view> -->
    
    <!-- 邮箱输入 -->
    <view class="input-box">
@@ -33,7 +35,7 @@
      <input 
        class="input-text" 
        type="password" 
-        maxlength="20" 
+        :maxlength="20" 
        v-model="password" 
        :placeholder="$t('forget.passwordPlaceholder')" 
        @input="inputMethod(password)" 
@@ -54,8 +56,8 @@
      <input 
        class="input-text" 
        type="password"
-        minlength="8"
-        maxlength="20" 
+        :minlength="8"
+        :maxlength="20" 
        v-model="confirmPassword" 
        :placeholder="$t('forget.passwordAgainPlaceholder')" 
      />
--- a/pages/login/login.vue
+++ b/pages/login/login.vue
@@ -34,7 +34,7 @@
            v-model="code" 
            :placeholder="$t('login.codePlaceholder')" 
            placeholder-class="grey" 
-            maxlength="6"
+            :maxlength="6"
            @confirm="onSubmit"
          />
          <wd-button type="info" :class="['code-btn', { 'active': !readonly }]" @click="onSetCode">
@@ -116,7 +116,7 @@

      <!-- 游客体验 -->
      <view class="youke-l" v-if="!isAndorid">
-        <view @click="onPageJump('/pages/course/index')">
+        <view @click="onPageSwitch('/pages/course/index')">
          {{ $t('login.noLogin') }}
        </view>
      </view>
@@ -147,6 +147,7 @@ import { loginWithCode, loginWithPassword } from '@/api/modules/auth'
 import { commonApi } from '@/api/modules/common'
 import { validateEmail } from '@/utils/validator'
 import { onPageJump } from '@/utils'
+import { ILoginResponse } from '@/types/user'

 import { t } from '@/utils/i18n'

@@ -303,14 +304,14 @@ const passwordLogin = async () => {
 const onSubmit = async () => {
  if(!isAgree()) return false

-  let res = null
+  let res: ILoginResponse | null = null
 	
 	switch (loginType.value) {
 		case 2000:
-			res = await verifyCodeLogin()
+			res = await verifyCodeLogin() as ILoginResponse
 			break
 		case 1000:
-			res = await passwordLogin()
+			res = await passwordLogin() as ILoginResponse
 			break
 	}

@@ -399,7 +400,7 @@ const yszc = () => {
 /**
 * 页面跳转
 */
-const onPageJump = (url: string) => {
+const onPageSwitch = (url: string) => {
  uni.switchTab({
    url: url,
  })
--- a/types/course.d.ts
+++ b/types/course.d.ts
@@ -50,11 +50,6 @@ export interface IMarketCourseListResponse extends IApiResponse {
  }
 }

-/** 消息列表响应 */
-export interface IMessageListResponse extends IApiResponse {
-  messages: INews[]             // 消息列表
-}
-
 /** 课程详情 */
 export interface ICourseDetail {
  id: number
--- a/types/user.d.ts
+++ b/types/user.d.ts
@@ -1,4 +1,5 @@
 // types/user.ts
+import type { IApiResponse } from '@/api/types'

 /**
 * 用户信息接口
@@ -16,12 +17,12 @@ export interface IUserInfo {
 /**
 * 登录响应接口
 */
-export interface ILoginResponse {
-  userInfo: IUserInfo
+export interface ILoginResponse<T = IUserInfo> extends IApiResponse {
  token: {
    token: string
    [key: string]: any
-  }
+  },
+  userInfo: T
 }

 /**
Author	SHA1	Message	Date
chenghuan	04e2196942	优化：去掉不必要的loading	2025-12-12 11:57:43 +08:00
chenghuan	6e5d63febe	更新：课程首页增加骨架屏	2025-12-12 10:22:44 +08:00