feat: 完善见素起名小程序功能

- 添加收藏锦囊功能，支持查看和删除收藏 - 实现积分系统，每日赠送5次灵感次数 - 添加静心阅读功能，阅读15秒可获得额外次数 - 实现灵感广场，展示用户分享的名字 - 添加字源溯源组件，长按汉字查看详情 - 优化空状态和结语卡片样式统一 - 添加音频控制（静音/风铃/雨落/古琴/白噪音/森林/溪流） - 优化名字生成逻辑，确保每次返回5个不重复名字 - 修复卡片翻转样式问题 - 移除首页动态提醒气泡
2026-04-18 16:56:31 +08:00
parent be1f5722ab
commit 2c47fb8f65
59 changed files with 4643 additions and 145 deletions
--- a/miniprogram/pages/index/index.js
+++ b/miniprogram/pages/index/index.js
@@ -35,6 +35,7 @@ Page({
    
    // 动画控制
    translateX: 0,
+    translateY: 0,
    rotate: 0,
    opacity: 1,
    transition: 'none',
@@ -45,7 +46,25 @@ Page({
    
    // 海报相关
    showPoster: false,
-    posterNameChars: []
+    posterNameChars: [],
+    
+    // 音频相关
+    showMusicMenu: false,
+    currentAmbience: 'silent',
+
+    // 字源弹窗
+    showCharDetail: false,
+    selectedChar: '',
+    charDetailData: null,
+
+    // AI 解析弹窗
+    showAIModal: false,
+    aiContext: '',
+    aiExplanation: '',
+    aiLoading: false,
+
+    // 结语卡片
+    showEndingCard: false
  },

  onLoad(options) {
@@ -91,7 +110,11 @@ Page({

  // 从后端加载收藏列表
  loadCollectedNames() {
-    const openid = 'test_openid'; // 实际应从登录获取
+    const openid = getApp().getOpenid();
+    if (!openid) {
+      console.log('openid 未获取到，跳过加载收藏');
+      return;
+    }
    const apiBaseUrl = getApp().globalData.apiBaseUrl;
    wx.request({
      url: `${apiBaseUrl}/api/favorites/list`,
@@ -119,38 +142,55 @@ Page({
    this.fetchFirstBatch(keyword, mode, surname, 2);
  },

-  // 第一波：快速获取前2个名字
+  // 第一波：快速获取前5个名字
  fetchFirstBatch(keyword, mode, surname, count) {
    const apiBaseUrl = getApp().globalData.apiBaseUrl;
-    const requestData = { 
-      keyword, 
-      count: count,
+    const openid = getApp().getOpenid();
+
+    // 获取已生成的名字列表（用于去重）
+    const existingNames = this.data.nameList.map(card => card.name).join(',');
+
+    const requestData = {
+      keyword,
+      count: 5,
      batch: 'first'
    };
    if (mode) requestData.mode = mode;
    if (surname) requestData.surname = surname;
-    
+    if (openid) requestData.openid = openid;
+    if (existingNames) requestData.excludeNames = existingNames;
+
    wx.request({
      url: `${apiBaseUrl}/api/names/generate`,
      data: requestData,
      success: (res) => {
-        if (res.statusCode === 200 && res.data && res.data.length > 0) {
+        // 检查是否积分不足
+        if (res.data && !res.data.success) {
+          wx.showToast({ title: res.data.message || '次数已用完', icon: 'none' });
+          this.setData({ isLoading: false });
+          return;
+        }
+
+        const nameList = res.data && res.data.data ? res.data.data : res.data;
+        if (res.statusCode === 200 && nameList && nameList.length > 0) {
          // 清除定时器
          if (this.loadingQuoteTimer) {
            clearInterval(this.loadingQuoteTimer);
            this.loadingQuoteTimer = null;
          }
-          
-          // 立即展示第一波结果
-          this.setData({ 
-            nameList: res.data, 
-            currentIndex: 0, 
-            isLoading: false, 
-            cardKey: this.data.cardKey + 1 
+
+          // 立即展示结果（5个名字）
+          this.setData({
+            nameList: nameList,
+            currentIndex: 0,
+            isLoading: false,
+            cardKey: this.data.cardKey + 1
          });
-          
-          // 静默加载剩余3个名字
-          this.fetchSecondBatch(keyword, mode, surname, 3);
+
+          // 呼吸震动效果 - 名字逐字显现时的节奏震动
+          this.breatheVibrate(nameList[0].name);
+
+          console.log('已加载 5 个不重复名字:', nameList.map(n => n.name).join(', '));
        } else {
          this.handleFetchError('意境未达，请重试');
        }
@@ -161,43 +201,16 @@ Page({
    });
  },

-  // 第二波：静默加载剩余名字
-  fetchSecondBatch(keyword, mode, surname, count) {
-    const apiBaseUrl = getApp().globalData.apiBaseUrl;
-    const requestData = { 
-      keyword, 
-      count: count,
-      batch: 'second'
-    };
-    if (mode) requestData.mode = mode;
-    if (surname) requestData.surname = surname;
-    
-    wx.request({
-      url: `${apiBaseUrl}/api/names/generate`,
-      data: requestData,
-      success: (res) => {
-        if (res.statusCode === 200 && res.data && res.data.length > 0) {
-          // 平滑合并数据
-          const currentList = this.data.nameList;
-          const newList = [...currentList, ...res.data];
-          this.setData({ nameList: newList });
-          console.log('第二波数据已静默加载，当前共', newList.length, '个名字');
-        }
-      },
-      fail: (err) => {
-        console.log('第二波加载失败（不影响已展示内容）:', err);
-      }
-    });
-  },
-
-  // 处理加载错误
+  // 处理加载错误 - 显示结语卡片
  handleFetchError(message) {
    if (this.loadingQuoteTimer) {
      clearInterval(this.loadingQuoteTimer);
      this.loadingQuoteTimer = null;
    }
-    this.setData({ isLoading: false });
-    wx.showToast({ title: message, icon: 'none' });
+    this.setData({
+      isLoading: false,
+      showEndingCard: true
+    });
  },

  // 返回首页
@@ -258,6 +271,20 @@ Page({
    if (this.isExiting) return;

    const deltaX = e.touches[0].clientX - this.startX;
+    const deltaY = e.touches[0].clientY - this.startY;
+
+    // 检测上划进入广场（在Y轴移动超过X轴，且向上滑动）
+    if (Math.abs(deltaY) > Math.abs(deltaX) && deltaY < -50 && !this.isDragging) {
+      this.isDragging = true;
+      this.isSwipingUp = true;
+      this.setData({
+        translateY: deltaY,
+        opacity: 1 - Math.abs(deltaY) / 400,
+        transition: 'none'
+      });
+      return;
+    }
+
    // 只有移动超过5px，才真正判定为"拖拽"
    if (Math.abs(deltaX) > 5) {
        this.isDragging = true;
@@ -283,8 +310,47 @@ Page({
    if (!this.isDragging) {
      return;
    }
-    
-    // 以下是拖拽结束后的逻辑
+
+    // 处理上划进入广场
+    if (this.isSwipingUp) {
+      const deltaY = this.data.translateY;
+      if (Math.abs(deltaY) > 150) {
+        // 上划距离足够，进入广场
+        this.isExiting = true;
+        this.setData({
+          translateY: -800,
+          opacity: 0,
+          transition: 'all 0.4s cubic-bezier(0.6, -0.28, 0.735, 0.045)'
+        });
+        // 延迟后跳转
+        setTimeout(() => {
+          this.onGoToSquare();
+          // 重置状态
+          this.setData({
+            translateY: 0,
+            opacity: 1,
+            transition: 'none'
+          });
+          this.isExiting = false;
+          this.isDragging = false;
+          this.isSwipingUp = false;
+        }, 400);
+      } else {
+        // 上划距离不够，回弹
+        this.setData({
+          translateY: 0,
+          opacity: 1,
+          transition: 'all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)'
+        });
+        setTimeout(() => {
+          this.isDragging = false;
+          this.isSwipingUp = false;
+        }, 100);
+      }
+      return;
+    }
+
+    // 以下是拖拽结束后的逻辑（左右滑动）
    const deltaX = this.lastX - this.startX;
    const deltaTime = Date.now() - this.startTime;
    const velocity = deltaX / deltaTime;
@@ -294,12 +360,12 @@ Page({
      this.isExiting = true;
      const direction = deltaX > 0 ? 1 : -1;
      const targetX = direction * 500;
-      
+
      // 播放滑动音效
      getApp().playAudio('swipe');
      // 触觉反馈
      wx.vibrateShort({ type: 'light' });
-      
+
      this.setData({
        translateX: targetX,
        opacity: 0,
@@ -313,7 +379,7 @@ Page({
        transition: 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)'
      });
    }
-    
+
    // 延迟重置 isDragging 标志位。
    // 这是为了确保在系统触发 tap 事件时，isDragging 标志仍然为 true，
    // 从而让 onFlip 方法可以正确地忽略掉这次由拖拽产生的 tap。
@@ -349,7 +415,11 @@ Page({

  // 同步收藏到后端
  syncFavoriteToBackend(card) {
-    const openid = 'test_openid'; // 实际应从登录获取
+    const openid = getApp().getOpenid();
+    if (!openid) {
+      console.log('openid 未获取到，无法同步收藏');
+      return;
+    }
    const apiBaseUrl = getApp().globalData.apiBaseUrl;
    wx.request({
      url: `${apiBaseUrl}/api/favorites/add?openid=${openid}&mode=${this.data.mode}&keyword=${encodeURIComponent(this.data.keyword)}`,
@@ -390,26 +460,49 @@ Page({
        if (nextIndex < this.data.nameList.length) {
          this.setData({ currentIndex: nextIndex, cardKey: this.data.cardKey + 1 });
        } else {
-          wx.showModal({
-            title: '见素时刻',
-            content: '这一波灵感已尽，是否再求几名？',
-            confirmText: '再求', cancelText: '返回',
-            success: (res) => { 
-              if (res.confirm) {
-                this.setData({ isLoading: true });
-                this.startLoadingQuoteRotation();
-                this.fetchNamesBatch(this.data.keyword, this.data.mode, this.data.surname);
-              } else {
-                this.onBack();
-              }
-            }
-          });
+          // 检查是否还有剩余次数
+          this.checkAndLoadMore();
        }
        this.isExiting = false;
      });
    });
  },

+  // 检查是否还有次数，有则自动加载，无则显示结语卡片
+  checkAndLoadMore() {
+    const openid = getApp().getOpenid();
+    if (!openid) {
+      this.setData({ showEndingCard: true });
+      return;
+    }
+
+    const apiBaseUrl = getApp().globalData.apiBaseUrl;
+    wx.request({
+      url: `${apiBaseUrl}/api/credits/info`,
+      data: { openid },
+      success: (res) => {
+        if (res.data && res.data.success) {
+          const creditsInfo = res.data.data;
+          if (creditsInfo.dailyCredits > 0) {
+            // 还有次数，自动加载新的一批
+            console.log('还有次数，自动加载新的一批');
+            this.setData({ isLoading: true });
+            this.startLoadingQuoteRotation();
+            this.fetchFirstBatch(this.data.keyword, this.data.mode, this.data.surname, 5);
+          } else {
+            // 次数用完，显示结语卡片
+            this.setData({ showEndingCard: true });
+          }
+        } else {
+          this.setData({ showEndingCard: true });
+        }
+      },
+      fail: () => {
+        this.setData({ showEndingCard: true });
+      }
+    });
+  },
+
  toggleCollectionView() {
    // 跳转到 profile 页面
    wx.navigateTo({
@@ -417,6 +510,13 @@ Page({
    });
  },

+  // 跳转到灵感广场
+  onGoToSquare() {
+    wx.navigateTo({
+      url: '/pages/square/square'
+    });
+  },
+
  onDeleteCollected(e) {
    const nameToDelete = e.currentTarget.dataset.name;
    this.setData({
@@ -493,8 +593,302 @@ Page({
    });
  },

+  // 分享到灵感广场
+  shareToSquare() {
+    const card = this.data.nameList[this.data.currentIndex];
+    const openid = getApp().getOpenid();
+
+    if (!openid) {
+      wx.showToast({ title: '请先登录', icon: 'none' });
+      return;
+    }
+
+    wx.showLoading({ title: '分享中...', mask: true });
+
+    const apiBaseUrl = getApp().globalData.apiBaseUrl;
+
+    // 直接提交到灵感广场（不上传图片，使用默认图片）
+    // 将数据转换为 URL 编码格式
+    const formData = `name=${encodeURIComponent(card.name)}&origin=${encodeURIComponent(card.origin)}&description=${encodeURIComponent(card.description)}&keyword=${encodeURIComponent(this.data.keyword)}&mode=${encodeURIComponent(this.data.mode)}&openid=${encodeURIComponent(openid)}&imageUrl=`;
+    
+    wx.request({
+      url: `${apiBaseUrl}/api/square/posts`,
+      method: 'POST',
+      header: {
+        'Content-Type': 'application/x-www-form-urlencoded'
+      },
+      data: formData,
+      success: (res) => {
+        wx.hideLoading();
+        if (res.data && res.data.success) {
+          wx.showToast({ title: '分享成功', icon: 'success' });
+          this.setData({ showPoster: false });
+        } else {
+          wx.showToast({ title: res.data.message || '分享失败', icon: 'none' });
+        }
+      },
+      fail: () => {
+        wx.hideLoading();
+        wx.showToast({ title: '分享失败', icon: 'none' });
+      }
+    });
+  },
+
  // 阻止事件冒泡
  preventBubble() {
    // 什么都不做，只是阻止事件冒泡
+  },
+
+  // 点击音符按钮
+  onMusicTap() {
+    this.setData({
+      showMusicMenu: !this.data.showMusicMenu
+    });
+  },
+
+  // 阻止菜单冒泡
+  onMenuTap() {
+    // 什么都不做，只是阻止事件冒泡
+  },
+
+  // 切换环境音
+  onAmbienceChange(e) {
+    const type = e.currentTarget.dataset.type;
+    const { currentAmbience } = this.data;
+    
+    // 如果点击当前正在播放的类型，则切换到静音
+    const newType = (type === currentAmbience) ? 'silent' : type;
+    
+    this.setData({
+      currentAmbience: newType,
+      showMusicMenu: false
+    });
+    
+    // 播放或停止环境音
+    const { playAmbience, fadeOutAndStop } = require('../../utils/audio.js');
+    if (newType === 'silent') {
+      fadeOutAndStop();
+      wx.showToast({ title: '已静音', icon: 'none' });
+    } else {
+      playAmbience(newType, true);
+      const typeName = { wind: '风铃', rain: '雨落', guqin: '古琴' }[newType];
+      wx.showToast({ title: `正在播放：${typeName}`, icon: 'none' });
+    }
+  },
+
+  // 长按名字显示字源弹窗
+  onNameLongPress() {
+    const currentName = this.data.nameList[this.data.currentIndex];
+    if (!currentName || !currentName.name) return;
+    
+    // 默认显示名字的第一个字
+    const firstChar = currentName.name.charAt(0);
+    this.showCharDetail(firstChar);
+    
+    // 触觉反馈
+    wx.vibrateLong();
+  },
+
+  // 显示字源详情
+  showCharDetail(char) {
+    // 播放水滴声（入墨效果）
+    const { playSoundEffect } = require('../../utils/audio.js');
+    playSoundEffect('inkDrop', { volume: 0.5 });
+
+    this.setData({
+      showCharDetail: true,
+      selectedChar: char,
+      charDetailData: null
+    });
+
+    // 加载字源数据
+    this.loadCharDetail(char);
+  },
+
+  // 加载字源数据
+  loadCharDetail(char) {
+    const apiBaseUrl = getApp().globalData.apiBaseUrl;
+    wx.request({
+      url: `${apiBaseUrl}/api/char/detail`,
+      data: { char },
+      success: (res) => {
+        if (res.data && res.data.success) {
+          this.setData({ charDetailData: res.data.data });
+        }
+      },
+      fail: () => {
+        // 使用本地静态数据作为备选
+        this.setData({ charDetailData: this.getLocalCharData(char) });
+      }
+    });
+  },
+
+  // 本地静态字源数据（备选）
+  getLocalCharData(char) {
+    const charDB = {
+      '清': {
+        char: '清',
+        pinyin: 'qīng',
+        radical: '氵',
+        strokes: 11,
+        wuxing: '水',
+        meaning: '水清澈透明，引申为纯净、高洁、明白',
+        imagery: '清澈如泉，心境澄明。寓意纯净通透、高洁自持，如清水出芙蓉，天然去雕饰。',
+        poetry: '「清水出芙蓉，天然去雕饰」——李白'
+      },
+      '雅': {
+        char: '雅',
+        pinyin: 'yǎ',
+        radical: '隹',
+        strokes: 12,
+        wuxing: '木',
+        meaning: '正也，规范、美好、高尚',
+        imagery: '温文尔雅，气度不凡。寓意举止得体、品味高雅，如芝兰玉树，生于庭阶。',
+        poetry: '「雅步擢纤腰，巧笑发皓齿」——曹植'
+      },
+      '若': {
+        char: '若',
+        pinyin: 'ruò',
+        radical: '艹',
+        strokes: 8,
+        wuxing: '木',
+        meaning: '如、像，引申为顺从、选择',
+        imagery: '虚怀若谷，温润如玉。寓意谦逊包容、从容自在，如兰若生春阳。',
+        poetry: '「若有人兮山之阿，被薜荔兮带女萝」——屈原'
+      },
+      '溪': {
+        char: '溪',
+        pinyin: 'xī',
+        radical: '氵',
+        strokes: 13,
+        wuxing: '水',
+        meaning: '山间小河，水流清澈',
+        imagery: '溪水潺潺，源远流长。寓意灵动清澈、生生不息，如溪水绕石，柔中带刚。',
+        poetry: '「旧时茅店社林边，路转溪桥忽见」——辛弃疾'
+      },
+      '云': {
+        char: '云',
+        pinyin: 'yún',
+        radical: '二',
+        strokes: 4,
+        wuxing: '水',
+        meaning: '水气上升凝结，引申为说、众多',
+        imagery: '云卷云舒，自在飘逸。寓意超然物外、洒脱不羁，如行云流水，任意西东。',
+        poetry: '「行到水穷处，坐看云起时」——王维'
+      },
+      '月': {
+        char: '月',
+        pinyin: 'yuè',
+        radical: '月',
+        strokes: 4,
+        wuxing: '木',
+        meaning: '月亮，引申为月份、光明',
+        imagery: '明月清风，皎洁无瑕。寓意光明磊落、清雅高洁，如月出东山，照彻千里。',
+        poetry: '「举杯邀明月，对影成三人」——李白'
+      }
+    };
+    
+    return charDB[char] || {
+      char: char,
+      pinyin: '',
+      radical: '',
+      strokes: '',
+      wuxing: '',
+      meaning: '暂无详细解析',
+      imagery: '暂无意象分析',
+      poetry: ''
+    };
+  },
+
+  // 关闭字源弹窗
+  closeCharDetail() {
+    this.setData({
+      showCharDetail: false,
+      selectedChar: '',
+      charDetailData: null
+    });
+  },
+
+  // 呼吸震动 - 名字逐字显现时的节奏震动
+  breatheVibrate(name) {
+    if (!name || name.length === 0) return;
+
+    const chars = name.split('');
+    let index = 0;
+
+    // 每 300ms 震动一次，模拟呼吸节奏
+    const vibrateInterval = setInterval(() => {
+      if (index >= chars.length) {
+        clearInterval(vibrateInterval);
+        return;
+      }
+
+      // 极微弱的震动，营造意境
+      wx.vibrateShort({ type: 'light' });
+
+      // 播放字显现音效
+      const { playSoundEffect } = require('../../utils/audio.js');
+      playSoundEffect('char', { volume: 0.3 });
+
+      index++;
+    }, 300);
+  },
+
+  // 打开 AI 解析弹窗
+  onAskAI(e) {
+    e.stopPropagation();
+    this.setData({
+      showAIModal: true,
+      aiContext: '',
+      aiExplanation: ''
+    });
+  },
+
+  // 关闭 AI 解析弹窗
+  closeAIModal() {
+    this.setData({
+      showAIModal: false,
+      aiContext: '',
+      aiExplanation: ''
+    });
+  },
+
+  // AI 上下文输入
+  onAIContextInput(e) {
+    this.setData({ aiContext: e.detail.value });
+  },
+
+  // 请求 AI 解析
+  requestAIExplanation() {
+    const currentName = this.data.nameList[this.data.currentIndex];
+    if (!currentName || !currentName.name) return;
+
+    this.setData({ aiLoading: true });
+
+    const apiBaseUrl = getApp().globalData.apiBaseUrl;
+    wx.request({
+      url: `${apiBaseUrl}/api/names/explain`,
+      method: 'POST',
+      header: { 'Content-Type': 'application/json' },
+      data: {
+        name: currentName.name,
+        context: this.data.aiContext || '一般场景'
+      },
+      success: (res) => {
+        if (res.data && res.data.success) {
+          this.setData({
+            aiExplanation: res.data.data,
+            aiLoading: false
+          });
+        } else {
+          wx.showToast({ title: '解析失败', icon: 'none' });
+          this.setData({ aiLoading: false });
+        }
+      },
+      fail: () => {
+        wx.showToast({ title: '网络错误', icon: 'none' });
+        this.setData({ aiLoading: false });
+      }
+    });
  }
 });