chore: 移除测试页面及相关配置
- 删除 /src/views/test/ 目录下的测试页面 - ActivityListTestPage.vue(活动列表测试) - CourseListTestPage.vue(课程列表测试) - 移除路由配置中的测试路由 - /test - /test/course-list - /test/activity-list - 更新 CHANGELOG.md,移除测试页面相关记录 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Showing
4 changed files
with
0 additions
and
370 deletions
| ... | @@ -3,11 +3,6 @@ | ... | @@ -3,11 +3,6 @@ |
| 3 | 说明:该章节从 README 迁移到本文件,避免 README 过长。后续新增变更建议追加在文件顶部。 | 3 | 说明:该章节从 README 迁移到本文件,避免 README 过长。后续新增变更建议追加在文件顶部。 |
| 4 | 4 | ||
| 5 | 5 | ||
| 6 | -## 2026-01-29 15:30:00 | ||
| 7 | -- 新增活动列表测试页面:[/src/views/test/ActivityListTestPage.vue](file:///Users/huyirui/program/itomix/git/mlaj/src/views/test/ActivityListTestPage.vue) | ||
| 8 | - - 实现高保真 UI 还原(导航栏、筛选栏、活动列表卡片) | ||
| 9 | - - 配置测试路由:`/test/activity-list` | ||
| 10 | - | ||
| 11 | ## 2026-01-26 13:40:00 | 6 | ## 2026-01-26 13:40:00 |
| 12 | - 优化打卡卡片组件(CheckinCard): | 7 | - 优化打卡卡片组件(CheckinCard): |
| 13 | - 增加长文本折叠功能:内容超过5行自动显示省略号,并提供“全文/收起”切换按钮 | 8 | - 增加长文本折叠功能:内容超过5行自动显示省略号,并提供“全文/收起”切换按钮 | ... | ... |
| ... | @@ -258,24 +258,6 @@ export const routes = [ | ... | @@ -258,24 +258,6 @@ export const routes = [ |
| 258 | meta: { title: '我的积分' }, | 258 | meta: { title: '我的积分' }, |
| 259 | }, | 259 | }, |
| 260 | { | 260 | { |
| 261 | - path: '/test', | ||
| 262 | - name: 'test', | ||
| 263 | - component: () => import('../views/test.vue'), | ||
| 264 | - meta: { title: 'test' }, | ||
| 265 | - }, | ||
| 266 | - { | ||
| 267 | - path: '/test/course-list', | ||
| 268 | - name: 'CourseListTest', | ||
| 269 | - component: () => import('../views/test/CourseListTestPage.vue'), | ||
| 270 | - meta: { title: '课程列表测试' }, | ||
| 271 | - }, | ||
| 272 | - { | ||
| 273 | - path: '/test/activity-list', | ||
| 274 | - name: 'ActivityListTest', | ||
| 275 | - component: () => import('../views/test/ActivityListTestPage.vue'), | ||
| 276 | - meta: { title: '活动列表测试' }, | ||
| 277 | - }, | ||
| 278 | - { | ||
| 279 | path: '/test/icon', | 261 | path: '/test/icon', |
| 280 | name: 'IconTest', | 262 | name: 'IconTest', |
| 281 | component: () => import('../views/IconTestPage.vue'), | 263 | component: () => import('../views/IconTestPage.vue'), | ... | ... |
| 1 | -<template> | ||
| 2 | - <div class="pb-safe min-h-screen bg-gray-50"> | ||
| 3 | - <!-- 顶部导航栏 --> | ||
| 4 | - <van-nav-bar fixed placeholder z-index="50" class="nav-bar"> | ||
| 5 | - <template #left> | ||
| 6 | - <van-icon name="arrow-left" size="22" color="#333" /> | ||
| 7 | - </template> | ||
| 8 | - <template #title> | ||
| 9 | - <span class="text-lg font-medium text-gray-800">最新活动</span> | ||
| 10 | - </template> | ||
| 11 | - <template #right> | ||
| 12 | - <van-icon name="ellipsis" size="22" color="#333" /> | ||
| 13 | - </template> | ||
| 14 | - </van-nav-bar> | ||
| 15 | - | ||
| 16 | - <!-- 筛选栏 --> | ||
| 17 | - <div | ||
| 18 | - class="sticky top-[46px] z-40 flex items-center justify-between bg-white px-3 py-2 shadow-sm" | ||
| 19 | - > | ||
| 20 | - <div class="flex items-center gap-6"> | ||
| 21 | - <!-- 全部 --> | ||
| 22 | - <div class="relative text-[15px] font-bold text-gray-900"> | ||
| 23 | - 全部 | ||
| 24 | - <div | ||
| 25 | - class="absolute -bottom-2 left-1/2 h-[3px] w-4 -translate-x-1/2 rounded-full bg-gray-800" | ||
| 26 | - ></div> | ||
| 27 | - </div> | ||
| 28 | - | ||
| 29 | - <!-- 活动地点 --> | ||
| 30 | - <div class="flex items-center gap-1 text-[14px] text-gray-600"> | ||
| 31 | - <span>活动地点</span> | ||
| 32 | - <van-icon name="play" class="rotate-90 text-[10px] text-gray-400" /> | ||
| 33 | - </div> | ||
| 34 | - | ||
| 35 | - <!-- 活动状态 --> | ||
| 36 | - <div class="flex items-center gap-1 text-[14px] text-gray-600"> | ||
| 37 | - <span>活动状态</span> | ||
| 38 | - <van-icon name="play" class="rotate-90 text-[10px] text-gray-400" /> | ||
| 39 | - </div> | ||
| 40 | - </div> | ||
| 41 | - | ||
| 42 | - <!-- 筛选图标 --> | ||
| 43 | - <van-icon name="filter-o" size="18" color="#333" /> | ||
| 44 | - </div> | ||
| 45 | - | ||
| 46 | - <!-- 活动列表 --> | ||
| 47 | - <div class="space-y-3 p-3"> | ||
| 48 | - <div | ||
| 49 | - v-for="item in activityList" | ||
| 50 | - :key="item.id" | ||
| 51 | - class="flex gap-3 rounded-xl bg-white p-3 shadow-sm transition-transform active:scale-[0.99]" | ||
| 52 | - > | ||
| 53 | - <!-- 左侧封面图 --> | ||
| 54 | - <div | ||
| 55 | - class="relative h-[100px] w-[100px] flex-shrink-0 overflow-hidden rounded-lg bg-gray-100" | ||
| 56 | - > | ||
| 57 | - <img | ||
| 58 | - :src="getOptimizedImage(item.imageUrl)" | ||
| 59 | - :alt="item.title" | ||
| 60 | - class="h-full w-full object-cover" | ||
| 61 | - /> | ||
| 62 | - </div> | ||
| 63 | - | ||
| 64 | - <!-- 右侧内容 --> | ||
| 65 | - <div class="flex flex-1 flex-col justify-between py-0.5"> | ||
| 66 | - <!-- 标题 --> | ||
| 67 | - <h3 class="line-clamp-2 text-[15px] font-bold leading-snug text-gray-900"> | ||
| 68 | - {{ item.fullTitle }} | ||
| 69 | - </h3> | ||
| 70 | - | ||
| 71 | - <!-- 信息区域 --> | ||
| 72 | - <div class="space-y-1.5"> | ||
| 73 | - <!-- 地点与状态 --> | ||
| 74 | - <div class="flex items-center gap-2"> | ||
| 75 | - <span class="text-xs text-gray-500">地点: {{ item.location }}</span> | ||
| 76 | - <span | ||
| 77 | - class="rounded border px-1.5 py-0.5 text-[10px]" | ||
| 78 | - :class="getStatusStyle(item.status)" | ||
| 79 | - > | ||
| 80 | - {{ item.status }} | ||
| 81 | - </span> | ||
| 82 | - </div> | ||
| 83 | - | ||
| 84 | - <!-- 时间 --> | ||
| 85 | - <div class="text-xs text-gray-400">时间: {{ item.period }}</div> | ||
| 86 | - </div> | ||
| 87 | - </div> | ||
| 88 | - </div> | ||
| 89 | - </div> | ||
| 90 | - </div> | ||
| 91 | -</template> | ||
| 92 | - | ||
| 93 | -<script setup> | ||
| 94 | -import { ref, computed } from 'vue' | ||
| 95 | -import { activities } from '@/utils/mockData' | ||
| 96 | - | ||
| 97 | -/** | ||
| 98 | - * 处理图片链接,如果是指定CDN域名则添加压缩参数 | ||
| 99 | - * @param {string} url - 图片链接 | ||
| 100 | - * @returns {string} - 处理后的链接 | ||
| 101 | - */ | ||
| 102 | -const getOptimizedImage = url => { | ||
| 103 | - if (!url) return '' | ||
| 104 | - if (url.includes('cdn.ipadbiz.cn')) { | ||
| 105 | - // 检查是否已有参数 | ||
| 106 | - return url.includes('?') | ||
| 107 | - ? `${url}&imageMogr2/thumbnail/200x/strip/quality/70` | ||
| 108 | - : `${url}?imageMogr2/thumbnail/200x/strip/quality/70` | ||
| 109 | - } | ||
| 110 | - return url | ||
| 111 | -} | ||
| 112 | - | ||
| 113 | -// 处理活动数据,拼接标题 | ||
| 114 | -const activityList = computed(() => | ||
| 115 | - activities.map(item => ({ | ||
| 116 | - ...item, | ||
| 117 | - fullTitle: item.subtitle ? `${item.title} ${item.subtitle}` : item.title, | ||
| 118 | - })) | ||
| 119 | -) | ||
| 120 | - | ||
| 121 | -/** | ||
| 122 | - * 获取状态样式 | ||
| 123 | - * @param {string} status - 状态文本 | ||
| 124 | - * @returns {string} - Tailwind 类名 | ||
| 125 | - */ | ||
| 126 | -const getStatusStyle = status => { | ||
| 127 | - if (status === '活动中') { | ||
| 128 | - return 'bg-blue-50 text-blue-500 border-blue-100' | ||
| 129 | - } | ||
| 130 | - if (status === '进行中' || status === '即将开始') { | ||
| 131 | - return 'bg-orange-50 text-orange-500 border-orange-100' | ||
| 132 | - } | ||
| 133 | - return 'bg-gray-50 text-gray-500 border-gray-100' | ||
| 134 | -} | ||
| 135 | -</script> | ||
| 136 | - | ||
| 137 | -<style lang="less" scoped> | ||
| 138 | -// 自定义导航栏样式以匹配设计图 | ||
| 139 | -:deep(.van-nav-bar) { | ||
| 140 | - --van-nav-bar-height: 46px; | ||
| 141 | - .van-nav-bar__content { | ||
| 142 | - height: 46px; | ||
| 143 | - } | ||
| 144 | -} | ||
| 145 | - | ||
| 146 | -// 隐藏滚动条但保持滚动 | ||
| 147 | -.hide-scrollbar::-webkit-scrollbar { | ||
| 148 | - display: none; | ||
| 149 | -} | ||
| 150 | -.hide-scrollbar { | ||
| 151 | - -ms-overflow-style: none; | ||
| 152 | - scrollbar-width: none; | ||
| 153 | -} | ||
| 154 | -</style> |
| 1 | -<template> | ||
| 2 | - <div class="pb-safe min-h-screen bg-gray-50"> | ||
| 3 | - <!-- 顶部导航栏 --> | ||
| 4 | - <van-nav-bar title="课程" left-arrow fixed placeholder class="nav-bar" /> | ||
| 5 | - | ||
| 6 | - <!-- 选项卡 --> | ||
| 7 | - <div class="bg-white shadow-sm"> | ||
| 8 | - <van-tabs | ||
| 9 | - v-model:active="activeTab" | ||
| 10 | - :line-width="40" | ||
| 11 | - :line-height="3" | ||
| 12 | - color="#4caf50" | ||
| 13 | - title-active-color="#4caf50" | ||
| 14 | - title-inactive-color="#666666" | ||
| 15 | - :swipeable="false" | ||
| 16 | - > | ||
| 17 | - <van-tab title="全部" title-class="tab-title"></van-tab> | ||
| 18 | - <van-tab title="已购买" title-class="tab-title"></van-tab> | ||
| 19 | - <van-tab title="免费" title-class="tab-title"></van-tab> | ||
| 20 | - </van-tabs> | ||
| 21 | - </div> | ||
| 22 | - | ||
| 23 | - <!-- 课程列表 --> | ||
| 24 | - <div class="p-3 pb-20"> | ||
| 25 | - <div | ||
| 26 | - v-for="course in courses" | ||
| 27 | - :key="course.id" | ||
| 28 | - class="mb-3 cursor-pointer overflow-hidden rounded-xl bg-white shadow-md transition-transform active:scale-95" | ||
| 29 | - @click="handleCourseClick(course)" | ||
| 30 | - > | ||
| 31 | - <!-- 课程封面 --> | ||
| 32 | - <div class="relative h-44 w-full overflow-hidden"> | ||
| 33 | - <img :src="course.cover" :alt="course.title" class="h-full w-full object-cover" /> | ||
| 34 | - <!-- 免费标签 --> | ||
| 35 | - <div | ||
| 36 | - v-if="course.isFree" | ||
| 37 | - class="absolute left-3 top-3 rounded-full bg-gradient-to-r from-purple-500 to-indigo-500 px-3 py-1 text-xs font-semibold text-white shadow-md" | ||
| 38 | - > | ||
| 39 | - 免费 | ||
| 40 | - </div> | ||
| 41 | - </div> | ||
| 42 | - | ||
| 43 | - <!-- 课程信息 --> | ||
| 44 | - <div class="p-3"> | ||
| 45 | - <!-- 课程标题 --> | ||
| 46 | - <h3 class="mb-2 line-clamp-2 text-base font-semibold leading-snug text-gray-900"> | ||
| 47 | - {{ course.title }} | ||
| 48 | - </h3> | ||
| 49 | - | ||
| 50 | - <!-- 统计信息 --> | ||
| 51 | - <div class="mb-2 flex items-center gap-3"> | ||
| 52 | - <span class="flex items-center gap-1 text-xs text-gray-500"> | ||
| 53 | - <van-icon name="user-o" :size="12" color="#4caf50" /> | ||
| 54 | - {{ course.studentCount }} | ||
| 55 | - </span> | ||
| 56 | - <span class="flex items-center gap-1 text-xs text-gray-500"> | ||
| 57 | - <van-icon name="video-o" :size="12" color="#4caf50" /> | ||
| 58 | - {{ course.lessonCount }}课时 | ||
| 59 | - </span> | ||
| 60 | - </div> | ||
| 61 | - | ||
| 62 | - <!-- 讲师信息 --> | ||
| 63 | - <div class="flex items-center gap-1.5"> | ||
| 64 | - <img | ||
| 65 | - :src="course.teacherAvatar" | ||
| 66 | - :alt="course.teacherName" | ||
| 67 | - class="h-5 w-5 rounded-full object-cover" | ||
| 68 | - /> | ||
| 69 | - <span class="text-sm text-gray-600">{{ course.teacherName }}</span> | ||
| 70 | - </div> | ||
| 71 | - </div> | ||
| 72 | - </div> | ||
| 73 | - </div> | ||
| 74 | - | ||
| 75 | - <!-- 底部导航栏(装饰用) --> | ||
| 76 | - <van-tabbar | ||
| 77 | - v-model="activeTabbar" | ||
| 78 | - fixed | ||
| 79 | - :safe-area-inset-bottom="true" | ||
| 80 | - active-color="#4caf50" | ||
| 81 | - inactive-color="#999999" | ||
| 82 | - > | ||
| 83 | - <van-tabbar-item icon="wap-home-o">首页</van-tabbar-item> | ||
| 84 | - <van-tabbar-item icon="apps-o">课程</van-tabbar-item> | ||
| 85 | - <van-tabbar-item icon="chat-o">活动</van-tabbar-item> | ||
| 86 | - <van-tabbar-item icon="user-o">我的</van-tabbar-item> | ||
| 87 | - </van-tabbar> | ||
| 88 | - </div> | ||
| 89 | -</template> | ||
| 90 | - | ||
| 91 | -<script setup> | ||
| 92 | -import { ref } from 'vue' | ||
| 93 | - | ||
| 94 | -// 当前激活的选项卡 | ||
| 95 | -const activeTab = ref(0) | ||
| 96 | - | ||
| 97 | -// 底部导航栏激活项 | ||
| 98 | -const activeTabbar = ref(1) | ||
| 99 | - | ||
| 100 | -// 模拟课程数据 | ||
| 101 | -const courses = ref([ | ||
| 102 | - { | ||
| 103 | - id: 1, | ||
| 104 | - title: '家庭教育指导师(初级)第12期', | ||
| 105 | - cover: 'https://cdn.ipadbiz.cn/public/mlaj/course-cover-1.jpg', | ||
| 106 | - isFree: true, | ||
| 107 | - studentCount: 1289, | ||
| 108 | - lessonCount: 24, | ||
| 109 | - teacherName: '张老师', | ||
| 110 | - teacherAvatar: 'https://cdn.ipadbiz.cn/public/mlaj/teacher-1.jpg', | ||
| 111 | - }, | ||
| 112 | - { | ||
| 113 | - id: 2, | ||
| 114 | - title: '智慧父母成长营第8期', | ||
| 115 | - cover: 'https://cdn.ipadbiz.cn/public/mlaj/course-cover-2.jpg', | ||
| 116 | - isFree: false, | ||
| 117 | - studentCount: 856, | ||
| 118 | - lessonCount: 16, | ||
| 119 | - teacherName: '李老师', | ||
| 120 | - teacherAvatar: 'https://cdn.ipadbiz.cn/public/mlaj/teacher-2.jpg', | ||
| 121 | - }, | ||
| 122 | - { | ||
| 123 | - id: 3, | ||
| 124 | - title: '儿童心理学基础课程', | ||
| 125 | - cover: 'https://cdn.ipadbiz.cn/public/mlaj/course-cover-3.jpg', | ||
| 126 | - isFree: true, | ||
| 127 | - studentCount: 2341, | ||
| 128 | - lessonCount: 32, | ||
| 129 | - teacherName: '王老师', | ||
| 130 | - teacherAvatar: 'https://cdn.ipadbiz.cn/public/mlaj/teacher-3.jpg', | ||
| 131 | - }, | ||
| 132 | -]) | ||
| 133 | - | ||
| 134 | -// 点击课程卡片 | ||
| 135 | -const handleCourseClick = course => { | ||
| 136 | - console.log('点击课程:', course.title) | ||
| 137 | -} | ||
| 138 | -</script> | ||
| 139 | - | ||
| 140 | -<style lang="less" scoped> | ||
| 141 | -// 仅用于修改 Vant 组件的深层样式 | ||
| 142 | -:deep(.nav-bar) { | ||
| 143 | - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | ||
| 144 | - | ||
| 145 | - .van-nav-bar__title { | ||
| 146 | - color: #ffffff; | ||
| 147 | - font-size: 18px; | ||
| 148 | - font-weight: 600; | ||
| 149 | - } | ||
| 150 | - | ||
| 151 | - .van-icon { | ||
| 152 | - color: #ffffff; | ||
| 153 | - } | ||
| 154 | -} | ||
| 155 | - | ||
| 156 | -:deep(.van-tabs) { | ||
| 157 | - .van-tabs__nav { | ||
| 158 | - padding-bottom: 0; | ||
| 159 | - } | ||
| 160 | - | ||
| 161 | - .van-tab { | ||
| 162 | - flex: 1; | ||
| 163 | - padding: 0; | ||
| 164 | - | ||
| 165 | - .tab-title { | ||
| 166 | - font-size: 15px; | ||
| 167 | - font-weight: 500; | ||
| 168 | - } | ||
| 169 | - } | ||
| 170 | - | ||
| 171 | - .van-tabs__line { | ||
| 172 | - bottom: 0; | ||
| 173 | - } | ||
| 174 | -} | ||
| 175 | - | ||
| 176 | -:deep(.van-tabbar) { | ||
| 177 | - box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05); | ||
| 178 | -} | ||
| 179 | - | ||
| 180 | -// TailwindCSS 不支持的样式(自定义安全区域) | ||
| 181 | -.pb-safe { | ||
| 182 | - padding-bottom: constant(safe-area-inset-bottom); | ||
| 183 | - padding-bottom: env(safe-area-inset-bottom); | ||
| 184 | -} | ||
| 185 | - | ||
| 186 | -// TailwindCSS 不支持的样式(行数限制) | ||
| 187 | -.line-clamp-2 { | ||
| 188 | - display: -webkit-box; | ||
| 189 | - -webkit-box-orient: vertical; | ||
| 190 | - -webkit-line-clamp: 2; | ||
| 191 | - overflow: hidden; | ||
| 192 | -} | ||
| 193 | -</style> |
-
Please register or login to post a comment