首页重设计: 深底反白banner+去L0硬编码+多班级档案+个人成长卡/平台动态/AI小知识+沙龙改名

train-frontend/pages/index/index.vue

@@ -1,28 +1,52 @@
 <template>
   <view class="home-page">
+    <!-- Banner：深底反白品牌组合 -->
     <view class="banner">
-      <image class="banner-logo" src="/static/logo-text.png" mode="widthFix"></image>
-      <view class="course-tag">
-        <text class="course-tag-text">{{ courseLabel }}</text>
-      </view>
+      <image class="banner-logo" src="/static/logo-banner.png" mode="widthFix"></image>
+      <text class="banner-slogan">让 AI 成为您的贴心伙伴</text>
       <button v-if="!isLoggedIn" class="login-entry-btn" @click="showLoginSheet">点击登录</button>
+      <view v-else class="banner-welcome">
+        <text class="banner-welcome-text">Hi，{{ nickname }}，欢迎回来</text>
+        <text class="banner-welcome-sub">每一次探索，都离 AI 高手更近一步</text>
+      </view>
     </view>
 
+    <!-- 我的档案 -->
     <view class="status-card">
       <view class="status-row">
         <text class="status-label">校友校验</text>
         <text :class="['status-value', verifyClass]">{{ verifyLabel }}</text>
       </view>
       <view class="status-row">
-        <text class="status-label">班级</text>
+        <text class="status-label">我的班级</text>
         <text class="status-value">{{ classLabel }}</text>
       </view>
-      <view class="status-row">
-        <text class="status-label">小组</text>
-        <text class="status-value">{{ groupLabel }}</text>
+    </view>
+
+    <!-- 个人成长 -->
+    <view class="growth-card" v-if="isLoggedIn" @click="goGrowth">
+      <view class="growth-head">
+        <view class="growth-grade-dot" :style="{ background: gradeColor }"></view>
+        <text class="growth-grade-name" :style="{ color: gradeColor }">{{ gradeText }}</text>
+        <text class="growth-earned">{{ earnedCount }}/32 徽章</text>
+        <text class="growth-more">›</text>
       </view>
+      <view class="growth-body">
+        <view class="growth-cell">
+          <text class="growth-cell-num" :style="{ color: gradeColor }">{{ progressText }}</text>
+          <text class="growth-cell-label">完课验收</text>
+        </view>
+        <view class="growth-cell">
+          <text class="growth-cell-num" :style="{ color: gradeColor }">{{ certLabel }}</text>
+          <text class="growth-cell-label">完课证书</text>
+        </view>
+      </view>
+    </view>
+    <view class="growth-card growth-card-guide" v-else @click="showLoginSheet">
+      <text class="growth-guide-text">登录后查看我的成长档案</text>
     </view>
 
+    <!-- 日常服务 -->
     <view class="section-title">日常服务</view>
     <view class="nav-grid">
       <view class="nav-item" @click="switchToTab('/pages/course/index')">
@@ -43,10 +67,39 @@
       </view>
       <view class="nav-item" @click="goTo('/pages/salon/list')">
         <text class="nav-icon">🎨</text>
-        <text class="nav-text">周末沙龙</text>
+        <text class="nav-text">沙龙</text>
       </view>
     </view>
 
+    <!-- 平台动态 -->
+    <view class="section-title">平台动态</view>
+    <view class="dynamic-list" v-if="dynamics.length">
+      <view class="dynamic-item" v-for="(d, idx) in dynamics" :key="idx" @click="goDynamic(d)">
+        <text class="dynamic-tag" :class="d.tagClass">{{ d.tag }}</text>
+        <view class="dynamic-main">
+          <text class="dynamic-title">{{ d.title }}</text>
+          <text class="dynamic-desc">{{ d.desc }}</text>
+        </view>
+        <text class="dynamic-arrow">›</text>
+      </view>
+    </view>
+    <view class="dynamic-empty" v-else-if="isLoggedIn">
+      <text class="dynamic-empty-text">暂无动态，稍后再来看看</text>
+    </view>
+
+    <!-- AI 小知识 -->
+    <view class="section-title">AI 小知识</view>
+    <swiper class="tip-swiper" :autoplay="true" :interval="4000" :circular="true" :indicator-dots="true"
+      indicator-active-color="#FC7A57" indicator-color="#E8E2DE">
+      <swiper-item v-for="(tip, idx) in aiTips" :key="idx">
+        <view class="tip-card">
+          <text class="tip-icon">{{ tip.icon }}</text>
+          <text class="tip-text">{{ tip.text }}</text>
+        </view>
+      </swiper-item>
+    </swiper>
+
+    <!-- 最近课程 -->
     <view class="section-title">最近课程</view>
     <view class="course-mini-list">
       <view class="course-mini-card" v-for="(c, idx) in recentCourses" :key="idx" @click="goToCourse(c)">
@@ -62,6 +115,13 @@
       </view>
     </view>
 
+    <!-- 登录引导卡（未登录时平台动态区下方提示） -->
+    <view class="login-hint" v-if="!isLoggedIn" @click="showLoginSheet">
+      <text class="login-hint-icon">✨</text>
+      <text class="login-hint-text">登录解锁班级、成长与沙龙报名</text>
+      <text class="login-hint-arrow">›</text>
+    </view>
+
     <!-- Login Bottom Sheet -->
     <view class="login-sheet-mask" :class="{ 'sheet-open': loginSheetVisible }" @click="hideLoginSheet">
       <view class="login-sheet-panel" @click.stop>
@@ -84,15 +144,39 @@
 </template>
 
 <script>
-import { getMyGroup, getClassInfo, wechatLogin, getMyCourse, getCourseList } from '@/utils/api.js'
+import { wechatLogin, getCourseList, getMyEnrollments, getMyBadges, getCourseProgress, getMyCert, getSalonList } from '@/utils/api.js'
+import { formatDateTime } from '@/utils/format.js'
 
 export default {
   data() {
     return {
-      groupInfo: null,
-      classInfo: null,
-      courseName: '',
+      myClasses: [],
+      grade: null,
+      earnedCount: 0,
+      progress: null,
+      cert: null,
+      salonNews: [],
+      dynamics: [],
       recentCourses: [],
+      aiTips: [
+        { icon: '💡', text: '提示词三要素：角色 + 任务 + 要求，描述越具体，AI 越懂你。' },
+        { icon: '🤖', text: '把 AI 当成一起上课的学伴，先问「怎么做」，再问「为什么」。' },
+        { icon: '🚀', text: 'L0 完成 6 项验收即可领取完课证书，开启你的 AI 成长档案。' },
+        { icon: '🎯', text: '五级成长主线：见习 → 启航 → 专精 → 系统师 → 讲师。' }
+      ],
+      gradeColorMap: {
+        novice: '#94877F',
+        starter: '#7C3AED',
+        expert: '#F59E0B',
+        system: '#14B8A6',
+        lecturer: '#FC7A57'
+      },
+      themeMap: {
+        ai_basic: 'AI 认知基础',
+        wealth: '家庭财富管理',
+        health: '健康管理',
+        growth: '孩子成长陪伴'
+      },
       loginSheetVisible: false,
       loginLoading: false
     }
@@ -101,8 +185,8 @@ export default {
     isLoggedIn() {
       return this.$store.getters.isLoggedIn
     },
-    courseLabel() {
-      return this.courseName || 'L0 家立方-AI管家成长营'
+    nickname() {
+      return this.$store.state.nickname || this.$store.state.name || ''
     },
     verifyLabel() {
       var v = this.$store.state.alumniVerify
@@ -115,10 +199,26 @@ export default {
       return v === 'accepted' ? 'val-pass' : (v === 'pending' ? 'val-pending' : 'val-fail')
     },
     classLabel() {
-      return this.classInfo ? this.classInfo.name : '未进班'
+      var cs = this.myClasses || []
+      if (!cs.length) return '未进班'
+      if (cs.length === 1) return cs[0]
+      return cs.slice(0, 2).join('、') + ' 等' + cs.length + '个班级'
+    },
+    gradeColor() {
+      if (!this.grade || !this.grade.key) return '#FC7A57'
+      return this.gradeColorMap[this.grade.key] || '#FC7A57'
+    },
+    gradeText() {
+      if (!this.grade || !this.grade.name) return '未入门'
+      return this.grade.name
     },
-    groupLabel() {
-      return this.groupInfo ? this.groupInfo.name : '未入组'
+    progressText() {
+      if (!this.progress) return '-'
+      return this.progress.done + '/' + this.progress.total
+    },
+    certLabel() {
+      if (this.cert && this.cert.eligible) return '已领证'
+      return '学习中'
     }
   },
   onShow() {
@@ -144,30 +244,99 @@ export default {
     loadInfo() {
       if (!this.isLoggedIn) return
       var self = this
-      if (this.$store.state.classId) {
-        getClassInfo().then(function(resp) {
-          self.classInfo = resp.data
-        }).catch(function() {})
-      }
-      getMyGroup().then(function(resp) {
-        self.groupInfo = resp.data
+      this.loadClasses()
+      this.loadGrowth()
+      this.loadCourses()
+      this.loadSalons()
+    },
+    loadClasses() {
+      var self = this
+      getMyEnrollments().then(function(resp) {
+        var list = resp.data || []
+        var classes = []
+        for (var i = 0; i < list.length; i++) {
+          var e = list[i]
+          if (e.classId && e.className) {
+            classes.push(e.className)
+          }
+        }
+        // 去重（一个人可能在多个班级，同名只算一次）
+        classes = classes.filter(function(v, i, arr) {
+          return arr.indexOf(v) === i
+        })
+        self.myClasses = classes
+      }).catch(function() {})
+    },
+    loadGrowth() {
+      var self = this
+      getMyBadges().then(function(resp) {
+        var d = resp.data || {}
+        self.grade = d.grade || null
+        self.earnedCount = d.earnedCount || 0
       }).catch(function() {})
-      getMyCourse().then(function(resp) {
+      getCourseProgress().then(function(resp) {
         var d = resp.data || {}
-        var c = d.course
-        if (c && c.name) {
-          self.courseName = (c.level ? c.level + ' ' : '') + c.name
+        if (d.done !== undefined && d.total !== undefined) {
+          self.progress = d
         }
       }).catch(function() {})
+      getMyCert().then(function(resp) {
+        self.cert = resp.data || null
+      }).catch(function() {})
+    },
+    loadCourses() {
+      var self = this
       // 最近课程：优先取进行中/未开始，最多 3 门
       getCourseList().then(function(resp) {
         var list = resp.data || []
         var sorted = list.slice().sort(function(a, b) {
-          return rankOf(a) - rankOf(b)
+          return self.rankOf(a) - self.rankOf(b)
         })
         self.recentCourses = sorted.slice(0, 3)
+        self.buildDynamics()
       }).catch(function() {})
     },
+    loadSalons() {
+      var self = this
+      getSalonList().then(function(resp) {
+        self.salonNews = resp.data || []
+        self.buildDynamics()
+      }).catch(function() {})
+    },
+    buildDynamics() {
+      // 平台动态 = 沙龙（可报名，最多 2 条）+ 进行中/未开始课程（最多 2 条）
+      var self = this
+      var arr = []
+      var salons = this.salonNews || []
+      for (var i = 0; i < salons.length && arr.length < 2; i++) {
+        var s = salons[i]
+        arr.push({
+          type: 'salon',
+          tag: self.mapTheme(s.theme),
+          tagClass: 'dynamic-tag-salon',
+          title: s.title,
+          desc: formatDateTime(s.time) + ' · ' + (s.place || '') + ' · 余 ' + s.num + '/' + s.capacity,
+          url: '/pages/salon/list'
+        })
+      }
+      var courses = this.recentCourses || []
+      for (var j = 0; j < courses.length && arr.length < 4; j++) {
+        var c = courses[j]
+        if (c.effectiveStatus !== 'active' && c.effectiveStatus !== 'upcoming') continue
+        arr.push({
+          type: 'course',
+          tag: (c.level || 'L') + ' 课程',
+          tagClass: 'dynamic-tag-course',
+          title: c.name,
+          desc: self.statusLabel(c.effectiveStatus) + (c.description ? ' · ' + c.description : ''),
+          url: '/pages/course/detail?courseId=' + c.id
+        })
+      }
+      this.dynamics = arr
+    },
+    mapTheme(theme) {
+      return this.themeMap[theme] || theme || '通用主题'
+    },
     rankOf(c) {
       var st = c && c.effectiveStatus
       if (st === 'active') return 0
@@ -183,6 +352,13 @@ export default {
       if (!c || !c.id) return
       uni.navigateTo({ url: '/pages/course/detail?courseId=' + c.id })
     },
+    goDynamic(d) {
+      if (!d || !d.url) return
+      uni.navigateTo({ url: d.url })
+    },
+    goGrowth() {
+      uni.navigateTo({ url: '/pages/badge/index' })
+    },
     showLoginSheet() {
       this.loginSheetVisible = true
     },
@@ -230,49 +406,98 @@ export default {
 
 <style scoped>
 .home-page { min-height: 100vh; background: #F5F5F5; padding: 0 32rpx 32rpx; }
-.banner { background: linear-gradient(135deg, #FF9E5E, #FC7A57 46%, #F9494F); border-radius: 0 0 32rpx 32rpx; padding: 60rpx 32rpx 48rpx; text-align: center; margin: 0 -32rpx 24rpx; position: relative; }
-  .banner-logo { width: 400rpx; display: block; margin: 0 auto 16rpx; }
-.course-tag {
-  display: inline-block;
-  background: rgba(255,255,255,0.18);
-  border: 2rpx solid rgba(255,255,255,0.4);
-  border-radius: 100rpx;
-  padding: 8rpx 24rpx;
-  margin-bottom: 28rpx;
+/* Banner：深底反白 */
+.banner {
+  background: linear-gradient(135deg, #1B212C, #2A2326 55%, #3A2E30);
+  border-radius: 0 0 32rpx 32rpx;
+  padding: 72rpx 32rpx 48rpx;
+  text-align: center;
+  margin: 0 -32rpx 24rpx;
 }
-.course-tag-text {
-  font-size: 28rpx;
-  font-weight: 600;
+.banner-logo { width: 480rpx; display: block; margin: 0 auto 20rpx; }
+.banner-slogan { display: block; font-size: 28rpx; color: #E8E2DE; letter-spacing: 2rpx; margin-bottom: 32rpx; }
+.login-entry-btn {
+  background: #FC7A57;
   color: #FFF;
-  line-height: 1.4;
-}
-.login-entry-btn { 
-  background: #FFF; 
-  color: #F9494F; 
-  font-size: 24rpx; 
-  font-weight: 600; 
-  border-radius: 100rpx; 
-  padding: 0 32rpx; 
-  height: 64rpx; 
-  line-height: 64rpx; 
+  font-size: 26rpx;
+  font-weight: 600;
+  border-radius: 100rpx;
+  padding: 0 48rpx;
+  height: 72rpx;
+  line-height: 72rpx;
   margin: 0 auto;
   border: none;
+  width: auto;
 }
+.banner-welcome { display: flex; flex-direction: column; align-items: center; }
+.banner-welcome-text { font-size: 32rpx; font-weight: 600; color: #FFF; margin-bottom: 8rpx; }
+.banner-welcome-sub { font-size: 24rpx; color: #B6AA9F; }
+
+/* 我的档案 */
 .status-card { background: #FFF; border-radius: 16rpx; padding: 24rpx 32rpx; margin-bottom: 24rpx; }
 .status-row { display: flex; justify-content: space-between; padding: 14rpx 0; border-bottom: 1rpx solid #F1F5F9; }
 .status-row:last-child { border-bottom: none; }
 .status-label { font-size: 28rpx; color: #5A4F4B; }
-.status-value { font-size: 28rpx; color: #2A2326; font-weight: 500; }
+.status-value { font-size: 28rpx; color: #2A2326; font-weight: 500; max-width: 420rpx; text-align: right; }
 .val-pass { color: #22C55E; }
 .val-pending { color: #FFB74D; }
 .val-fail { color: #EF5350; }
+
+/* 个人成长卡 */
+.growth-card { background: #FFF; border-radius: 16rpx; padding: 28rpx 32rpx; margin-bottom: 24rpx; }
+.growth-card:active { background: #FAF7F4; }
+.growth-head { display: flex; align-items: center; margin-bottom: 24rpx; }
+.growth-grade-dot { width: 16rpx; height: 16rpx; border-radius: 50%; margin-right: 12rpx; }
+.growth-grade-name { font-size: 32rpx; font-weight: 700; }
+.growth-earned { font-size: 24rpx; color: #94877F; margin-left: 16rpx; }
+.growth-more { margin-left: auto; font-size: 40rpx; color: #B6AA9F; }
+.growth-body { display: flex; border-top: 1rpx solid #F1F5F9; padding-top: 20rpx; }
+.growth-cell { flex: 1; display: flex; flex-direction: column; align-items: center; }
+.growth-cell + .growth-cell { border-left: 1rpx solid #F1F5F9; }
+.growth-cell-num { font-size: 32rpx; font-weight: 700; margin-bottom: 4rpx; }
+.growth-cell-label { font-size: 22rpx; color: #94877F; }
+.growth-card-guide { display: flex; align-items: center; justify-content: center; padding: 40rpx 32rpx; }
+.growth-guide-text { font-size: 26rpx; color: #94877F; }
+
+/* 日常服务 */
 .section-title { font-size: 30rpx; font-weight: 600; color: #2A2326; margin-bottom: 16rpx; border-left: 8rpx solid #FC7A57; padding-left: 16rpx; }
-.nav-grid { display: flex; flex-wrap: wrap; gap: 0; background: #FFF; border-radius: 16rpx; overflow: hidden; }
+.nav-grid { display: flex; flex-wrap: wrap; background: #FFF; border-radius: 16rpx; overflow: hidden; margin-bottom: 24rpx; }
 .nav-item { width: 25%; display: flex; flex-direction: column; align-items: center; padding: 28rpx 0; }
 .nav-item:active { background: #F8FAFC; }
 .nav-icon { font-size: 44rpx; margin-bottom: 8rpx; }
 .nav-text { font-size: 24rpx; color: #2A2326; text-align: center; }
-.course-mini-list { display: flex; flex-direction: column; margin-top: 20rpx; }
+
+/* 平台动态 */
+.dynamic-list { background: #FFF; border-radius: 16rpx; overflow: hidden; margin-bottom: 24rpx; }
+.dynamic-item { display: flex; align-items: center; padding: 24rpx 28rpx; border-bottom: 1rpx solid #F1F5F9; }
+.dynamic-item:last-child { border-bottom: none; }
+.dynamic-item:active { background: #FAF7F4; }
+.dynamic-tag { flex-shrink: 0; font-size: 22rpx; font-weight: 600; padding: 4rpx 14rpx; border-radius: 6rpx; margin-right: 16rpx; }
+.dynamic-tag-salon { background: #FFF0E8; color: #FC7A57; }
+.dynamic-tag-course { background: #EEF2FF; color: #7C3AED; }
+.dynamic-main { flex: 1; overflow: hidden; }
+.dynamic-title { display: block; font-size: 28rpx; font-weight: 600; color: #2A2326; margin-bottom: 4rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dynamic-desc { display: block; font-size: 22rpx; color: #94877F; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dynamic-arrow { flex-shrink: 0; font-size: 32rpx; color: #B6AA9F; margin-left: 8rpx; }
+.dynamic-empty { background: #FFF; border-radius: 16rpx; padding: 40rpx 0; text-align: center; margin-bottom: 24rpx; }
+.dynamic-empty-text { font-size: 26rpx; color: #94877F; }
+
+/* AI 小知识 */
+.tip-swiper { height: 180rpx; margin-bottom: 24rpx; }
+.tip-card {
+  display: flex;
+  align-items: center;
+  background: linear-gradient(135deg, #1B212C, #2A2326);
+  border-radius: 16rpx;
+  padding: 32rpx 28rpx;
+  height: 140rpx;
+  box-sizing: border-box;
+}
+.tip-icon { font-size: 40rpx; margin-right: 20rpx; flex-shrink: 0; }
+.tip-text { font-size: 26rpx; color: #E8E2DE; line-height: 1.6; }
+
+/* 最近课程 */
+.course-mini-list { display: flex; flex-direction: column; margin-top: 4rpx; }
 .course-mini-card { background: #FFF; border-radius: 16rpx; padding: 24rpx 28rpx; margin-bottom: 16rpx; }
 .course-mini-card:active { background: #F8FAFC; }
 .course-mini-head { display: flex; align-items: center; margin-bottom: 8rpx; }
@@ -286,6 +511,19 @@ export default {
 .course-mini-empty { background: #FFF; border-radius: 16rpx; padding: 48rpx 0; text-align: center; }
 .course-mini-empty-text { font-size: 26rpx; color: #94877F; }
 
+/* 未登录引导 */
+.login-hint {
+  display: flex;
+  align-items: center;
+  background: linear-gradient(135deg, #FC7A57, #F9494F);
+  border-radius: 16rpx;
+  padding: 28rpx 32rpx;
+  margin-top: 8rpx;
+}
+.login-hint-icon { font-size: 36rpx; margin-right: 16rpx; }
+.login-hint-text { flex: 1; font-size: 26rpx; color: #FFF; font-weight: 500; }
+.login-hint-arrow { font-size: 32rpx; color: #FFF; }
+
 /* Bottom Sheet Styles */
 .login-sheet-mask {
   position: fixed;

train-frontend/pages/salon/list.vue

@@ -3,7 +3,7 @@
     <view class="section-card">
       <view class="head-row">
         <view>
-          <text class="section-title">周末沙龙</text>
+          <text class="section-title">沙龙</text>
           <text class="card-desc">探索AI前沿，共创成长空间</text>
         </view>
         <text class="mine-link" @click="goMine">我的报名</text>