docs(welcome): 调整功能入口为3个，采用环绕式布局

功能入口调整： - 移除时光机入口，保留3个核心功能（课程、活动、我的） - 图标改为使用图片: /img/wecome_btn_1.png - 布局调整为环绕式，模拟天体行星轨道效果布局设计： - 🌌 环绕式布局: 3个图标呈弧形排列 - 📍 位置: 页面中下位置 - ✨ 效果: 星空宇宙主题，旋转虚线轨道 - 🖼️ 图标: 统一使用图片图标，圆形发光效果技术实现： - 使用绝对定位形成环绕效果 - 左侧: 课程中心 (左下) - 顶部: 活动中心 (中上) - 右侧: 个人中心 (右下) - 添加旋转轨道动画 (60s 匀速旋转) 更新文件： - plan.md: 更新功能入口配置和布局代码 - README.md: 更新开发进度和布局说明 - brainstorm.md: 更新待确认事项 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

docs(welcome): 调整功能入口为3个，采用环绕式布局
功能入口调整： - 移除时光机入口，保留3个核心功能（课程、活动、我的） - 图标改为使用图片: /img/wecome_btn_1.png - 布局调整为环绕式，模拟天体行星轨道效果布局设计： - 🌌 环绕式布局: 3个图标呈弧形排列 - 📍 位置: 页面中下位置 - ✨ 效果: 星空宇宙主题，旋转虚线轨道 - 🖼️ 图标: 统一使用图片图标，圆形发光效果技术实现： - 使用绝对定位形成环绕效果 - 左侧: 课程中心 (左下) - 顶部: 活动中心 (中上) - 右侧: 个人中心 (右下) - 添加旋转轨道动画 (60s 匀速旋转) 更新文件： - plan.md: 更新功能入口配置和布局代码 - README.md: 更新开发进度和布局说明 - brainstorm.md: 更新待确认事项 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
hookehuyr
Commit 290fce62f3ecaf983b7caae23971723486b22e09 290fce62 1 parent 73378cac
Showing 3 changed files with 109 additions and 51 deletions
docs/plan/26.1.28-欢迎页开发计划/README.md
docs/plan/26.1.28-欢迎页开发计划/brainstorm.md
docs/plan/26.1.28-欢迎页开发计划/plan.md
--- a/docs/plan/26.1.28-欢迎页开发计划/README.md
View file @290fce6
+++ b/docs/plan/26.1.28-欢迎页开发计划/README.md
View file @290fce6
@@ -70,17 +70,18 @@ VITE_WELCOME_VIDEO_URL=https://cdn.ipadbiz.cn/mlaj/video/welcome-bg.mp4
 - [x] 通用上传工具 (`scripts/upload-to-qiniu.sh`)
 - [x] 详细实现计划 (`plan.md`)
 - [x] 头脑风暴文档 (`brainstorm.md`)
-- [x] 功能入口列表确定（课程、活动、时光机、我的）
+- [x] 功能入口列表确定（3个入口：课程、活动、我的）
+- [x] 功能图标确定 (`/img/wecome_btn_1.png`)
 ### ⏳ 待开发
 - [ ] VideoBackground 组件
-- [ ] WelcomeContent 组件
+- [ ] WelcomeContent 组件（环绕式布局）
-- [ ] WelcomeEntryItem 组件
+- [ ] WelcomeEntryItem 组件（图片图标）
 - [ ] 路由与首次访问逻辑
-- [ ] 功能入口配置实现
 ### ❌ 待确认
 - [ ] 页面效果图 (设计稿)
+- [ ] 环绕式布局的具体位置参数
 - [ ] 页面布局细节 (顶部/底部元素)
 ---
@@ -148,8 +149,13 @@ window.showWelcome()
 1. **课程中心** (`/courses`) - 探索精选课程
 2. **活动中心** (`/activity`) - 精彩活动不容错过
    - ⚠️ **注意**: 当前为外链跳转，跳转到 `https://wxm.behalo.cc/pages/activity/activity`
-3. **时光机** (`/recall/login`) - 回顾学习历程
+3. **个人中心** (`/profile`) - 管理您的账户
-4. **个人中心** (`/profile`) - 管理您的账户
+
+**布局设计:**
+- 🌌 **环绕式布局**: 3个图标像天体行星一样环绕排列
+- 📍 **位置**: 页面中下位置
+- ✨ **效果**: 星空宇宙主题，有旋转的虚线轨道
+- 🖼️ **图标**: 统一使用 `/img/wecome_btn_1.png`
 ---
--- a/docs/plan/26.1.28-欢迎页开发计划/brainstorm.md
View file @290fce6
+++ b/docs/plan/26.1.28-欢迎页开发计划/brainstorm.md
View file @290fce6
@@ -419,11 +419,12 @@ const posterUrl = 'https://cdn.ipadbiz.cn/mlaj/video/welcome-bg.mp4?vframe/jpg/o
 1. ✅ **背景视频文件** - `video/welcome-bg.mp4` 已添加并上传到七牛云
 2. ❌ **页面效果图** - `img/` 文件夹为空，需要设计稿确认布局
-3. ✅ **功能入口列表** - 已确定底部Tab的四个功能入口
+3. ✅ **功能入口列表** - 已确定3个功能入口
    - 课程中心: `/courses`
    - 活动中心: `/activity` (⚠️ 当前为外链跳转: `https://wxm.behalo.cc/pages/activity/activity`)
-   - 时光机: `/recall/login`
    - 个人中心: `/profile`
+   - ✅ **图标确定**: 使用 `/img/wecome_btn_1.png` (图片图标)
+   - ✅ **布局确定**: 环绕式布局，位于页面中下，天体行星感觉
 4. ❌ **页面布局细节** - 顶部/底部是否需要元素（Logo、标语、按钮等）
 **建议:** 先完成技术框架和上传工具，等设计稿确认后再填充内容。
--- a/docs/plan/26.1.28-欢迎页开发计划/plan.md
View file @290fce6
+++ b/docs/plan/26.1.28-欢迎页开发计划/plan.md
View file @290fce6
@@ -765,14 +765,14 @@ if (import.meta.env.DEV) {
 ```javascript
 /**
  * 欢迎页功能入口配置
- * 对应项目底部Tab的四个主要功能入口
+ * 采用环绕式布局，3个功能入口像天体行星一样排列
  */
 export const welcomeEntries = [
   {
     id: 'courses',
     title: '课程中心',
     subtitle: '探索精选课程',
-    icon: '📚',
+    icon: '/img/wecome_btn_1.png',  // 使用图片图标
     route: '/courses',
     color: '#4CAF50',
     priority: 1
@@ -781,7 +781,7 @@ export const welcomeEntries = [
     id: 'activity',
     title: '活动中心',
     subtitle: '精彩活动不容错过',
-    icon: '🎉',
+    icon: '/img/wecome_btn_1.png',  // 使用图片图标
     route: '/activity',
     color: '#FF9800',
     priority: 2,
@@ -789,22 +789,13 @@ export const welcomeEntries = [
     externalUrl: 'https://wxm.behalo.cc/pages/activity/activity?token=&user_id='
   },
   {
-    id: 'recall',
-    title: '时光机',
-    subtitle: '回顾学习历程',
-    icon: '⏰',
-    route: '/recall/login',
-    color: '#9C27B0',
-    priority: 3
-  },
-  {
     id: 'profile',
     title: '个人中心',
     subtitle: '管理您的账户',
-    icon: '👤',
+    icon: '/img/wecome_btn_1.png',  // 使用图片图标
     route: '/profile',
     color: '#2196F3',
-    priority: 4
+    priority: 3
   }
 ]
@@ -828,17 +819,18 @@ export function getSortedEntries() {
    - 查看最新活动信息
    - 活动报名和参与
    - ⚠️ **特殊处理**: 当前为外链跳转，跳转到 `https://wxm.behalo.cc/pages/activity/activity`
-   - 未来可能需要集成到项目内
-
-3. **时光机** (`/recall/login`)
-   - 回顾功能和历史记录
-   - 用户成长历程展示
-4. **个人中心** (`/profile`)
+3. **个人中心** (`/profile`)
    - 对应底部Tab第四个入口
    - 个人资料管理
    - 学习记录和设置
+**布局设计:**
+- 🌌 **环绕式布局**: 3个图标像天体行星一样环绕排列
+- 📍 **位置**: 页面中下位置
+- 🎨 **视觉效果**: 星空宇宙主题，行星轨道感
+- 🖼️ **图标**: 统一使用 `/img/wecome_btn_1.png`
+
 #### 步骤 2: 创建功能入口项组件
 **文件:** `src/components/welcome/WelcomeEntryItem.vue`
@@ -850,9 +842,9 @@ export function getSortedEntries() {
     :style="{ '--index': index }"
     @click="handleClick"
   >
-    <!-- 图标 -->
+    <!-- 图标 (图片) -->
-    <div class="entry-icon" :style="{ color: entry.color }">
+    <div class="entry-icon">
-      {{ entry.icon }}
+      <img :src="entry.icon" :alt="entry.title" />
     </div>
     <!-- 标题 -->
@@ -860,7 +852,7 @@ export function getSortedEntries() {
       {{ entry.title }}
     </div>
-    <!-- 副标题(可选) -->
+    <!-- 副标题 -->
     <div v-if="entry.subtitle" class="entry-subtitle">
       {{ entry.subtitle }}
     </div>
@@ -905,25 +897,45 @@ const handleClick = () => {
 <style scoped lang="less">
 .entry-item {
+  position: absolute;  // 绝对定位，形成环绕效果
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 1.5rem;
+  padding: 1rem;
   cursor: pointer;
   user-select: none;
   transition: all 0.3s ease;
   // 呼吸动画
   animation: breathe 2.5s ease-in-out infinite;
-  animation-delay: calc(var(--index) * 0.3s);
+  animation-delay: calc(var(--index) * 0.5s);
+
+  // 环绕式布局位置计算
+  &:nth-child(1) {
+    // 左侧入口
+    left: 0;
+    bottom: 0;
+  }
+
+  &:nth-child(2) {
+    // 顶部入口
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 60%;
+  }
+
+  &:nth-child(3) {
+    // 右侧入口
+    right: 0;
+    bottom: 0;
+  }
   &:hover {
     animation-duration: 1s;
-    transform: scale(1.1);
-    .entry-icon {
+    .entry-icon img {
-      transform: scale(1.2);
+      transform: scale(1.15);
     }
   }
@@ -934,19 +946,28 @@ const handleClick = () => {
 @keyframes breathe {
   0%, 100% {
-    transform: scale(1);
     opacity: 0.9;
   }
   50% {
-    transform: scale(1.08);
     opacity: 1;
   }
 }
 .entry-icon {
-  font-size: 3rem;
+  width: 80px;
+  height: 80px;
   margin-bottom: 0.75rem;
-  transition: transform 0.3s ease;
+  border-radius: 50%;
+  overflow: hidden;
+  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
+  transition: all 0.3s ease;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.3s ease;
+  }
 }
 .entry-title {
@@ -956,6 +977,7 @@ const handleClick = () => {
   text-align: center;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
   margin-bottom: 0.25rem;
+  white-space: nowrap;
 }
 .entry-subtitle {
@@ -963,6 +985,7 @@ const handleClick = () => {
   color: rgba(255, 255, 255, 0.8);
   text-align: center;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+  white-space: nowrap;
 }
 </style>
 ```
@@ -1006,21 +1029,48 @@ const sortedEntries = computed(() => getSortedEntries())
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-end;  // 内容靠下，位于中下位置
   padding: 2rem;
+  padding-bottom: 6rem;  // 距离底部有足够空间
 }
 .entries-grid {
-  display: grid;
+  position: relative;
-  grid-template-columns: repeat(2, 1fr);
+  display: flex;
-  gap: 1.5rem;
+  justify-content: center;
+  align-items: center;
   width: 100%;
-  max-width: 600px;
+  max-width: 500px;
+
+  // 环绕式布局：3个图标呈弧形排列
+  // 使用绝对定位模拟行星轨道效果
+  &::before {
+    content: '';
+    position: absolute;
+    width: 300px;
+    height: 300px;
+    border: 2px dashed rgba(255, 255, 255, 0.2);
+    border-radius: 50%;
+    animation: rotate 60s linear infinite;
+  }
   @media (min-width: 768px) {
-    grid-template-columns: repeat(3, 1fr);
+    max-width: 700px;
-    gap: 2rem;
+
-    max-width: 900px;
+    &::before {
+      width: 450px;
+      height: 450px;
+    }
+  }
+}
+
+// 旋转轨道动画
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
   }
 }
 </style>
@@ -1338,8 +1388,9 @@ https://cdn.ipadbiz.cn/mlaj/video/welcome-bg.mp4?vframe/jpg/offset/0.001/w/1920/
 1. ✅ **背景视频文件** - `video/welcome-bg.mp4` 已添加并上传到七牛云
 2. ❌ **页面效果图** - 需要设计稿确认布局
-3. ✅ **功能入口列表** - 已确定（课程、活动、时光机、我的）
+3. ✅ **功能入口列表** - 已确定3个入口（课程、活动、我的）
-4. ❌ **页面布局细节** - 顶部/底部是否需要元素（Logo、标语、按钮等）
+4. ✅ **功能图标** - 已确定使用 `/img/wecome_btn_1.png`
+5. ❌ **页面布局细节** - 顶部/底部是否需要其他元素（Logo、标语等）
 **建议:** 先完成技术框架和上传工具，等设计稿确认后再填充内容。