取名小程序开发

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;
+}