refactor(ui): 优化页面布局和样式，调整组件高度和间距

- 调整用户信息页面布局，增加滚动区域
- 统一多个组件的内容高度为40vh
- 修改菜单栏位置和字体大小
- 优化密码修改页面的滚动体验
- 减少录音最短时间限制为3000ms
- 添加视频加载状态处理

pages/catalog/detail.uvue

@@ -21,7 +21,7 @@ const menuItems = [
 ]
 const menu2Items = [
   { id: '1', name: '观察', icon: 'https://oss.xiaoxiongcode.com/static/home/观察.png' },
-  { id: '2', name: '学习', icon: 'https://oss.xiaoxiongcode.com/static/home/假设.png' },
+  { id: '2', name: '思考', icon: 'https://oss.xiaoxiongcode.com/static/home/假设.png' },
   { id: '3', name: '假设', icon: 'https://oss.xiaoxiongcode.com/static/home/卡通扁平化功能图标设计.png' },
   { id: '4', name: '交互', icon: 'https://oss.xiaoxiongcode.com/static/home/总结.png' },
   { id: '5', name: '总结', icon: 'https://oss.xiaoxiongcode.com/static/home/拓展.png' },
@@ -39,8 +39,7 @@ function initOnlibeRecord() {
   innerAudioContext.value = uni.createInnerAudioContext();
   innerAudioContext.value.autoplay = true;
   recorderManager.value?.onStop(function (res) {
-    console.log('recorder stop' + JSON.stringify(res));
-    if (res.duration < 5000) {
+    if (res.duration < 3000) {
       uni.showToast({
         title: '录音时间过短',
         icon: 'none'
@@ -170,18 +169,28 @@ function handleControlsToggle(e) {
 }
 
 watchEffect(() => {
+  isLoading.value = true
+  setTimeout(() => {
+    isLoading.value = false
+  }, 2000)
   if (progress.value === 1) {
     switch (progress2.value) {
       case 1:
-        data.value.videoSrc = course.value?.detailItem?.observeVideoPath
+        setTimeout(() => {
+          isLoading.value = false
+          data.value.videoSrc = course.value?.detailItem?.observeVideoPath
+        }, 2000)
         break
       case 2:
-        data.value.videoSrc = course.value?.detailItem?.questionVideoPath
+        setTimeout(() => {
+          isLoading.value = false
+          data.value.videoSrc = course.value?.detailItem?.questionVideoPath
+        }, 2000)
         break
       case 3:
         setTimeout(() => {
           playVoice(course.value?.detailItem?.assumeAnimationPath)
-        }, 2000)
+        }, 1000)
         // data.value.webviewSrc = course.value?.detailItem?.assumeAnimationPath || data.value.webviewSrc
         // router.push({
         //   path: "/pages/catalog/web-view",
@@ -203,10 +212,16 @@ watchEffect(() => {
         });
         break
       case 5:
-        data.value.videoSrc = course.value?.detailItem?.testVideoPath
+        setTimeout(() => {
+          isLoading.value = false
+          data.value.videoSrc = course.value?.detailItem?.testVideoPath
+        }, 2000)
         break
       case 6:
-        data.value.videoSrc = course.value?.detailItem?.expandVideoPath
+        setTimeout(() => {
+          isLoading.value = false
+          data.value.videoSrc = course.value?.detailItem?.expandVideoPath
+        }, 2000)
         break
     }
   } else if (progress.value === 2) {

pages/catalog/index.uvue

@@ -103,9 +103,9 @@ async function onScroll(e: any) {
           :class="`category-${course.catalogId}`" :key="course.id" @tap="handleDetail(course)" ref="categoryRefs">
           <cl-image :src="config.baseUrl + course?.fileList?.[0]?.url" mode="heightFix"
             class="!w-full !h-[26vh] mb-[2px] rounded-xl"></cl-image>
-          <text class="text-[16px] font-bold">{{
+          <text class="text-[12px] font-bold">{{
             course.mainTitle }}</text>
-          <text class="text-[14px] text-[#666]">{{
+          <text class="text-[10px] text-[#666]">{{
             course.assistantTitle }}</text>
           <view>
             <Progress :num="2" :percentage="course.courseUserProgress?.mainProgress || 0" />

pages/index/components/chinese.uvue

@@ -92,7 +92,7 @@ function handleView(url) {
 }
 
 .content {
-  @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white w-[120vh] border-[3px] border-[#fff] border-solid rounded-[30px] px-10 py-4 h-[44vh] flex flex-row items-center justify-between gap-4;
+  @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white w-[120vh] border-[3px] border-[#fff] border-solid rounded-[30px] px-10 py-4 h-[40vh] flex flex-row items-center justify-between gap-4;
   background: linear-gradient(0deg, #C7F0FE 0%, #30B9FF 100%);
 
 }

pages/index/components/game.uvue

@@ -92,7 +92,7 @@ function handleView(url) {
 }
 
 .content {
-  @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white w-[120vh] border-[3px] border-[#fff] border-solid rounded-[30px] px-10 py-4 h-[44vh] flex flex-row items-center justify-between gap-4;
+  @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white w-[120vh] border-[3px] border-[#fff] border-solid rounded-[30px] px-10 py-4 h-[40vh] flex flex-row items-center justify-between gap-4;
   background: linear-gradient(0deg, #C7F0FE 0%, #30B9FF 100%);
 
 }

pages/index/components/physics.uvue

@@ -10,7 +10,7 @@ function handleView(url) {
 <template>
   <view class="bottom">
     <view class=" progress">
-      <view class="text-[26px] font-bold">学习进度 {{ user.info.value?.studyCourseNum }}/100</view>
+      <view class="text-[24px] font-bold">学习进度 {{ user.info.value?.studyCourseNum }}/100</view>
       <view class=" w-full flex flex-row items-center justify-center gap-2">
         <cl-progress class="flex-1" color="linear-gradient(0deg, #1FA5F5 37%, #A2D8FF 100%)"
           :value="user.info.value?.studyCourseNum" :show-text="false" :strokeWidth="16"

pages/index/home.uvue

@@ -34,10 +34,12 @@ const icons = {
 }
 const selected = ref<string>('physics')
 function handlePage(val: any) {
-	selected.value = val.code
 	if (val.code === 'user') {
 		router.push({ path: '/pages/user/info' })
+		return
 	}
+	selected.value = val.code
+
 }
 onMounted(() => {
 	console.log(menuList.value)
@@ -70,7 +72,7 @@ const userInfo = computed(() => user.info.value?.userInfo)
 </template>
 <style lang="scss" scoped>
 .menus {
-	@apply absolute top-[5vh] left-1/2 bg-white rounded-[20px] p-2 px-3 flex flex-row items-center justify-center gap-2;
+	@apply absolute top-[3vh] left-1/2 bg-white rounded-[20px] p-2 px-3 flex flex-row items-center justify-center gap-2;
 	transform: translateX(-50%);
 }
 

pages/user/components/set.uvue

@@ -82,28 +82,32 @@ const handleBind = () => {
 }
 </script>
 <template>
-  <view class=" w-full bg-[#fff] shadow rounded-xl mt-[20px] text-[#00A9FF] sidebar flex  items-center">
-    <view class="ww">
-      <cl-form ref="formRef" :showMessage="false" v-model="formData" labelPosition="left" :rules="rules">
-        <cl-form-item labelPosition="left" :pt="{ className: '!mb-4' }" label="旧密码" prop="oldPassword">
-          <cl-input password v-model="formData.oldPassword" placeholder="请输入旧密码"></cl-input>
-        </cl-form-item>
-        <cl-form-item labelPosition="left" :pt="{ className: '!mb-4' }" label="新密码" prop="password">
-          <cl-input password v-model="formData.password" placeholder="请输入新密码"></cl-input>
-        </cl-form-item>
-      </cl-form>
-    </view>
-    <uni-button
-      class="h-[30px] rounded-2xl px-[10px] py-[5px] flex flex-row items-center !text-[#fff] justify-center bg-[#007aff] w-[200px] text-[14px] active:bg-[#045bb9]"
-      type="primary" block @tap="handleEdit">修改密码</uni-button>
-    <uni-button
-      class="flex flex-row w-[200px] items-center justify-center gap-2 h-[30px] bg-[#09BA07] rounded-2xl px-[10px] py-[5px] text-[14px] !text-[#fff] active:bg-[#099508] my-[10px]"
-      @tap="handleBind"><cl-image src="https://oss.xiaoxiongcode.com/static/个人中心/微信.png" mode="heightFix" height="20px"
-        width="auto"></cl-image>
-      绑定微信</uni-button>
-    <uni-button
-      class="h-[30px] rounded-2xl px-[10px] py-[5px] flex flex-row items-center !text-[#fff] justify-center text-[14px] bg-[#007aff] w-[200px] active:bg-[#045bb9]"
-      :loading="loading" type="primary" block @tap="handleLogout">退出登录</uni-button>
+  <view class=" w-full  mt-[20px] bg-[#fff] shadow rounded-xl text-[#00A9FF] ">
+    <scroll-view direction="vertical" :show-scrollbar="false" class="sidebar">
+      <view class=" w-full    mt-[20px] text-[#00A9FF]  flex  items-center">
+        <view class="ww">
+          <cl-form ref="formRef" :showMessage="false" v-model="formData" labelPosition="left" :rules="rules">
+            <cl-form-item labelPosition="left" :pt="{ className: '!mb-4' }" label="旧密码" prop="oldPassword">
+              <cl-input password v-model="formData.oldPassword" placeholder="请输入旧密码"></cl-input>
+            </cl-form-item>
+            <cl-form-item labelPosition="left" :pt="{ className: '!mb-4' }" label="新密码" prop="password">
+              <cl-input password v-model="formData.password" placeholder="请输入新密码"></cl-input>
+            </cl-form-item>
+          </cl-form>
+        </view>
+        <uni-button
+          class="h-[30px] rounded-2xl px-[10px] py-[5px] flex flex-row items-center !text-[#fff] justify-center bg-[#007aff] w-[200px] text-[14px] active:bg-[#045bb9]"
+          type="primary" block @tap="handleEdit">修改密码</uni-button>
+        <uni-button
+          class="flex flex-row w-[200px] items-center justify-center gap-2 h-[30px] bg-[#09BA07] rounded-2xl px-[10px] py-[5px] text-[14px] !text-[#fff] active:bg-[#099508] my-[10px]"
+          @tap="handleBind"><cl-image src="https://oss.xiaoxiongcode.com/static/个人中心/微信.png" mode="heightFix"
+            height="20px" width="auto"></cl-image>
+          绑定微信</uni-button>
+        <uni-button
+          class="h-[30px] rounded-2xl px-[10px] py-[5px] flex flex-row items-center !text-[#fff] justify-center text-[14px] bg-[#007aff] w-[200px] active:bg-[#045bb9]"
+          type="primary" block @tap="handleLogout">退出登录</uni-button>
+      </view>
+    </scroll-view>
   </view>
 </template>
 <style lang="scss" scoped>

pages/user/components/user.uvue

@@ -56,37 +56,41 @@ function handleSuccess(res: any) {
 const avatar = ref('')
 </script>
 <template>
-  <view class="w-full h-full py-[20px] pb-[30px] ">
-    <cl-row :gutter="20" class="w-full h-full">
+  <view class="w-full  py-[20px] pb-[30px] ">
+    <cl-row :gutter="20" class="w-full">
       <cl-col :span="8">
-        <view class="w-full h-full bg-[#00A9FF] rounded-3xl flex justify-end items-center shadow">
-          <view class="w-[88px] h-[88px] border border-[#fff] border-solid border-[4px] rounded-full z-[1]">
-            <cl-avatar :size="80"
-              :src="userInfo.avatar ? config.baseUrl + userInfo.avatar : 'https://oss.xiaoxiongcode.com/static/个人中心/图层 506.png'"
-              rounded></cl-avatar>
-          </view>
-          <view
-            class="bg-[#FDF6E9] hh rounded-3xl p-[10px] w-full mt-[-30px] pt-[30px] px-[20px] text-black flex flex-col justify-between ">
-            <view>
-              <view class="py-1 text-[14px]">
-                用户账号：{{ userInfo.username }}
+        <view class="w-full h-full bg-[#00A9FF] rounded-3xl  shadow">
+          <scroll-view direction="vertical" :show-scrollbar="false" class="sidebar2">
+            <view class=" flex justify-end items-center mh">
+              <view class="w-[88px] h-[88px] border border-[#fff] border-solid border-[4px] rounded-full z-[1]">
+                <cl-avatar :size="80"
+                  :src="userInfo.avatar ? config.baseUrl + userInfo.avatar : 'https://oss.xiaoxiongcode.com/static/个人中心/图层 506.png'"
+                  rounded></cl-avatar>
               </view>
-              <view class="py-1 text-[14px]">
-                昵称：{{ userInfo.nickName }}
+              <view
+                class="bg-[#FDF6E9]  rounded-3xl p-[10px] w-full mt-[-30px] pt-[30px] px-[20px] text-black flex flex-col justify-between ">
+                <view>
+                  <view class="py-1 text-[14px]">
+                    用户账号：{{ userInfo.username }}
+                  </view>
+                  <view class="py-1 text-[14px]">
+                    昵称：{{ userInfo.nickName }}
+                  </view>
+                  <view class="py-1 text-[14px]">
+                    积分 ：{{ userInfo.score }}
+                  </view>
+                </view>
+                <view class="btn my-1 h-[40px] rounded-full mx-auto flex justify-center items-center text-white"
+                  @click="handleSubmit">
+                  保存
+                </view>
               </view>
-              <view class="py-1 text-[14px]">
-                积分 ：{{ userInfo.score }}
-              </view>
-            </view>
-            <view class="btn my-1 h-[40px] rounded-full mx-auto flex justify-center items-center text-white"
-              @click="handleSubmit">
-              保存
             </view>
-          </view>
+          </scroll-view>
         </view>
       </cl-col>
       <cl-col :span="16">
-        <view class="w-full h-full bg-[#fff] shadow rounded-xl px-[10px] py-[10px] text-[#00A9FF] ">
+        <view class="w-full  bg-[#fff] shadow rounded-xl px-[10px] py-[10px] text-[#00A9FF] ">
           <scroll-view direction="vertical" :show-scrollbar="false" class="sidebar">
             <cl-form v-model="formData" labelPosition="left">
               <cl-form-item :pt="{ className: '!mb-4' }" label="头像" prop="avatar">
@@ -118,12 +122,17 @@ const avatar = ref('')
 }
 
 .sidebar {
-  height: calc(80vh - 120px);
-  max-height: calc(620px - 120px);
+  height: calc(80vh - 110px);
+  max-height: calc(620px - 110px);
+}
+
+.sidebar2 {
+  height: calc(80vh - 90px);
+  max-height: calc(620px - 90px);
 }
 
-.hh {
-  height: calc(100% - 80px);
+.mh {
+  min-height: 100%;
 }
 
 .btn {

pages/user/info.uvue

@@ -34,7 +34,7 @@ const active = ref<'user' | 'conversion' | 'set'>('user')
             width="auto"></cl-image> 设置
         </view>
       </view>
-      <view class="w-full h-full">
+      <view class="w-full h-full ">
         <user v-if="active === 'user'" />
         <conversion v-else-if="active === 'conversion'" />
         <setting v-else-if="active === 'set'" />