refactor(wish-tree): 参考 wishing-tree-pages 重写许愿树

- 使用精美许愿树 PNG 图片作为背景
- 许愿标签用 CSS 动画实现摇摆效果
- 添加萤火虫和花瓣氛围动画
- 预设树冠挂载点，标签位置更自然
- 深色主题 + 金色/红色/绿色标签
- 边缘暗角让树从中心发光
- 最近心愿横向滚动列表

.gitignore

@@ -62,6 +62,7 @@ server/web/
 
 # web 版万年历（独立项目，不属于本仓库）
 web/
+wishing-tree-pages/
 
 # 数据库
 *.db

mini/pages/wish-tree/wish-tree.js

@@ -1,17 +1,55 @@
 const { request } = require('../../utils/request.js');
 
-// 许愿树配置
+// 预设的树冠挂载点（百分比坐标）
-const TREE_CONFIG = {
+const CANOPY_SLOTS = [
-  name: '祈福许愿树',
+  { x: 16, y: 34 },
-  desc: '许下美好愿望，祈福平安顺遂',
+  { x: 27, y: 21 },
-  type: 'pine',
+  { x: 39, y: 14 },
+  { x: 52, y: 12 },
+  { x: 63, y: 18 },
+  { x: 74, y: 26 },
+  { x: 84, y: 38 },
+  { x: 12, y: 50 },
+  { x: 23, y: 46 },
+  { x: 34, y: 40 },
+  { x: 66, y: 40 },
+  { x: 78, y: 50 },
+  { x: 88, y: 30 },
+  { x: 45, y: 30 },
+];
+
+// 标签颜色配置
+const TAG_COLORS = {
+  amber: {
+    color: '#ffd700',
+    bgColor: 'rgba(255, 215, 0, 0.9)',
+    borderColor: 'rgba(255, 215, 0, 0.6)',
+    shadowColor: 'rgba(255, 215, 0, 0.4)',
+  },
+  red: {
+    color: '#ff6b6b',
+    bgColor: 'rgba(255, 107, 107, 0.9)',
+    borderColor: 'rgba(255, 107, 107, 0.6)',
+    shadowColor: 'rgba(255, 107, 107, 0.4)',
+  },
+  jade: {
+    color: '#51cf66',
+    bgColor: 'rgba(81, 207, 102, 0.9)',
+    borderColor: 'rgba(81, 207, 102, 0.6)',
+    shadowColor: 'rgba(81, 207, 102, 0.4)',
+  },
 };
 
+// 生成伪随机数（用于萤火虫和花瓣位置）
+function seeded(i, salt) {
+  const v = Math.sin((i + 1) * 12.9898 + salt * 78.233) * 43758.5453;
+  return v - Math.floor(v);
+}
+
 Page({
   data: {
-    treeName: TREE_CONFIG.name,
-    treeDesc: TREE_CONFIG.desc,
     wishes: [],
+    recentWishes: [],
     loading: true,
     showCreateModal: false,
     wishContent: '',
@@ -20,26 +58,14 @@ Page({
     maxPaidLength: 100,
     products: [],
     selectedProduct: null,
-    micEnabled: false,
+    fireflies: [],
-    windLevel: 0,
+    petals: [],
   },
 
   onLoad() {
+    this.initAmbiance();
     this.loadWishes();
     this.loadProducts();
-    this.initSensors();
-  },
-
-  onReady() {
-    this.initWebGL();
-  },
-
-  onUnload() {
-    this.stopAnimation();
-    this.stopSensors();
-    if (this.renderer) {
-      this.renderer.dispose();
-    }
   },
 
   onPullDownRefresh() {
@@ -48,709 +74,32 @@ Page({
     });
   },
 
-  // 初始化 WebGL
+  // 初始化氛围效果
-  initWebGL() {
+  initAmbiance() {
-    const query = wx.createSelectorQuery().in(this);
+    // 萤火虫
-    query.select('#webgl-canvas')
+    const fireflies = [];
-      .node()
+    for (let i = 0; i < 22; i++) {
-      .exec((res) => {
+      fireflies.push({
-        if (!res || !res[0] || !res[0].node) {
+        left: seeded(i, 1) * 100,
-          console.error('Canvas 初始化失败');
+        top: seeded(i, 2) * 100,
-          return;
+        size: 2 + seeded(i, 3) * 4,
-        }
+        duration: 2.5 + seeded(i, 4) * 3.5,
-        
+        delay: seeded(i, 5) * 4,
-        const canvas = res[0].node;
-        this.canvas = canvas;
-        
-        // 获取系统信息
-        const systemInfo = wx.getSystemInfoSync();
-        const dpr = systemInfo.pixelRatio;
-        
-        // 设置画布尺寸
-        canvas.width = systemInfo.windowWidth * dpr;
-        canvas.height = systemInfo.windowHeight * dpr;
-        
-        this.width = canvas.width;
-        this.height = canvas.height;
-        this.dpr = dpr;
-        
-        // 初始化 Three.js 场景
-        this.initThreeScene();
-        
-        // 开始动画
-        this.startAnimation();
       });
-  },
-
-  // 初始化 Three.js 场景
-  initThreeScene() {
-    const canvas = this.canvas;
-    const gl = canvas.getContext('webgl');
-    
-    if (!gl) {
-      console.error('WebGL 不支持');
-      return;
     }
 
-    this.gl = gl;
+    // 花瓣
-    
+    const petals = [];
-    // 手动创建 Three.js 核心对象
+    for (let i = 0; i < 10; i++) {
-    // 由于小程序限制，我们使用原生 WebGL API
+      petals.push({
-    
+        left: seeded(i, 6) * 100,
-    // 设置视口
+        size: 5 + seeded(i, 7) * 6,
-    gl.viewport(0, 0, this.width, this.height);
+        duration: 10 + seeded(i, 8) * 8,
-    gl.enable(gl.DEPTH_TEST);
+        delay: seeded(i, 9) * 12,
-    gl.enable(gl.BLEND);
-    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-    
-    // 创建着色器程序
-    this.createShaderProgram();
-    
-    // 创建树的几何体
-    this.createTreeGeometry();
-    
-    // 创建丝带几何体
-    this.createRibbonGeometry();
-    
-    // 初始化相机
-    this.camera = {
-      position: [0, 2, 8],
-      target: [0, 3, 0],
-      up: [0, 1, 0],
-      fov: 45,
-      aspect: this.width / this.height,
-      near: 0.1,
-      far: 100,
-    };
-    
-    // 初始化光照
-    this.lights = {
-      ambient: { color: [0.3, 0.3, 0.4], intensity: 0.5 },
-      directional: { 
-        color: [1, 0.95, 0.8], 
-        intensity: 0.8,
-        direction: [0.5, 1, 0.5],
-      },
-      point: {
-        color: [1, 0.8, 0.4],
-        intensity: 0.5,
-        position: [0, 5, 2],
-      },
-    };
-    
-    // 动画状态
-    this.animationState = {
-      time: 0,
-      windLevel: 0,
-      rotation: 0,
-    };
-  },
-
-  // 创建着色器程序
-  createShaderProgram() {
-    const gl = this.gl;
-    
-    // 顶点着色器
-    const vsSource = `
-      attribute vec3 aPosition;
-      attribute vec3 aNormal;
-      attribute vec2 aTexCoord;
-      attribute vec3 aColor;
-      
-      uniform mat4 uModelMatrix;
-      uniform mat4 uViewMatrix;
-      uniform mat4 uProjectionMatrix;
-      uniform mat3 uNormalMatrix;
-      
-      varying vec3 vNormal;
-      varying vec3 vPosition;
-      varying vec2 vTexCoord;
-      varying vec3 vColor;
-      
-      void main() {
-        vec4 worldPosition = uModelMatrix * vec4(aPosition, 1.0);
-        vPosition = worldPosition.xyz;
-        vNormal = uNormalMatrix * aNormal;
-        vTexCoord = aTexCoord;
-        vColor = aColor;
-        gl_Position = uProjectionMatrix * uViewMatrix * worldPosition;
-      }
-    `;
-    
-    // 片段着色器
-    const fsSource = `
-      precision mediump float;
-      
-      varying vec3 vNormal;
-      varying vec3 vPosition;
-      varying vec2 vTexCoord;
-      varying vec3 vColor;
-      
-      uniform vec3 uAmbientLight;
-      uniform vec3 uDirectionalLightColor;
-      uniform vec3 uDirectionalLightDirection;
-      uniform vec3 uPointLightColor;
-      uniform vec3 uPointLightPosition;
-      uniform vec3 uCameraPosition;
-      uniform float uTime;
-      
-      void main() {
-        vec3 normal = normalize(vNormal);
-        vec3 viewDir = normalize(uCameraPosition - vPosition);
-        
-        // 环境光
-        vec3 ambient = uAmbientLight * vColor;
-        
-        // 漫反射
-        float diff = max(dot(normal, uDirectionalLightDirection), 0.0);
-        vec3 diffuse = uDirectionalLightColor * diff * vColor;
-        
-        // 点光源
-        vec3 lightDir = normalize(uPointLightPosition - vPosition);
-        float pointDiff = max(dot(normal, lightDir), 0.0);
-        float distance = length(uPointLightPosition - vPosition);
-        float attenuation = 1.0 / (1.0 + 0.05 * distance + 0.01 * distance * distance);
-        vec3 pointLight = uPointLightColor * pointDiff * attenuation * vColor;
-        
-        // 高光
-        vec3 reflectDir = reflect(-uDirectionalLightDirection, normal);
-        float spec = pow(max(dot(viewDir, reflectDir), 0.0), 32.0);
-        vec3 specular = uDirectionalLightColor * spec * 0.3;
-        
-        // 发光效果（许愿树特殊效果）
-        float glow = sin(uTime * 2.0 + vPosition.y * 3.0) * 0.5 + 0.5;
-        vec3 glowColor = vec3(1.0, 0.9, 0.5) * glow * 0.2;
-        
-        vec3 result = ambient + diffuse + pointLight + specular + glowColor;
-        gl_FragColor = vec4(result, 1.0);
-      }
-    `;
-    
-    // 编译着色器
-    const vertexShader = this.compileShader(gl.VERTEX_SHADER, vsSource);
-    const fragmentShader = this.compileShader(gl.FRAGMENT_SHADER, fsSource);
-    
-    // 创建程序
-    const program = gl.createProgram();
-    gl.attachShader(program, vertexShader);
-    gl.attachShader(program, fragmentShader);
-    gl.linkProgram(program);
-    
-    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-      console.error('着色器程序链接失败:', gl.getProgramInfoLog(program));
-      return;
-    }
-    
-    this.program = program;
-    gl.useProgram(program);
-    
-    // 获取属性位置
-    this.attribLocations = {
-      position: gl.getAttribLocation(program, 'aPosition'),
-      normal: gl.getAttribLocation(program, 'aNormal'),
-      texCoord: gl.getAttribLocation(program, 'aTexCoord'),
-      color: gl.getAttribLocation(program, 'aColor'),
-    };
-    
-    // 获取 uniform 位置
-    this.uniformLocations = {
-      modelMatrix: gl.getUniformLocation(program, 'uModelMatrix'),
-      viewMatrix: gl.getUniformLocation(program, 'uViewMatrix'),
-      projectionMatrix: gl.getUniformLocation(program, 'uProjectionMatrix'),
-      normalMatrix: gl.getUniformLocation(program, 'uNormalMatrix'),
-      ambientLight: gl.getUniformLocation(program, 'uAmbientLight'),
-      directionalLightColor: gl.getUniformLocation(program, 'uDirectionalLightColor'),
-      directionalLightDirection: gl.getUniformLocation(program, 'uDirectionalLightDirection'),
-      pointLightColor: gl.getUniformLocation(program, 'uPointLightColor'),
-      pointLightPosition: gl.getUniformLocation(program, 'uPointLightPosition'),
-      cameraPosition: gl.getUniformLocation(program, 'uCameraPosition'),
-      time: gl.getUniformLocation(program, 'uTime'),
-    };
-  },
-
-  // 编译着色器
-  compileShader(type, source) {
-    const gl = this.gl;
-    const shader = gl.createShader(type);
-    gl.shaderSource(shader, source);
-    gl.compileShader(shader);
-    
-    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-      console.error('着色器编译失败:', gl.getShaderInfoLog(shader));
-      gl.deleteShader(shader);
-      return null;
-    }
-    
-    return shader;
-  },
-
-  // 创建树的几何体
-  createTreeGeometry() {
-    // 树干 - 使用圆柱体变形
-    const trunkSegments = 16;
-    const trunkHeight = 4;
-    const trunkRadiusBottom = 0.4;
-    const trunkRadiusTop = 0.15;
-    
-    const trunkVertices = [];
-    const trunkNormals = [];
-    const trunkColors = [];
-    const trunkIndices = [];
-    
-    // 生成树干顶点
-    for (let i = 0; i <= trunkSegments; i++) {
-      const t = i / trunkSegments;
-      const y = t * trunkHeight;
-      const radius = trunkRadiusBottom + (trunkRadiusTop - trunkRadiusBottom) * t;
-      
-      // 添加扭曲效果
-      const twist = t * 2;
-      const offsetX = Math.sin(twist) * 0.1 * t;
-      const offsetZ = Math.cos(twist) * 0.1 * t;
-      
-      for (let j = 0; j <= trunkSegments; j++) {
-        const angle = (j / trunkSegments) * Math.PI * 2;
-        const x = Math.cos(angle) * radius + offsetX;
-        const z = Math.sin(angle) * radius + offsetZ;
-        
-        trunkVertices.push(x, y, z);
-        
-        // 法线
-        const nx = Math.cos(angle);
-        const nz = Math.sin(angle);
-        trunkNormals.push(nx, 0, nz);
-        
-        // 颜色 - 树干棕色
-        const shade = 0.3 + Math.random() * 0.1;
-        trunkColors.push(shade, shade * 0.6, shade * 0.3);
-      }
-    }
-    
-    // 生成树干索引
-    for (let i = 0; i < trunkSegments; i++) {
-      for (let j = 0; j < trunkSegments; j++) {
-        const a = i * (trunkSegments + 1) + j;
-        const b = a + trunkSegments + 1;
-        
-        trunkIndices.push(a, b, a + 1);
-        trunkIndices.push(b, b + 1, a + 1);
-      }
-    }
-    
-    this.trunkGeometry = {
-      vertices: new Float32Array(trunkVertices),
-      normals: new Float32Array(trunkNormals),
-      colors: new Float32Array(trunkColors),
-      indices: new Uint16Array(trunkIndices),
-    };
-    
-    // 树冠 - 使用多个球体变形
-    this.crownGeometry = this.createCrownGeometry();
-    
-    // 创建缓冲区
-    this.createBuffers();
-  },
-
-  // 创建树冠几何体
-  createCrownGeometry() {
-    const crownLayers = 5;
-    const segments = 16;
-    
-    const vertices = [];
-    const normals = [];
-    const colors = [];
-    const indices = [];
-    
-    let vertexOffset = 0;
-    
-    for (let layer = 0; layer < crownLayers; layer++) {
-      const layerT = layer / crownLayers;
-      const layerY = 3 + layer * 0.8;
-      const layerRadius = 2.5 - layer * 0.4;
-      const layerHeight = 1.2;
-      
-      // 每层树冠是一个变形的球体
-      for (let i = 0; i <= segments; i++) {
-        const t = i / segments;
-        const phi = t * Math.PI;
-        
-        for (let j = 0; j <= segments; j++) {
-          const theta = (j / segments) * Math.PI * 2;
-          
-          // 基础球体坐标
-          let x = layerRadius * Math.sin(phi) * Math.cos(theta);
-          let y = layerY + layerHeight * Math.cos(phi);
-          let z = layerRadius * Math.sin(phi) * Math.sin(theta);
-          
-          // 添加噪声使树冠更自然
-          const noise = Math.sin(theta * 5 + layer) * 0.2 + Math.cos(phi * 3) * 0.15;
-          x += noise * Math.cos(theta);
-          z += noise * Math.sin(theta);
-          y += Math.sin(theta * 3 + layer * 2) * 0.1;
-          
-          vertices.push(x, y, z);
-          
-          // 法线
-          const nx = Math.sin(phi) * Math.cos(theta);
-          const ny = Math.cos(phi);
-          const nz = Math.sin(phi) * Math.sin(theta);
-          normals.push(nx, ny, nz);
-          
-          // 颜色 - 绿色渐变
-          const green = 0.4 + layerT * 0.3 + Math.random() * 0.1;
-          colors.push(0.1, green, 0.15);
-        }
-      }
-      
-      // 生成索引
-      for (let i = 0; i < segments; i++) {
-        for (let j = 0; j < segments; j++) {
-          const a = vertexOffset + i * (segments + 1) + j;
-          const b = a + segments + 1;
-          
-          indices.push(a, b, a + 1);
-          indices.push(b, b + 1, a + 1);
-        }
-      }
-      
-      vertexOffset += (segments + 1) * (segments + 1);
-    }
-    
-    return {
-      vertices: new Float32Array(vertices),
-      normals: new Float32Array(normals),
-      colors: new Float32Array(colors),
-      indices: new Uint16Array(indices),
-    };
-  },
-
-  // 创建丝带几何体
-  createRibbonGeometry() {
-    // 丝带将在渲染时动态生成
-    this.ribbons = [];
-  },
-
-  // 创建缓冲区
-  createBuffers() {
-    const gl = this.gl;
-    
-    // 树干缓冲区
-    this.trunkBuffers = {
-      position: gl.createBuffer(),
-      normal: gl.createBuffer(),
-      color: gl.createBuffer(),
-      index: gl.createBuffer(),
-    };
-    
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.trunkBuffers.position);
-    gl.bufferData(gl.ARRAY_BUFFER, this.trunkGeometry.vertices, gl.STATIC_DRAW);
-    
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.trunkBuffers.normal);
-    gl.bufferData(gl.ARRAY_BUFFER, this.trunkGeometry.normals, gl.STATIC_DRAW);
-    
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.trunkBuffers.color);
-    gl.bufferData(gl.ARRAY_BUFFER, this.trunkGeometry.colors, gl.STATIC_DRAW);
-    
-    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.trunkBuffers.index);
-    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.trunkGeometry.indices, gl.STATIC_DRAW);
-    
-    // 树冠缓冲区
-    this.crownBuffers = {
-      position: gl.createBuffer(),
-      normal: gl.createBuffer(),
-      color: gl.createBuffer(),
-      index: gl.createBuffer(),
-    };
-    
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.crownBuffers.position);
-    gl.bufferData(gl.ARRAY_BUFFER, this.crownGeometry.vertices, gl.STATIC_DRAW);
-    
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.crownBuffers.normal);
-    gl.bufferData(gl.ARRAY_BUFFER, this.crownGeometry.normals, gl.STATIC_DRAW);
-    
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.crownBuffers.color);
-    gl.bufferData(gl.ARRAY_BUFFER, this.crownGeometry.colors, gl.STATIC_DRAW);
-    
-    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.crownBuffers.index);
-    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.crownGeometry.indices, gl.STATIC_DRAW);
-  },
-
-  // 开始动画循环
-  startAnimation() {
-    const animate = () => {
-      this.animationState.time += 0.016;
-      this.animationState.windLevel = this.data.windLevel;
-      
-      this.render();
-      
-      this.animationId = canvas.requestAnimationFrame(animate);
-    };
-    
-    this.animationId = this.canvas.requestAnimationFrame(animate);
-  },
-
-  // 停止动画
-  stopAnimation() {
-    if (this.animationId) {
-      this.canvas.cancelAnimationFrame(this.animationId);
-    }
-  },
-
-  // 渲染场景
-  render() {
-    const gl = this.gl;
-    
-    // 清空画布
-    gl.clearColor(0.05, 0.05, 0.15, 1.0);
-    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-    
-    // 更新相机
-    this.updateCamera();
-    
-    // 设置光照
-    this.setLights();
-    
-    // 绘制树干
-    this.drawMesh(this.trunkBuffers, this.trunkGeometry.indices.length);
-    
-    // 绘制树冠
-    this.drawMesh(this.crownBuffers, this.crownGeometry.indices.length);
-    
-    // 绘制丝带
-    this.drawRibbons();
-  },
-
-  // 更新相机
-  updateCamera() {
-    const gl = this.gl;
-    const camera = this.camera;
-    
-    // 相机旋转动画
-    const rotationSpeed = 0.001;
-    this.animationState.rotation += rotationSpeed;
-    
-    const radius = 8;
-    camera.position[0] = Math.sin(this.animationState.rotation) * radius;
-    camera.position[2] = Math.cos(this.animationState.rotation) * radius;
-    camera.position[1] = 2 + Math.sin(this.animationState.time * 0.5) * 0.5;
-    
-    // 计算视图矩阵
-    const viewMatrix = this.lookAt(camera.position, camera.target, camera.up);
-    
-    // 计算投影矩阵
-    const projectionMatrix = this.perspective(
-      camera.fov * Math.PI / 180,
-      camera.aspect,
-      camera.near,
-      camera.far
-    );
-    
-    // 设置 uniform
-    gl.uniformMatrix4fv(this.uniformLocations.viewMatrix, false, viewMatrix);
-    gl.uniformMatrix4fv(this.uniformLocations.projectionMatrix, false, projectionMatrix);
-    gl.uniform3fv(this.uniformLocations.cameraPosition, camera.position);
-    gl.uniform1f(this.uniformLocations.time, this.animationState.time);
-  },
-
-  // 设置光照
-  setLights() {
-    const gl = this.gl;
-    const lights = this.lights;
-    
-    gl.uniform3fv(this.uniformLocations.ambientLight, 
-      lights.ambient.color.map(c => c * lights.ambient.intensity));
-    
-    gl.uniform3fv(this.uniformLocations.directionalLightColor,
-      lights.directional.color.map(c => c * lights.directional.intensity));
-    gl.uniform3fv(this.uniformLocations.directionalLightDirection,
-      lights.directional.direction);
-    
-    gl.uniform3fv(this.uniformLocations.pointLightColor,
-      lights.point.color.map(c => c * lights.point.intensity));
-    gl.uniform3fv(this.uniformLocations.pointLightPosition,
-      lights.point.position);
-  },
-
-  // 绘制网格
-  drawMesh(buffers, indexCount) {
-    const gl = this.gl;
-    
-    // 设置模型矩阵
-    const modelMatrix = this.identity();
-    gl.uniformMatrix4fv(this.uniformLocations.modelMatrix, false, modelMatrix);
-    
-    // 设置法线矩阵
-    const normalMatrix = [1, 0, 0, 0, 1, 0, 0, 0, 1];
-    gl.uniformMatrix3fv(this.uniformLocations.normalMatrix, false, normalMatrix);
-    
-    // 绑定顶点属性
-    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
-    gl.enableVertexAttribArray(this.attribLocations.position);
-    gl.vertexAttribPointer(this.attribLocations.position, 3, gl.FLOAT, false, 0, 0);
-    
-    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.normal);
-    gl.enableVertexAttribArray(this.attribLocations.normal);
-    gl.vertexAttribPointer(this.attribLocations.normal, 3, gl.FLOAT, false, 0, 0);
-    
-    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.color);
-    gl.enableVertexAttribArray(this.attribLocations.color);
-    gl.vertexAttribPointer(this.attribLocations.color, 3, gl.FLOAT, false, 0, 0);
-    
-    // 绘制
-    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers.index);
-    gl.drawElements(gl.TRIANGLES, indexCount, gl.UNSIGNED_SHORT, 0);
-  },
-
-  // 绘制丝带
-  drawRibbons() {
-    // 根据许愿数据动态生成丝带
-    const wishes = this.data.wishes;
-    if (!wishes || wishes.length === 0) return;
-    
-    // 这里简化处理，使用线条绘制丝带
-    // 实际项目中可以使用更复杂的几何体
-  },
-
-  // 矩阵工具函数
-  identity() {
-    return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
-  },
-
-  lookAt(eye, center, up) {
-    const z = this.normalize(this.subtract(eye, center));
-    const x = this.normalize(this.cross(up, z));
-    const y = this.cross(z, x);
-    
-    return [
-      x[0], y[0], z[0], 0,
-      x[1], y[1], z[1], 0,
-      x[2], y[2], z[2], 0,
-      -this.dot(x, eye), -this.dot(y, eye), -this.dot(z, eye), 1
-    ];
-  },
-
-  perspective(fov, aspect, near, far) {
-    const f = 1.0 / Math.tan(fov / 2);
-    const nf = 1 / (near - far);
-    
-    return [
-      f / aspect, 0, 0, 0,
-      0, f, 0, 0,
-      0, 0, (far + near) * nf, -1,
-      0, 0, 2 * far * near * nf, 0
-    ];
-  },
-
-  subtract(a, b) {
-    return [a[0] - b[0], a[1] - b[1], a[2] - b[2]];
-  },
-
-  cross(a, b) {
-    return [
-      a[1] * b[2] - a[2] * b[1],
-      a[2] * b[0] - a[0] * b[2],
-      a[0] * b[1] - a[1] * b[0]
-    ];
-  },
-
-  dot(a, b) {
-    return a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
-  },
-
-  normalize(v) {
-    const len = Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2]);
-    return len > 0 ? [v[0] / len, v[1] / len, v[2] / len] : [0, 0, 0];
-  },
-
-  // 初始化传感器
-  initSensors() {
-    // 陀螺仪
-    wx.startGyroscope({
-      interval: 'game',
-      success: () => {
-        wx.onGyroscopeChange((res) => {
-          const wind = Math.min(1, Math.abs(res.x) * 0.5 + Math.abs(res.y) * 0.3);
-          this.setData({ windLevel: wind });
       });
-      },
-      fail: () => {
-        console.log('陀螺仪不可用');
-      },
-    });
-
-    // 麦克风
-    this.recorderManager = wx.getRecorderManager();
-    this.recorderManager.onFrameRecorded((res) => {
-      if (res.frameBuffer) {
-        const volume = this.analyzeVolume(res.frameBuffer);
-        this.setData({ windLevel: Math.min(1, volume * 2) });
     }
-    });
-  },
 
-  // 分析音量
+    this.setData({ fireflies, petals });
-  analyzeVolume(buffer) {
-    const data = new Int16Array(buffer);
-    let sum = 0;
-    for (let i = 0; i < data.length; i++) {
-      sum += Math.abs(data[i]);
-    }
-    return sum / data.length / 32768;
-  },
-
-  // 开启麦克风
-  enableMicrophone() {
-    wx.authorize({
-      scope: 'scope.record',
-      success: () => {
-        this.recorderManager.start({
-          duration: 600000,
-          sampleRate: 16000,
-          numberOfChannels: 1,
-          encodeBitRate: 48000,
-          format: 'PCM',
-          frameSize: 50,
-        });
-        this.setData({ micEnabled: true });
-        wx.showToast({ title: '吹气让树摇摆', icon: 'none' });
-      },
-      fail: () => {
-        wx.showToast({ title: '需要麦克风权限', icon: 'none' });
-      },
-    });
-  },
-
-  // 停止传感器
-  stopSensors() {
-    wx.stopGyroscope();
-    if (this.recorderManager) {
-      this.recorderManager.stop();
-    }
-  },
-
-  // 画布触摸事件
-  onCanvasTouch(e) {
-    // 处理触摸旋转
-    this.touchStartX = e.touches[0].x;
-    this.touchStartY = e.touches[0].y;
-  },
-
-  onCanvasMove(e) {
-    if (this.touchStartX === undefined) return;
-    
-    const deltaX = e.touches[0].x - this.touchStartX;
-    const deltaY = e.touches[0].y - this.touchStartY;
-    
-    // 根据触摸移动调整相机
-    this.animationState.rotation += deltaX * 0.005;
-    
-    this.touchStartX = e.touches[0].x;
-    this.touchStartY = e.touches[0].y;
-  },
-
-  onCanvasEnd() {
-    this.touchStartX = undefined;
-    this.touchStartY = undefined;
   },
 
   // 加载许愿
@@ -762,22 +111,79 @@ Page({
       });
       
       if (res.code === 0) {
-        this.setData({ wishes: res.data.list || [] });
+        const wishes = this.formatWishes(res.data.list || []);
+        this.setData({ 
+          wishes,
+          recentWishes: wishes.slice(0, 8),
+          loading: false,
+        });
       }
     } catch (err) {
       console.error('加载许愿失败:', err);
-      this.setData({ wishes: this.getMockWishes() });
+      const wishes = this.formatWishes(this.getMockWishes());
+      this.setData({ 
+        wishes,
+        recentWishes: wishes.slice(0, 8),
+        loading: false,
+      });
     }
   },
 
+  // 格式化许愿数据
+  formatWishes(list) {
+    const colorKeys = Object.keys(TAG_COLORS);
+    
+    return list.map((wish, index) => {
+      const slot = this.pickSlot(index);
+      const colorKey = colorKeys[index % colorKeys.length];
+      const colors = TAG_COLORS[colorKey];
+      
+      return {
+        id: wish.id,
+        content: wish.content,
+        author: wish.author || '匿名',
+        type: wish.type,
+        x: slot.x,
+        y: slot.y,
+        color: colors.color,
+        bgColor: colors.bgColor,
+        borderColor: colors.borderColor,
+        shadowColor: colors.shadowColor,
+        swayDuration: 3.4 + (index % 5) * 0.6,
+        swayDelay: (index % 7) * 0.35,
+        isNew: false,
+      };
+    });
+  },
+
+  // 选择挂载点
+  pickSlot(index) {
+    const base = CANOPY_SLOTS[index % CANOPY_SLOTS.length];
+    const wrap = Math.floor(index / CANOPY_SLOTS.length);
+    
+    if (wrap === 0) return base;
+    
+    const jitterX = ((wrap * 37) % 9) - 4;
+    const jitterY = ((wrap * 53) % 9) - 4;
+    
+    return {
+      x: Math.min(92, Math.max(8, base.x + jitterX)),
+      y: Math.min(58, Math.max(10, base.y + jitterY)),
+    };
+  },
+
   // 模拟许愿数据
   getMockWishes() {
     return [
-      { id: 1, content: '愿家人平安健康', type: 'paid' },
+      { id: 1, content: '愿家人平安喜乐，身体健康', author: '小满', type: 'paid' },
-      { id: 2, content: '事业顺利', type: 'free' },
+      { id: 2, content: '希望今年考研上岸，一战成硕', author: '阿远', type: 'free' },
-      { id: 3, content: '心想事成', type: 'paid' },
+      { id: 3, content: '愿世界温柔以待每一个努力的人', author: '林深', type: 'paid' },
-      { id: 4, content: '考试通过', type: 'free' },
+      { id: 4, content: '早日遇见那个对的人', author: '拾光', type: 'free' },
-      { id: 5, content: '财源广进', type: 'paid' },
+      { id: 5, content: '祝爸妈身体硬朗，笑口常开', author: '念念', type: 'paid' },
+      { id: 6, content: '愿所求皆如愿，所行皆坦途', author: '白露', type: 'free' },
+      { id: 7, content: '希望新工作顺顺利利', author: '子夜', type: 'paid' },
+      { id: 8, content: '愿此生尽兴，赤诚善良', author: '青禾', type: 'free' },
+      { id: 9, content: '愿代码零bug，一次通过', author: '小测', type: 'paid' },
     ];
   },
 
@@ -920,6 +326,14 @@ Page({
     });
   },
 
+  // 查看许愿详情
+  viewWishDetail(e) {
+    const id = e.currentTarget.dataset.id;
+    wx.navigateTo({
+      url: `/pages/wish-detail/wish-detail?id=${id}`,
+    });
+  },
+
   // 分享
   onShareAppMessage() {
     return {

mini/pages/wish-tree/wish-tree.wxml

@@ -1,26 +1,83 @@
 <view class="container">
-  <!-- WebGL Canvas -->
+  <!-- 背景氛围：萤火虫 -->
-  <canvas 
+  <view class="ambiance">
-    type="webgl"
+    <view 
-    id="webgl-canvas"
+      wx:for="{{fireflies}}" 
-    class="webgl-canvas"
+      wx:key="index"
-    bindtouchstart="onCanvasTouch"
+      class="firefly"
-    bindtouchmove="onCanvasMove"
+      style="left: {{item.left}}%; top: {{item.top}}%; width: {{item.size}}px; height: {{item.size}}px; animation-duration: {{item.duration}}s; animation-delay: {{item.delay}}s;"
-    bindtouchend="onCanvasEnd"
+    ></view>
-  ></canvas>
-
-  <!-- 顶部导航 -->
-  <view class="top-bar">
-    <view class="tree-info">
-      <text class="tree-name">{{treeName}}</text>
-      <text class="tree-desc">{{treeDesc}}</text>
   </view>
 
-    <!-- 传感器控制 -->
+  <!-- 背景氛围：花瓣 -->
-    <view class="sensor-controls">
+  <view class="petals">
-      <view class="sensor-btn {{micEnabled ? 'active' : ''}}" bindtap="enableMicrophone">
+    <view 
-        <text class="sensor-icon">🎤</text>
+      wx:for="{{petals}}" 
+      wx:key="index"
+      class="petal"
+      style="left: {{item.left}}%; width: {{item.size}}px; height: {{item.size}}px; animation-duration: {{item.duration}}s; animation-delay: {{item.delay}}s;"
+    ></view>
   </view>
+
+  <!-- 边缘暗角，让树从中心发光 -->
+  <view class="vignette"></view>
+
+  <!-- 主内容 -->
+  <view class="main-content">
+    <!-- 头部 -->
+    <view class="header">
+      <text class="subtitle">MAKE A WISH</text>
+      <text class="title">许愿树</text>
+      <text class="description">月色微凉，灯火摇曳。写下心中所愿，挂上枝头，静待花开成真。</text>
+      <text class="wish-count">已有 <text class="count">{{wishes.length}}</text> 个心愿挂满枝头</text>
+    </view>
+
+    <!-- 许愿树 -->
+    <view class="tree-container">
+      <image 
+        src="/images/wish-tree.png" 
+        class="tree-image"
+        mode="aspectFit"
+      />
+      
+      <!-- 许愿标签 -->
+      <view 
+        wx:for="{{wishes}}" 
+        wx:key="id"
+        class="wish-tag {{item.isNew ? 'new' : ''}}"
+        style="left: {{item.x}}%; top: {{item.y}}%;"
+        bindtap="viewWishDetail"
+        data-id="{{item.id}}"
+      >
+        <view class="tag-sway" style="animation-duration: {{item.swayDuration}}s; animation-delay: {{item.swayDelay}}s;">
+          <!-- 挂绳 -->
+          <view class="tag-string" style="background: linear-gradient(to bottom, transparent, {{item.color}});"></view>
+          <!-- 绳结 -->
+          <view class="tag-knot" style="background: {{item.color}}; box-shadow: 0 0 8px {{item.color}};"></view>
+          <!-- 标签 -->
+          <view class="tag-content" style="background: {{item.bgColor}}; border: 1px solid {{item.borderColor}}; box-shadow: 0 4px 16px {{item.shadowColor}};">
+            <text class="tag-text">{{item.content}}</text>
+            <text class="tag-author">—— {{item.author}}</text>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 最近的心愿 -->
+    <view class="recent-section">
+      <text class="section-title">最 近 的 心 愿</text>
+      <scroll-view class="recent-list" scroll-x enhanced show-scrollbar="{{false}}">
+        <view 
+          wx:for="{{recentWishes}}" 
+          wx:key="id"
+          class="recent-item"
+          bindtap="viewWishDetail"
+          data-id="{{item.id}}"
+        >
+          <text class="recent-text">{{item.content}}</text>
+          <text class="recent-author">—— {{item.author}}</text>
+        </view>
+      </scroll-view>
     </view>
   </view>
 
@@ -28,7 +85,7 @@
   <view class="action-bar">
     <button class="btn-wish" bindtap="openCreateModal">
       <text class="icon">🙏</text>
-      <text>我要许愿</text>
+      <text>写下心愿</text>
     </button>
   </view>
 

mini/pages/wish-tree/wish-tree.wxss

@@ -3,88 +3,252 @@
   width: 100vw;
   height: 100vh;
   overflow: hidden;
-  background: linear-gradient(180deg, #0a0a1a 0%, #1a1a3a 50%, #0f2a4a 100%);
+  background: #0d0d1a;
 }
 
-/* WebGL Canvas */
+/* 背景氛围 */
-.webgl-canvas {
+.ambiance {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
+  pointer-events: none;
   z-index: 1;
 }
 
-/* 顶部导航 */
+.firefly {
-.top-bar {
+  position: absolute;
+  border-radius: 50%;
+  background: #ffd700;
+  box-shadow: 0 0 8px #ffd700, 0 0 14px #ffd700;
+  animation: twinkle 3s ease-in-out infinite;
+}
+
+.petals {
   position: absolute;
   top: 0;
   left: 0;
-  right: 0;
+  width: 100%;
-  padding: 100rpx 40rpx 30rpx;
+  height: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  z-index: 100;
   pointer-events: none;
+  z-index: 1;
 }
 
-.top-bar .tree-info,
+.petal {
-.top-bar .sensor-controls {
+  position: absolute;
-  pointer-events: auto;
+  top: -20px;
+  border-radius: 50% 50% 50% 0;
+  background: rgba(255, 200, 200, 0.6);
+  animation: drift 12s linear infinite;
 }
 
-.tree-info {
+/* 边缘暗角 */
+.vignette {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(120% 90% at 50% 30%, transparent 40%, rgba(13, 13, 26, 0.9) 100%);
+  pointer-events: none;
+  z-index: 2;
+}
+
+/* 主内容 */
+.main-content {
+  position: relative;
+  z-index: 10;
   display: flex;
   flex-direction: column;
-  gap: 8rpx;
-}
-
-.tree-name {
-  font-size: 40rpx;
-  color: #ffd700;
-  font-weight: bold;
-  text-shadow: 0 2rpx 10rpx rgba(255, 215, 0, 0.5);
-}
-
-.tree-desc {
-  font-size: 24rpx;
-  color: rgba(255, 255, 255, 0.7);
-}
-
-/* 传感器控制 */
-.sensor-controls {
-  display: flex;
-  gap: 16rpx;
-}
-
-.sensor-btn {
-  width: 80rpx;
-  height: 80rpx;
-  display: flex;
   align-items: center;
-  justify-content: center;
+  min-height: 100vh;
-  background: rgba(255, 255, 255, 0.1);
+  padding: 60rpx 40rpx 200rpx;
+}
+
+/* 头部 */
+.header {
+  text-align: center;
+  margin-bottom: 20rpx;
+}
+
+.subtitle {
+  display: block;
+  font-size: 20rpx;
+  letter-spacing: 8rpx;
+  color: rgba(255, 215, 0, 0.8);
+  margin-bottom: 16rpx;
+}
+
+.title {
+  display: block;
+  font-size: 72rpx;
+  font-weight: bold;
+  color: #ffd700;
+  text-shadow: 0 4rpx 24rpx rgba(255, 215, 0, 0.4);
+  margin-bottom: 24rpx;
+}
+
+.description {
+  display: block;
+  font-size: 26rpx;
+  color: rgba(255, 255, 255, 0.7);
+  line-height: 1.6;
+  max-width: 500rpx;
+  margin: 0 auto 20rpx;
+}
+
+.wish-count {
+  display: block;
+  font-size: 24rpx;
+  color: rgba(255, 215, 0, 0.7);
+}
+
+.wish-count .count {
+  font-weight: bold;
+  color: #ffd700;
+}
+
+/* 许愿树容器 */
+.tree-container {
+  position: relative;
+  width: 100%;
+  max-width: 700rpx;
+  aspect-ratio: 1;
+  margin: 0 auto;
+}
+
+.tree-image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+/* 许愿标签 */
+.wish-tag {
+  position: absolute;
+  z-index: 20;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.wish-tag.new {
+  animation: tag-drop 0.7s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.tag-sway {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  transform-origin: top center;
+  animation: sway 4s ease-in-out infinite;
+}
+
+.tag-string {
+  width: 2rpx;
+  height: 40rpx;
+}
+
+.tag-knot {
+  width: 12rpx;
+  height: 12rpx;
   border-radius: 50%;
-  border: 2rpx solid rgba(255, 255, 255, 0.2);
+  margin-top: -2rpx;
-  transition: all 0.3s;
 }
 
-.sensor-btn.active {
+.tag-content {
-  background: rgba(255, 215, 0, 0.3);
+  margin-top: 8rpx;
-  border-color: rgba(255, 215, 0, 0.6);
+  padding: 16rpx 20rpx;
-  box-shadow: 0 0 30rpx rgba(255, 215, 0, 0.4);
+  border-radius: 12rpx;
+  min-width: 160rpx;
+  max-width: 200rpx;
+  backdrop-filter: blur(4px);
+  transition: transform 0.3s;
 }
 
-.sensor-icon {
+.wish-tag:active .tag-content {
-  font-size: 40rpx;
+  transform: translateY(-4rpx) scale(1.05);
+}
+
+.tag-text {
+  display: block;
+  font-size: 20rpx;
+  font-weight: 500;
+  color: #2a2a3a;
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.tag-author {
+  display: block;
+  font-size: 16rpx;
+  color: #4a4a5a;
+  margin-top: 8rpx;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 最近的心愿 */
+.recent-section {
+  width: 100%;
+  margin-top: 40rpx;
+}
+
+.section-title {
+  display: block;
+  text-align: center;
+  font-size: 22rpx;
+  letter-spacing: 6rpx;
+  color: rgba(255, 255, 255, 0.5);
+  margin-bottom: 24rpx;
+}
+
+.recent-list {
+  display: flex;
+  gap: 20rpx;
+  padding-bottom: 20rpx;
+  white-space: nowrap;
+}
+
+.recent-item {
+  display: inline-flex;
+  flex-direction: column;
+  min-width: 280rpx;
+  padding: 24rpx;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1rpx solid rgba(255, 255, 255, 0.1);
+  border-radius: 20rpx;
+  backdrop-filter: blur(8px);
+}
+
+.recent-text {
+  font-size: 26rpx;
+  color: rgba(255, 255, 255, 0.9);
+  line-height: 1.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.recent-author {
+  font-size: 22rpx;
+  color: rgba(255, 255, 255, 0.5);
+  margin-top: 12rpx;
 }
 
 /* 许愿按钮 */
 .action-bar {
-  position: absolute;
+  position: fixed;
-  bottom: 80rpx;
+  bottom: 60rpx;
   left: 50%;
   transform: translateX(-50%);
   z-index: 100;
@@ -314,3 +478,56 @@
   border: none;
   box-shadow: 0 8rpx 30rpx rgba(196, 30, 58, 0.4);
 }
+
+/* 动画 */
+@keyframes sway {
+  0%, 100% {
+    transform: rotate(-3.5deg);
+  }
+  50% {
+    transform: rotate(3.5deg);
+  }
+}
+
+@keyframes twinkle {
+  0%, 100% {
+    opacity: 0.2;
+    transform: scale(0.7);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.15);
+  }
+}
+
+@keyframes drift {
+  0% {
+    transform: translate3d(0, 0, 0) rotate(0deg);
+    opacity: 0;
+  }
+  10% {
+    opacity: 0.9;
+  }
+  90% {
+    opacity: 0.9;
+  }
+  100% {
+    transform: translate3d(-40px, 120vh, 0) rotate(360deg);
+    opacity: 0;
+  }
+}
+
+@keyframes tag-drop {
+  0% {
+    transform: translateY(-24px) rotate(-8deg);
+    opacity: 0;
+  }
+  60% {
+    transform: translateY(4px) rotate(3deg);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(0) rotate(0deg);
+    opacity: 1;
+  }
+}