refactor(打卡): 重构打卡相关代码结构
- 移除打卡首页的标题显示 - 将打卡类型数据从mockData移动到各自组件中 - 清理个人页面的废弃打卡代码 - 添加TODO标记准备后端数据接入 ``` 这个提交消息: 1. 使用了`refactor`类型,因为主要是代码结构调整 2. 添加了`(打卡)`作为scope,明确修改范围 3. 描述中简要说明了主要的重构内容 4. 在body中列出了具体的重构点 5. 符合中文语言习惯和commit message规范
Showing
4 changed files
with
24 additions
and
92 deletions
| ... | @@ -73,9 +73,16 @@ | ... | @@ -73,9 +73,16 @@ |
| 73 | <script setup> | 73 | <script setup> |
| 74 | import { ref } from 'vue' | 74 | import { ref } from 'vue' |
| 75 | import { showToast } from 'vant' | 75 | import { showToast } from 'vant' |
| 76 | -import { checkInTypes } from '@/utils/mockData' | ||
| 77 | import { useRoute, useRouter } from 'vue-router' | 76 | import { useRoute, useRouter } from 'vue-router' |
| 78 | 77 | ||
| 78 | +// TODO: 从后端获取 | ||
| 79 | +const checkInTypes = [ | ||
| 80 | + { id: 'reading', name: '课程打卡', icon: 'book', path: '/checkin/reading' }, | ||
| 81 | + { id: 'exercise', name: '签到打卡', icon: 'running', path: '/checkin/exercise' }, | ||
| 82 | + { id: 'reflection', name: '学习打卡', icon: 'pencil-alt', path: '/checkin/writing' }, | ||
| 83 | + { id: 'mix', name: '图文打卡', icon: 'pencil-alt', path: '/checkin/index' } | ||
| 84 | +]; | ||
| 85 | + | ||
| 79 | const route = useRoute() | 86 | const route = useRoute() |
| 80 | const router = useRouter() | 87 | const router = useRouter() |
| 81 | 88 | ... | ... |
| 1 | /* | 1 | /* |
| 2 | * @Date: 2025-03-21 13:28:30 | 2 | * @Date: 2025-03-21 13:28:30 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-06-03 11:29:54 | 4 | + * @LastEditTime: 2025-06-03 18:36:49 |
| 5 | * @FilePath: /mlaj/src/router/checkin.js | 5 | * @FilePath: /mlaj/src/router/checkin.js |
| 6 | * @Description: 文件描述 | 6 | * @Description: 文件描述 |
| 7 | */ | 7 | */ |
| ... | @@ -47,7 +47,7 @@ export default [ | ... | @@ -47,7 +47,7 @@ export default [ |
| 47 | name: 'IndexCheckIn', | 47 | name: 'IndexCheckIn', |
| 48 | component: () => import('@/views/checkin/IndexCheckInPage.vue'), | 48 | component: () => import('@/views/checkin/IndexCheckInPage.vue'), |
| 49 | meta: { | 49 | meta: { |
| 50 | - title: '打卡首页', | 50 | + title: '', |
| 51 | requiresAuth: true | 51 | requiresAuth: true |
| 52 | } | 52 | } |
| 53 | }, | 53 | }, | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2025-03-20 19:55:21 | 2 | * @Date: 2025-03-20 19:55:21 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-06-03 14:26:36 | 4 | + * @LastEditTime: 2025-06-04 09:38:40 |
| 5 | * @FilePath: /mlaj/src/views/HomePage.vue | 5 | * @FilePath: /mlaj/src/views/HomePage.vue |
| 6 | * @Description: 美乐爱觉教育首页组件 | 6 | * @Description: 美乐爱觉教育首页组件 |
| 7 | * | 7 | * |
| ... | @@ -518,7 +518,7 @@ import SummerCampCard from '@/components/ui/SummerCampCard.vue' | ... | @@ -518,7 +518,7 @@ import SummerCampCard from '@/components/ui/SummerCampCard.vue' |
| 518 | import VideoPlayer from '@/components/ui/VideoPlayer.vue' | 518 | import VideoPlayer from '@/components/ui/VideoPlayer.vue' |
| 519 | 519 | ||
| 520 | // 导入模拟数据和工具函数 | 520 | // 导入模拟数据和工具函数 |
| 521 | -import { courses, liveStreams, activities, checkInTypes } from '@/utils/mockData' | 521 | +import { courses, liveStreams, activities } from '@/utils/mockData' |
| 522 | import { useTitle } from '@vueuse/core' | 522 | import { useTitle } from '@vueuse/core' |
| 523 | import { useAuth } from '@/contexts/auth' | 523 | import { useAuth } from '@/contexts/auth' |
| 524 | import { showToast } from 'vant' | 524 | import { showToast } from 'vant' |
| ... | @@ -565,6 +565,14 @@ const getRecommendations = (random = false) => { | ... | @@ -565,6 +565,14 @@ const getRecommendations = (random = false) => { |
| 565 | return userRecommendations.value.slice(0, 4) | 565 | return userRecommendations.value.slice(0, 4) |
| 566 | } | 566 | } |
| 567 | 567 | ||
| 568 | +// TODO: 从后端获取 | ||
| 569 | +const checkInTypes = [ | ||
| 570 | + { id: 'reading', name: '课程打卡', icon: 'book', path: '/checkin/reading' }, | ||
| 571 | + { id: 'exercise', name: '签到打卡', icon: 'running', path: '/checkin/exercise' }, | ||
| 572 | + // { id: 'study', name: '团队打卡', icon: 'graduation-cap', path: '/checkin/study' }, | ||
| 573 | + { id: 'reflection', name: '学习打卡', icon: 'pencil-alt', path: '/checkin/writing' }, | ||
| 574 | + { id: 'mix', name: '图文打卡', icon: 'pencil-alt', path: '/checkin/index' } | ||
| 575 | +]; | ||
| 568 | 576 | ||
| 569 | // 自动轮播 | 577 | // 自动轮播 |
| 570 | let carouselInterval | 578 | let carouselInterval | ... | ... |
| ... | @@ -68,91 +68,6 @@ | ... | @@ -68,91 +68,6 @@ |
| 68 | </FrostedGlass> | 68 | </FrostedGlass> |
| 69 | </div> | 69 | </div> |
| 70 | 70 | ||
| 71 | - <!-- Check-in Types --> | ||
| 72 | - <!-- <div class="px-4 mb-5"> | ||
| 73 | - <FrostedGlass class="p-4 rounded-xl"> | ||
| 74 | - <h3 class="font-semibold text-base mb-4">打卡项目</h3> | ||
| 75 | - <div class="grid grid-cols-4 gap-2"> | ||
| 76 | - <div | ||
| 77 | - v-for="type in checkInTypes" | ||
| 78 | - :key="type.id" | ||
| 79 | - class="flex flex-col items-center cursor-pointer" | ||
| 80 | - @click="handleCheckInClick(type.path)" | ||
| 81 | - > | ||
| 82 | - <div | ||
| 83 | - class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mb-1" | ||
| 84 | - > | ||
| 85 | - <svg | ||
| 86 | - v-if="type.icon === 'book'" | ||
| 87 | - xmlns="http://www.w3.org/2000/svg" | ||
| 88 | - class="h-6 w-6 text-green-600" | ||
| 89 | - fill="none" | ||
| 90 | - viewBox="0 0 24 24" | ||
| 91 | - stroke="currentColor" | ||
| 92 | - > | ||
| 93 | - <path | ||
| 94 | - stroke-linecap="round" | ||
| 95 | - stroke-linejoin="round" | ||
| 96 | - stroke-width="2" | ||
| 97 | - d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" | ||
| 98 | - /> | ||
| 99 | - </svg> | ||
| 100 | - <svg | ||
| 101 | - v-if="type.icon === 'running'" | ||
| 102 | - xmlns="http://www.w3.org/2000/svg" | ||
| 103 | - class="h-6 w-6 text-green-600" | ||
| 104 | - fill="none" | ||
| 105 | - viewBox="0 0 24 24" | ||
| 106 | - stroke="currentColor" | ||
| 107 | - > | ||
| 108 | - <path | ||
| 109 | - stroke-linecap="round" | ||
| 110 | - stroke-linejoin="round" | ||
| 111 | - stroke-width="2" | ||
| 112 | - d="M13 10V3L4 14h7v7l9-11h-7z" | ||
| 113 | - /> | ||
| 114 | - </svg> | ||
| 115 | - <svg | ||
| 116 | - v-if="type.icon === 'graduation-cap'" | ||
| 117 | - xmlns="http://www.w3.org/2000/svg" | ||
| 118 | - class="h-6 w-6 text-green-600" | ||
| 119 | - fill="none" | ||
| 120 | - viewBox="0 0 24 24" | ||
| 121 | - stroke="currentColor" | ||
| 122 | - > | ||
| 123 | - <path d="M12 14l9-5-9-5-9 5 9 5z" /> | ||
| 124 | - <path | ||
| 125 | - d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" | ||
| 126 | - /> | ||
| 127 | - <path | ||
| 128 | - stroke-linecap="round" | ||
| 129 | - stroke-linejoin="round" | ||
| 130 | - stroke-width="2" | ||
| 131 | - d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" | ||
| 132 | - /> | ||
| 133 | - </svg> | ||
| 134 | - <svg | ||
| 135 | - v-if="type.icon === 'pencil-alt'" | ||
| 136 | - xmlns="http://www.w3.org/2000/svg" | ||
| 137 | - class="h-6 w-6 text-green-600" | ||
| 138 | - fill="none" | ||
| 139 | - viewBox="0 0 24 24" | ||
| 140 | - stroke="currentColor" | ||
| 141 | - > | ||
| 142 | - <path | ||
| 143 | - stroke-linecap="round" | ||
| 144 | - stroke-linejoin="round" | ||
| 145 | - stroke-width="2" | ||
| 146 | - d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" | ||
| 147 | - /> | ||
| 148 | - </svg> | ||
| 149 | - </div> | ||
| 150 | - <span class="text-xs">{{ type.name }}</span> | ||
| 151 | - </div> | ||
| 152 | - </div> | ||
| 153 | - </FrostedGlass> | ||
| 154 | - </div> --> | ||
| 155 | - | ||
| 156 | <!-- User Menu Options --> | 71 | <!-- User Menu Options --> |
| 157 | <div class="px-4 pb-16"> | 72 | <div class="px-4 pb-16"> |
| 158 | <FrostedGlass class="rounded-xl overflow-hidden mb-5"> | 73 | <FrostedGlass class="rounded-xl overflow-hidden mb-5"> |
| ... | @@ -209,24 +124,25 @@ import AppLayout from "@/components/layout/AppLayout.vue"; | ... | @@ -209,24 +124,25 @@ import AppLayout from "@/components/layout/AppLayout.vue"; |
| 209 | import FrostedGlass from "@/components/ui/FrostedGlass.vue"; | 124 | import FrostedGlass from "@/components/ui/FrostedGlass.vue"; |
| 210 | import MenuItem from "@/components/ui/MenuItem.vue"; | 125 | import MenuItem from "@/components/ui/MenuItem.vue"; |
| 211 | import { useAuth } from "@/contexts/auth"; | 126 | import { useAuth } from "@/contexts/auth"; |
| 212 | -import { userProfile, checkInTypes } from "@/utils/mockData"; | ||
| 213 | import CheckInDialog from "@/components/ui/CheckInDialog.vue"; | 127 | import CheckInDialog from "@/components/ui/CheckInDialog.vue"; |
| 214 | import { getUserInfoAPI } from "@/api/users"; | 128 | import { getUserInfoAPI } from "@/api/users"; |
| 215 | import { showToast } from "vant"; | 129 | import { showToast } from "vant"; |
| 216 | 130 | ||
| 217 | import { useTitle } from "@vueuse/core"; | 131 | import { useTitle } from "@vueuse/core"; |
| 132 | + | ||
| 218 | const router = useRouter(); | 133 | const router = useRouter(); |
| 219 | const $route = useRoute(); | 134 | const $route = useRoute(); |
| 220 | useTitle($route.meta.title); | 135 | useTitle($route.meta.title); |
| 221 | 136 | ||
| 222 | -const { logout } = useAuth(); | ||
| 223 | const profile = ref({}); | 137 | const profile = ref({}); |
| 138 | + | ||
| 224 | onMounted(async () => { | 139 | onMounted(async () => { |
| 225 | const { code, data } = await getUserInfoAPI(); | 140 | const { code, data } = await getUserInfoAPI(); |
| 226 | if (code) { | 141 | if (code) { |
| 227 | profile.value = data.user; | 142 | profile.value = data.user; |
| 228 | } | 143 | } |
| 229 | }) | 144 | }) |
| 145 | + | ||
| 230 | const showCheckInDialog = ref(false); | 146 | const showCheckInDialog = ref(false); |
| 231 | 147 | ||
| 232 | // 处理打卡成功 | 148 | // 处理打卡成功 |
| ... | @@ -240,6 +156,7 @@ const handleCheckInSuccess = () => { | ... | @@ -240,6 +156,7 @@ const handleCheckInSuccess = () => { |
| 240 | }; | 156 | }; |
| 241 | 157 | ||
| 242 | // Handle logout | 158 | // Handle logout |
| 159 | +const { logout } = useAuth(); | ||
| 243 | const handleLogout = () => { | 160 | const handleLogout = () => { |
| 244 | logout(); | 161 | logout(); |
| 245 | window.location.href = import.meta.env.VITE_BASE || '/'; | 162 | window.location.href = import.meta.env.VITE_BASE || '/'; | ... | ... |
-
Please register or login to post a comment