取名小程序开发

NamingAssistant/pages/favorites/index.js

@@ -0,0 +1,38 @@
+const namingStore = require("../../store/namingStore");
+
+function formatDisplayTime(isoString) {
+  if (!isoString) {
+    return "";
+  }
+  try {
+    const date = new Date(isoString);
+    const yyyy = date.getFullYear();
+    const mm = `${date.getMonth() + 1}`.padStart(2, "0");
+    const dd = `${date.getDate()}`.padStart(2, "0");
+    const hh = `${date.getHours()}`.padStart(2, "0");
+    const mi = `${date.getMinutes()}`.padStart(2, "0");
+    return `${yyyy}-${mm}-${dd} ${hh}:${mi}`;
+  } catch (error) {
+    return isoString;
+  }
+}
+
+Page({
+  data: {
+    favorites: []
+  },
+  onShow() {
+    namingStore.loadFavorites();
+    const { favorites } = namingStore.getState();
+    const enriched = favorites.map((item) => ({
+      ...item,
+      displayTime: formatDisplayTime(item.createdAt)
+    }));
+    this.setData({ favorites: enriched });
+  },
+  handleDelete(event) {
+    const { id } = event.currentTarget.dataset;
+    namingStore.removeFavorite(id);
+    this.onShow();
+  }
+});

NamingAssistant/pages/favorites/index.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "我的收藏"
+}

NamingAssistant/pages/favorites/index.ttml

@@ -0,0 +1,37 @@
+<view class="page">
+  <view class="glow-layer">
+    <view class="glow glow-one"></view>
+    <view class="glow glow-two"></view>
+  </view>
+
+  <scroll-view class="content" scroll-y="true">
+    <view class="headline">
+      <text class="title">珍藏阁</text>
+      <text class="subtitle">收录曾经触动心弦的灵感姓名，可随时回望取舍</text>
+    </view>
+
+    <view class="empty" tt:if="{{!favorites.length}}">
+      <text>尚未收藏姓名，去玄名殿占卜一卦吧。</text>
+    </view>
+
+    <block tt:for="{{favorites}}" tt:for-item="item" tt:for-index="index" tt:key="id">
+      <view class="favorite-card">
+        <view class="card-glow"></view>
+        <view class="favorite-header">
+          <text class="name">{{item.name}}</text>
+          <button
+            size="mini"
+            type="default"
+            data-id="{{item.id}}"
+            bindtap="handleDelete"
+            class="delete-button"
+          >
+            移除
+          </button>
+        </view>
+        <text class="meaning">{{item.meaning}}</text>
+        <text class="timestamp">收藏于 {{item.displayTime}}</text>
+      </view>
+    </block>
+  </scroll-view>
+</view>

NamingAssistant/pages/favorites/index.ttss

@@ -0,0 +1,146 @@
+.page {
+  position: relative;
+  min-height: 100vh;
+  overflow: hidden;
+}
+
+.glow-layer {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.glow {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(90px);
+  opacity: 0.5;
+  animation: float 18s ease-in-out infinite;
+}
+
+.glow-one {
+  width: 320px;
+  height: 320px;
+  top: -120px;
+  left: 10px;
+  background: radial-gradient(circle, rgba(255, 210, 160, 0.85), rgba(255, 210, 160, 0));
+}
+
+.glow-two {
+  width: 280px;
+  height: 280px;
+  bottom: -120px;
+  right: -40px;
+  background: radial-gradient(circle, rgba(125, 214, 255, 0.8), rgba(125, 214, 255, 0));
+  animation-delay: 5s;
+}
+
+@keyframes float {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+  50% {
+    transform: translate3d(30px, -25px, 0);
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.content {
+  position: relative;
+  z-index: 2;
+  height: 100vh;
+  padding: 48px 32px 120px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.headline {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.title {
+  font-size: 28px;
+  letter-spacing: 10px;
+  text-indent: 10px;
+  color: #fce8d2;
+  text-shadow: 0 0 16px rgba(255, 208, 145, 0.4);
+}
+
+.subtitle {
+  font-size: 13px;
+  color: rgba(255, 244, 227, 0.75);
+  line-height: 1.6;
+}
+
+.empty {
+  margin-top: 120px;
+  text-align: center;
+  color: rgba(255, 244, 227, 0.74);
+  font-size: 14px;
+  letter-spacing: 2px;
+}
+
+.favorite-card {
+  position: relative;
+  background: linear-gradient(135deg, rgba(22, 28, 54, 0.85), rgba(32, 38, 68, 0.75));
+  border-radius: 24px;
+  padding: 26px 24px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  overflow: hidden;
+  box-shadow: 0 12px 28px rgba(10, 14, 28, 0.45);
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.card-glow {
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(circle at 20% 20%, rgba(255, 210, 160, 0.45), transparent 60%);
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.favorite-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.name {
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: 6px;
+  color: #fdf0da;
+  z-index: 1;
+}
+
+.delete-button {
+  border-radius: 20px;
+  padding: 0 18px;
+  background: rgba(255, 255, 255, 0.12);
+  color: #fbe6ce;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  z-index: 1;
+}
+
+.meaning {
+  font-size: 14px;
+  color: rgba(255, 244, 227, 0.8);
+  line-height: 1.8;
+  z-index: 1;
+}
+
+.timestamp {
+  font-size: 12px;
+  color: rgba(255, 244, 227, 0.5);
+  letter-spacing: 2px;
+  z-index: 1;
+}

NamingAssistant/pages/home/index.js

@@ -0,0 +1,182 @@
+const namingStore = require("../../store/namingStore");
+const messages = require("../../constants/messages");
+const { validateSurname, generateName } = require("../../services/namingService");
+const { showRewardedVideoAd } = require("../../utils/adService");
+const config = require("../../config/index");
+
+function showToast(title) {
+  if (typeof tt === "undefined" || !tt.showToast) {
+    console.warn("Toast:", title);
+    return;
+  }
+  tt.showToast({
+    title,
+    icon: "none",
+    duration: 2000
+  });
+}
+
+Page({
+  data: {
+    surname: "",
+    surnameError: "",
+    gender: "male",
+    birthDate: "",
+    birthTime: "",
+    nameLength: "double",
+    isSubmitting: false,
+    quotaRemaining: null
+  },
+  onLoad() {
+    const { form, quota } = namingStore.getState();
+    this.setData({
+      surname: form.surname,
+      gender: form.gender,
+      birthDate: form.birthDate,
+      birthTime: form.birthTime,
+      nameLength: form.nameLength,
+      quotaRemaining: config.maxDailyQuota - quota.count
+    });
+  },
+  handleSurnameInput(event) {
+    const value = (event.detail.value || "").trim();
+    this.setData({
+      surname: value,
+      surnameError: ""
+    });
+    namingStore.setForm({ surname: value });
+  },
+  handleSurnameBlur() {
+    const surname = this.data.surname;
+    if (!surname) {
+      return;
+    }
+    validateSurname(surname)
+      .then((response) => {
+        if (!response || response.isValid === false) {
+          showToast(messages.INVALID_SURNAME);
+          this.setData({
+            surname: "",
+            surnameError: messages.INVALID_SURNAME
+          });
+          namingStore.setForm({ surname: "" });
+        } else {
+          this.setData({ surnameError: "" });
+        }
+      })
+      .catch(() => {
+        showToast(messages.INVALID_SURNAME);
+        this.setData({
+          surname: "",
+          surnameError: messages.INVALID_SURNAME
+        });
+        namingStore.setForm({ surname: "" });
+      });
+  },
+  handleGenderChange(event) {
+    const value = event.detail.value;
+    this.setData({ gender: value });
+    namingStore.setForm({ gender: value });
+  },
+  handleBirthDateChange(event) {
+    const value = event.detail.value;
+    this.setData({ birthDate: value });
+    namingStore.setForm({ birthDate: value });
+  },
+  handleBirthTimeChange(event) {
+    const value = event.detail.value;
+    this.setData({ birthTime: value });
+    namingStore.setForm({ birthTime: value });
+  },
+  handleNameLengthChange(event) {
+    const value = event.detail.value;
+    this.setData({ nameLength: value });
+    namingStore.setForm({ nameLength: value });
+  },
+  handleGoFavorites() {
+    if (typeof tt !== "undefined" && tt.navigateTo) {
+      tt.navigateTo({ url: "/pages/favorites/index" });
+    }
+  },
+  validateForm() {
+    const { surname, gender, birthDate, nameLength } = this.data;
+    if (!surname || !gender || !birthDate || !nameLength) {
+      showToast(messages.FORM_INCOMPLETE);
+      return false;
+    }
+    if (!namingStore.canGenerateToday()) {
+      showToast(messages.QUOTA_EXCEEDED);
+      return false;
+    }
+    return true;
+  },
+  updateQuotaState() {
+    const { quota } = namingStore.getState();
+    this.setData({
+      quotaRemaining: Math.max(config.maxDailyQuota - quota.count, 0)
+    });
+  },
+  handleGenerate() {
+    if (this.data.isSubmitting) {
+      return;
+    }
+    if (!this.validateForm()) {
+      return;
+    }
+    this.setData({ isSubmitting: true });
+    showRewardedVideoAd()
+      .then(() => this.generateName())
+      .catch((error) => {
+        if (error && error.code === "ad_not_completed") {
+          showToast(messages.WATCH_AD_TO_CONTINUE);
+        } else {
+          showToast("广告加载失败，请稍后重试");
+        }
+        this.setData({ isSubmitting: false });
+      });
+  },
+  generateName() {
+    const payload = {
+      surname: this.data.surname,
+      gender: this.data.gender,
+      birthDate: this.data.birthDate,
+      birthTime: this.data.birthTime || "",
+      nameLength: this.data.nameLength
+    };
+    generateName(payload)
+      .then((response) => {
+        const results = response && Array.isArray(response.results) ? response.results : [];
+        if (!results.length) {
+          showToast(messages.GENERATION_FAILED);
+          return;
+        }
+        const normalizedResults = results.reduce((accumulator, item) => {
+          const name = item.name || item.Name || "";
+          if (!name) {
+            return accumulator;
+          }
+          accumulator.push({
+            name,
+            meaning: item.meaning || item.Meaning || ""
+          });
+          return accumulator;
+        }, []);
+        if (!normalizedResults.length) {
+          showToast(messages.GENERATION_FAILED);
+          return;
+        }
+        namingStore.setResults(normalizedResults);
+        namingStore.incrementQuota();
+        this.updateQuotaState();
+        if (typeof tt !== "undefined" && tt.navigateTo) {
+          tt.navigateTo({ url: "/pages/result/index" });
+        }
+      })
+      .catch(() => {
+        showToast(messages.GENERATION_FAILED);
+      })
+      .finally(() => {
+        this.setData({ isSubmitting: false });
+      });
+  }
+});

NamingAssistant/pages/home/index.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "取名"
+}

NamingAssistant/pages/home/index.ttml

@@ -0,0 +1,91 @@
+<view class="page">
+  <view class="glow-layer">
+    <view class="glow glow-one"></view>
+    <view class="glow glow-two"></view>
+    <view class="glow glow-three"></view>
+  </view>
+
+  <scroll-view class="content" scroll-y="true">
+    <view class="title-block">
+      <text class="title">玄名殿</text>
+      <text class="subtitle">循星辰八卦，揽乾坤灵意，为你凝练天赐之名</text>
+
+    </view>
+
+    <view class="form-card">
+      <view class="form-item">
+        <text class="label">姓氏</text>
+        <input
+          class="input"
+          maxlength="2"
+          placeholder="请输入1-2个汉字"
+          placeholder-class="placeholder-text"
+          value="{{surname}}"
+          bindinput="handleSurnameInput"
+          bindblur="handleSurnameBlur"
+        />
+        <text class="error-text" tt:if="{{surnameError}}">{{surnameError}}</text>
+      </view>
+
+      <view class="form-item">
+        <text class="label">性别</text>
+        <radio-group class="radio-group" bindchange="handleGenderChange">
+          <label class="radio-option {{gender === 'male' ? 'selected' : ''}}" hover-class="radio-hover">
+            <radio color="#ff6a6a" value="male" checked="{{gender === 'male'}}" />男
+          </label>
+          <label class="radio-option {{gender === 'female' ? 'selected' : ''}}" hover-class="radio-hover">
+            <radio color="#ff6a6a" value="female" checked="{{gender === 'female'}}" />女
+          </label>
+        </radio-group>
+      </view>
+
+      <view class="form-item dual">
+        <view class="dual-item">
+          <text class="label">出生日期</text>
+          <picker mode="date" value="{{birthDate}}" bindchange="handleBirthDateChange">
+            <view class="picker-value">{{birthDate}}</view>
+          </picker>
+        </view>
+        <view class="dual-item">
+          <text class="label">具体时间</text>
+          <picker mode="time" value="{{birthTime}}" bindchange="handleBirthTimeChange">
+            <view class="picker-value {{birthTime ? '' : 'placeholder'}}">
+              {{birthTime || '请选择（可选）'}}
+            </view>
+          </picker>
+        </view>
+      </view>
+
+      <view class="form-item">
+        <text class="label">名字字数</text>
+        <radio-group class="radio-group" bindchange="handleNameLengthChange">
+          <label class="radio-option {{nameLength === 'single' ? 'selected' : ''}}" hover-class="radio-hover">
+            <radio color="#ff6a6a" value="single" checked="{{nameLength === 'single'}}" />单名
+          </label>
+          <label class="radio-option {{nameLength === 'double' ? 'selected' : ''}}" hover-class="radio-hover">
+            <radio color="#ff6a6a" value="double" checked="{{nameLength === 'double'}}" />双名
+          </label>
+        </radio-group>
+      </view>
+    </view>
+
+    <!-- <view class="quota" tt:if="{{quotaRemaining !== null}}">
+      今日剩余次数：<text class="quota-number">{{quotaRemaining}}</text>
+    </view> -->
+
+    <view class="action-container">
+      <button
+        class="primary generate-button"
+        type="primary"
+        bindtap="handleGenerate"
+        loading="{{isSubmitting}}"
+        disabled="{{isSubmitting}}"
+      >
+        ✨ 召唤天命之名 ✨
+      </button>
+      <button class="secondary favorites-button" bindtap="handleGoFavorites">
+        珍名阁
+      </button>
+    </view>
+  </scroll-view>
+</view>

NamingAssistant/pages/home/index.ttss

@@ -0,0 +1,223 @@
+.page {
+  position: relative;
+  min-height: 100vh;
+  overflow: hidden;
+}
+
+.glow-layer {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.glow {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(110px);
+  opacity: 0.55;
+  animation: float 22s ease-in-out infinite;
+}
+
+.glow-one {
+  width: 320px;
+  height: 320px;
+  top: -140px;
+  left: -80px;
+  background: radial-gradient(circle, rgba(255, 212, 164, 0.9), rgba(255, 198, 134, 0.12));
+}
+
+.glow-two {
+  width: 260px;
+  height: 260px;
+  bottom: 160px;
+  right: -100px;
+  background: radial-gradient(circle, rgba(122, 154, 255, 0.85), rgba(22, 36, 82, 0.05));
+  animation-delay: 6s;
+}
+
+.glow-three {
+  width: 280px;
+  height: 280px;
+  bottom: -160px;
+  left: 40px;
+  background: radial-gradient(circle, rgba(197, 134, 255, 0.85), rgba(52, 24, 80, 0.05));
+  animation-delay: 12s;
+}
+
+@keyframes float {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+  50% {
+    transform: translate3d(42px, -30px, 0);
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.content {
+  position: relative;
+  z-index: 2;
+  height: 100vh;
+  padding: 18px 12px 10px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.title-block {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.title {
+  font-size: 34px;
+  letter-spacing: 16px;
+  text-indent: 16px;
+  color: #fdf0dd;
+  text-shadow: 0 10px 26px rgba(255, 196, 132, 0.45);
+}
+
+.subtitle {
+  font-size: 14px;
+  color: rgba(255, 244, 227, 0.76);
+  line-height: 1.7;
+}
+
+.favorites-button {
+  margin: 10px auto 0;
+  padding: 0 28px;
+  width: 50%;
+  height: 30px;
+  line-height: 30px;
+  font-size: 12px;
+  background: linear-gradient(90deg, rgba(255, 230, 188, 0.22), rgba(143, 169, 255, 0.18));
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  box-shadow: 0 6px 14px rgba(16, 18, 40, 0.3);
+}
+
+.form-card {
+  background: linear-gradient(180deg, rgba(25, 31, 58, 0.9) 0%, rgba(15, 21, 40, 0.74) 100%);
+  border-radius: 24px;
+  padding: 22px 22px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  box-shadow: 0 18px 36px rgba(8, 12, 24, 0.38);
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.form-item {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.dual {
+  flex-direction: row;
+  gap: 14px;
+}
+
+.dual-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.label {
+  font-size: 15px;
+  color: rgba(255, 244, 227, 0.9);
+  letter-spacing: 4px;
+}
+
+.input,
+.picker-value {
+  background: rgba(9, 15, 33, 0.82);
+  border-radius: 14px;
+  padding: 14px 16px;
+  font-size: 15px;
+  color: #f8f2dd;
+  border: 1px solid rgba(82, 110, 166, 0.34);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
+  transition: border 0.2s ease, box-shadow 0.2s ease;
+}
+
+.input:focus,
+.picker-value:active {
+  border-color: rgba(255, 193, 135, 0.65);
+  box-shadow: 0 0 18px rgba(255, 193, 135, 0.35);
+}
+
+.placeholder-text,
+.picker-value.placeholder {
+  color: rgba(255, 244, 227, 0.46);
+}
+
+.radio-group {
+  display: flex;
+  gap: 14px;
+}
+
+.radio-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  border-radius: 14px;
+  background: rgba(16, 24, 46, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  color: rgba(255, 244, 227, 0.82);
+  transition: transform 0.2s ease, border 0.2s ease, background 0.2s ease;
+}
+
+.radio-option.selected {
+  border-color: rgba(255, 124, 148, 0.65);
+  background: rgba(255, 118, 148, 0.16);
+  box-shadow: 0 12px 20px rgba(255, 118, 148, 0.2);
+  color: #ffe9e9;
+}
+
+.radio-hover {
+  transform: translateY(-2px);
+}
+
+.quota {
+  text-align: center;
+  font-size: 13px;
+  color: rgba(255, 244, 227, 0.65);
+  letter-spacing: 2px;
+}
+
+.quota-number {
+  font-size: 18px;
+  font-weight: 600;
+  color: #ffcda9;
+  margin-left: 8px;
+}
+
+.generate-button {
+  align-self: stretch;
+  height: 52px;
+  line-height: 52px;
+  font-size: 16px;
+  border-radius: 26px;
+  margin: 4px 6px 12px;
+  background: linear-gradient(135deg, #c374ff 0%, #6ba9ff 52%, #ff7bd1 100%);
+  box-shadow: 0 18px 32px rgba(120, 92, 255, 0.35);
+  letter-spacing: 3px;
+}
+
+.action-container {
+  padding-bottom: 8px;
+}
+
+.error-text {
+  color: #ff9e9b;
+  font-size: 12px;
+  letter-spacing: 1px;
+}

NamingAssistant/pages/result/index.js

@@ -0,0 +1,54 @@
+const namingStore = require("../../store/namingStore");
+
+function showToast(title) {
+  if (typeof tt === "undefined" || !tt.showToast) {
+    console.warn("Toast:", title);
+    return;
+  }
+  tt.showToast({
+    title,
+    icon: "none",
+    duration: 2000
+  });
+}
+
+Page({
+  data: {
+    results: []
+  },
+  onLoad() {
+    const { results } = namingStore.getState();
+    if (!results || !results.length) {
+      showToast("\u6682\u65e0\u7ed3\u679c\uff0c\u8bf7\u5148\u751f\u6210\u59d3\u540d");
+      setTimeout(() => {
+        if (typeof tt !== "undefined" && tt.navigateBack) {
+          tt.navigateBack();
+        }
+      }, 1000);
+      return;
+    }
+    this.setData({ results });
+  },
+  handleFavorite(event) {
+    const { name, meaning } = event.currentTarget.dataset;
+    const item = {
+      name,
+      meaning
+    };
+    const saved = namingStore.addFavorite(item);
+    if (saved) {
+      showToast("\u5df2\u6536\u85cf");
+    } else {
+      showToast("\u6536\u85cf\u5931\u8d25");
+    }
+  },
+  handleBack() {
+    if (typeof tt !== "undefined" && tt.navigateBack) {
+      tt.navigateBack();
+      return;
+    }
+    if (typeof tt !== "undefined" && tt.redirectTo) {
+      tt.redirectTo({ url: "/pages/home/index" });
+    }
+  }
+});

NamingAssistant/pages/result/index.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "生成结果"
+}

NamingAssistant/pages/result/index.ttml

@@ -0,0 +1,40 @@
+<view class="page">
+  <view class="glow-layer">
+    <view class="glow glow-one"></view>
+    <view class="glow glow-two"></view>
+  </view>
+
+  <scroll-view class="content" scroll-y="true">
+    <view class="headline">
+      <text class="title">&#x7075;&#x7B7E;&#x63ED;&#x793A;</text>
+      <text class="subtitle">&#x4ECE;&#x661F;&#x5BBF;&#x751F;&#x8FB0;&#x63A8;&#x6F14;&#x7684;&#x4E94;&#x91CD;&#x5409;&#x540D;&#xFF0C;&#x62E9;&#x5176;&#x5FC3;&#x6709;&#x6240;&#x5411;</text>
+    </view>
+
+    <view class="empty" tt:if="{{!results.length}}">
+      <text>&#x6682;&#x65E0;&#x751F;&#x6210;&#x7ED3;&#x679C;&#xFF0C;&#x8BF7;&#x8FD4;&#x56DE;&#x4E3B;&#x9875;&#x91CD;&#x65B0;&#x53EC;&#x5524;&#x3002;</text>
+      <button class="primary back-button" bindtap="handleBack">&#x8FD4;&#x56DE;&#x4E3B;&#x9875;</button>
+    </view>
+
+    <view tt:if="{{results.length}}">
+      <view class="tip">&#x8F7B;&#x89E6;&#x6536;&#x85CF;&#xFF0C;&#x94ED;&#x8BB0;&#x5FC3;&#x4EEA;&#x4E4B;&#x540D;</view>
+      <block tt:for="{{results}}" tt:for-index="index" tt:for-item="item" tt:key="name">
+        <view class="result-card">
+          <view class="result-header">
+            <text class="name">{{item.name}}</text>
+            <button
+              class="collect-button"
+              size="mini"
+              bindtap="handleFavorite"
+              data-name="{{item.name}}"
+              data-meaning="{{item.meaning}}"
+            >
+              &#x6536;&#x85CF;
+            </button>
+          </view>
+          <text class="meaning">{{item.meaning}}</text>
+        </view>
+      </block>
+      <button class="primary back-button" bindtap="handleBack">&#x518D;&#x5360;&#x4E00;&#x5366;</button>
+    </view>
+  </scroll-view>
+</view>

NamingAssistant/pages/result/index.ttss

@@ -0,0 +1,148 @@
+.page {
+  position: relative;
+  min-height: 100vh;
+  overflow: hidden;
+}
+
+.glow-layer {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.glow {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(90px);
+  opacity: 0.5;
+  animation: float 20s ease-in-out infinite;
+}
+
+.glow-one {
+  width: 260px;
+  height: 260px;
+  top: -80px;
+  right: -40px;
+  background: radial-gradient(circle, rgba(84, 198, 255, 0.8), rgba(84, 198, 255, 0));
+}
+
+.glow-two {
+  width: 300px;
+  height: 300px;
+  bottom: -140px;
+  left: -60px;
+  background: radial-gradient(circle, rgba(214, 139, 255, 0.8), rgba(214, 139, 255, 0));
+  animation-delay: 6s;
+}
+
+@keyframes float {
+  0% {
+    transform: translate3d(0, 0, 0);
+    opacity: 0.4;
+  }
+  50% {
+    transform: translate3d(40px, -30px, 0);
+    opacity: 0.7;
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 0.4;
+  }
+}
+.content {
+  position: relative;
+  z-index: 2;
+  height: 100vh;
+  padding: 18px 12px 10px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+.headline {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.title {
+  font-size: 28px;
+  letter-spacing: 8px;
+  text-indent: 8px;
+  color: #fbe6ce;
+  text-shadow: 0 0 16px rgba(255, 196, 120, 0.35);
+}
+
+.subtitle {
+  font-size: 13px;
+  color: rgba(255, 244, 227, 0.78);
+  line-height: 1.6;
+}
+
+.tip {
+  font-size: 14px;
+  color: rgba(255, 244, 227, 0.7);
+  letter-spacing: 4px;
+  text-align: center;
+  margin-bottom: 8px;
+}
+
+.result-card {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  background: linear-gradient(135deg, rgba(16, 22, 46, 0.86), rgba(36, 44, 80, 0.76));
+  border-radius: 18px;
+  padding: 18px 20px;
+  margin-bottom: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  box-shadow: 0 18px 32px rgba(8, 12, 24, 0.45);
+  backdrop-filter: blur(16px);
+}
+
+.result-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.name {
+  font-size: 20px;
+  font-weight: 600;
+  color: #fdf0da;
+  flex: 1;
+}
+
+.collect-button {
+  height: 32px;
+  line-height: 32px;
+  padding: 0 22px;
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.12);
+  color: #fbe6ce;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+}
+
+.meaning {
+  font-size: 14px;
+  color: rgba(255, 244, 227, 0.78);
+  line-height: 1.8;
+}
+
+.back-button {
+  width: 100%;
+  border-radius: 24px;
+  margin-top: 16px;
+}
+
+.empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 18px;
+  margin-top: 80px;
+  color: rgba(255, 244, 227, 0.8);
+  font-size: 14px;
+}