feat: Phase 1-3 全部完成 — 沙盒增强、学情分析、学习路径

2026-05-18 09:48:51 +08:00
commit 11bb86854c
277 changed files with 37755 additions and 0 deletions
@@ -0,0 +1,98 @@
+<template>
+  <view class="courses">
+    <view class="filter-bar">
+      <scroll-view scroll-x class="category-scroll">
+        <view class="category-list">
+          <text class="category-tag" :class="{ active: currentCategory === 0 }" @tap="currentCategory = 0">全部</text>
+          <text class="category-tag" v-for="cat in categories" :key="cat.id" :class="{ active: currentCategory === cat.id }"
+            @tap="currentCategory = cat.id">{{ cat.name }}</text>
+        </view>
+      </scroll-view>
+    </view>
+    <view class="course-list">
+      <view class="course-card" v-for="item in list" :key="item.id" @tap="goDetail(item.id)">
+        <image class="cover" :src="item.cover || '/static/default-course.png'" mode="aspectFill" />
+        <view class="info">
+          <text class="title">{{ item.title }}</text>
+          <text class="desc">{{ item.description }}</text>
+          <view class="meta">
+            <text class="price" v-if="item.isFree">免费</text>
+            <text class="price paid" v-else>¥{{ item.price }}</text>
+            <text class="count">{{ item._count?.lessons || 0 }} 课时</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="loading-more" v-if="loading">加载中...</view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue'
+import { api } from '../../api/index'
+
+const list = ref<any[]>([])
+const categories = ref<any[]>([])
+const currentCategory = ref(0)
+const page = ref(1)
+const loading = ref(false)
+const hasMore = ref(true)
+
+async function loadData() {
+  if (loading.value || !hasMore.value) return
+  loading.value = true
+  try {
+    const params: any = { page: page.value, pageSize: 10 }
+    if (currentCategory.value) params.categoryId = currentCategory.value
+    const res: any = await api.courses.list(params)
+    const items = res.items || []
+    list.value = page.value === 1 ? items : [...list.value, ...items]
+    hasMore.value = items.length === 10
+  } catch (e) {
+    console.error(e)
+  } finally {
+    loading.value = false
+  }
+}
+
+watch(currentCategory, () => {
+  page.value = 1
+  hasMore.value = true
+  loadData()
+})
+
+onMounted(async () => {
+  try {
+    categories.value = (await api.categories.list()) as any[] || []
+  } catch (e) { /* ignore */ }
+  loadData()
+})
+
+const goDetail = (id: number) => uni.navigateTo({ url: `/pages/course-detail/index?id=${id}` })
+</script>
+
+<style scoped>
+.courses { }
+.filter-bar { background: #fff; padding: 20rpx 30rpx; border-bottom: 1rpx solid #f0f0f0; }
+.category-scroll { white-space: nowrap; }
+.category-list { display: flex; gap: 16rpx; }
+.category-tag {
+  display: inline-block; padding: 12rpx 28rpx; border-radius: 30rpx; font-size: 26rpx;
+  background: #f5f5f5; color: #666;
+}
+.category-tag.active { background: #4f8cff; color: #fff; }
+.course-list { padding: 20rpx 30rpx; }
+.course-card {
+  display: flex; background: #fff; border-radius: 16rpx; overflow: hidden;
+  margin-bottom: 20rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
+}
+.cover { width: 200rpx; height: 150rpx; }
+.info { flex: 1; padding: 20rpx; }
+.title { font-size: 28rpx; font-weight: 500; display: block; }
+.desc { font-size: 24rpx; color: #999; margin-top: 8rpx; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.meta { display: flex; align-items: center; justify-content: space-between; margin-top: 12rpx; }
+.price { font-size: 26rpx; color: #4f8cff; }
+.price.paid { color: #ff6b6b; }
+.count { font-size: 22rpx; color: #ccc; }
+.loading-more { text-align: center; padding: 30rpx; color: #999; font-size: 26rpx; }
+</style>