feat: 完成UI全面优化升级

主要改进： - 添加首页背景图片 Figure.jpg - 实现结果页面全屏滑动预览功能 - 统一Loading和Error页面设计风格 - 添加半透明遮罩层提升视觉效果 - 优化按钮样式和交互动画 - 完善错误处理和用户体验技术细节： - 使用Swiper组件实现左右滑动图片浏览 - 添加毛玻璃效果和渐变色设计 - 实现响应式布局和动画效果 - 统一配色方案和视觉层级
2025-09-01 16:04:38 +08:00
parent 0a0eb378fa
commit d33f200217
5 changed files with 332 additions and 65 deletions
--- a/global.d.ts
+++ b/global.d.ts
@@ -1,18 +0,0 @@
-/// <reference path="node_modules/@tarojs/plugin-platform-tt/types/shims-tt.d.ts" />
-
-declare module '*.png';
-declare module '*.gif';
-declare module '*.jpg';
-declare module '*.jpeg';
-declare module '*.svg';
-declare module '*.css';
-declare module '*.less';
-declare module '*.scss';
-declare module '*.sass';
-declare module '*.styl';
-
-declare namespace NodeJS {
-    interface ProcessEnv {
-        TARO_ENV: 'weapp' | 'swan' | 'alipay' | 'h5' | 'rn' | 'tt' | 'quickapp' | 'qq' | 'jd'
-    }
-}
--- a/src/assets/images/Figure.jpg
+++ b/src/assets/images/Figure.jpg
--- a/src/pages/index/index.css
+++ b/src/pages/index/index.css
@@ -1,10 +1,135 @@
 .index {
+  font-size: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
  min-height: 100vh;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  min-width: 100vw;
+  margin: 0;
+  padding: 0;
+  background-image: url('../../assets/images/Figure.jpg');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  position: relative;
+}
+
+.button-container {
+  position: absolute;
+  bottom: 20vh;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+}
+
+/* Loading 遮罩层 */
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
-  padding: 40rpx;
+  z-index: 1000;
+}
+
+/* Loading 容器样式 */
+.loading-container {
+  text-align: center;
+}
+
+.loading-title {
+  font-size: 48px;
+  font-weight: bold;
+  color: #fff;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+  margin: 30px 0 15px 0;
+  display: block;
+}
+
+.loading-desc {
+  font-size: 28px;
+  color: rgba(255, 255, 255, 0.9);
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  margin: 0;
+  display: block;
+}
+
+/* Error 遮罩层 */
+.error-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+/* Error 容器样式 */
+.error-container {
+  text-align: center;
+}
+
+.error-icon {
+  font-size: 80px;
+  margin-bottom: 30px;
+  display: block;
+  animation: pulse 2s infinite;
+}
+
+.error-title {
+  font-size: 48px;
+  font-weight: bold;
+  color: #fff;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+  margin: 30px 0 15px 0;
+  display: block;
+}
+
+.error-desc {
+  font-size: 32px;
+  color: #fff;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+  margin: 0 0 30px 0;
+  display: block;
+  line-height: 1.5;
+}
+
+.error-hint {
+  font-size: 24px;
+  color: rgba(255, 255, 255, 0.6);
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  margin: 0;
+  display: block;
+  animation: blink 2s infinite;
+}
+
+@keyframes blink {
+  0%, 50% {
+    opacity: 0.6;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 0.8;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 1;
+  }
 }

 /* 通用步骤容器 */
@@ -56,13 +181,15 @@

 /* 加载动画 */
 .loading-spinner {
-  width: 80rpx;
-  height: 80rpx;
-  border: 6rpx solid #f3f3f3;
-  border-top: 6rpx solid #667eea;
+  width: 80px;
+  height: 80px;
+  border: 6px solid rgba(255, 255, 255, 0.2);
+  border-top: 6px solid #ff6b9d;
+  border-right: 6px solid #ff9a56;
  border-radius: 50%;
  animation: spin 1s linear infinite;
-  margin: 0 auto 40rpx;
+  margin: 0 auto 30px;
+  box-shadow: 0 0 30px rgba(255, 107, 157, 0.3);
 }

@keyframes spin {
@@ -70,20 +197,94 @@
  100% { transform: rotate(360deg); }
 }

-/* 结果网格 */
-.result-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 20rpx;
-  margin-bottom: 60rpx;
+/* 全屏预览容器 */
+.fullscreen-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: #000;
+  display: flex;
+  flex-direction: column;
+  z-index: 1000;
 }

-.result-image {
+/* 全屏头部 */
+.fullscreen-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20rpx 40rpx;
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+  position: relative;
+  z-index: 1001;
  width: 100%;
-  height: 280rpx;
-  border-radius: 16rpx;
-  object-fit: cover;
-  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+
+.fullscreen-title {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: white;
+  flex: 1;
+  text-align: left;
+}
+
+.close-btn {
+  width: 60rpx;
+  height: 60rpx;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.2);
+  color: white;
+  border: none;
+  font-size: 40rpx;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  line-height: 1;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.close-btn:active {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+/* 全屏滑动器 */
+.fullscreen-swiper {
+  flex: 1;
+  width: 100%;
+}
+
+.swiper-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: 0rpx;
+  box-sizing: border-box;
+}
+
+.fullscreen-image {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+/* 全屏底部 */
+.fullscreen-footer {
+  padding: 40rpx;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  justify-content: center;
+  position: relative;
+  z-index: 1001;
 }

 /* 重新生成按钮 */
@@ -130,3 +331,77 @@
 .retry-btn:active {
  transform: translateY(2rpx);
 }
+
+
+
+.create-button {
+  background: linear-gradient(135deg, #ff6b9d, #ff9a56, #ffd93d);
+  border: none;
+  border-radius: 72px;
+  padding: 24px 108px;
+  font-size: 36px;
+  font-weight: bold;
+  color: #fff;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 8px 25px rgba(255, 107, 157, 0.4),
+    0 4px 15px rgba(255, 154, 86, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.3);
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+  transform: scale(1);
+}
+
+.create-button::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.4),
+    transparent
+  );
+  transition: left 0.5s;
+}
+
+.create-button:hover {
+  transform: scale(1.05) translateY(-2px);
+  box-shadow: 0 12px 35px rgba(255, 107, 157, 0.5),
+    0 6px 20px rgba(255, 154, 86, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.4);
+  filter: brightness(1.1);
+}
+
+.create-button:hover::before {
+  left: 100%;
+}
+
+.create-button:active {
+  transform: scale(0.98) translateY(1px);
+  box-shadow: 0 4px 15px rgba(255, 107, 157, 0.3),
+    0 2px 8px rgba(255, 154, 86, 0.2), inset 0 2px 0 rgba(255, 255, 255, 0.2);
+}
+
+.create-button::after {
+  content: "✨";
+  position: absolute;
+  top: -5px;
+  right: -5px;
+  font-size: 16px;
+  animation: sparkle 2s infinite;
+  pointer-events: none;
+}
+
+/* 添加闪烁动画 */
+@keyframes sparkle {
+  0%,
+  100% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+}
--- a/src/pages/index/index.tsx
+++ b/src/pages/index/index.tsx
@@ -1,4 +1,4 @@
-import { View, Text, Button, Image } from '@tarojs/components'
+import { View, Text, Button, Image, Swiper, SwiperItem } from '@tarojs/components'
 import { useLoad } from '@tarojs/taro'
 import { useState } from 'react'
 import './index.css'
@@ -45,47 +45,57 @@ export default function Index() {

  // 1. 传图片环节
  const renderUploadStep = () => (
-    <View className="step-container">
-      <Text className="step-title">🎨 AI手办生成器</Text>
-      <Text className="step-desc">选择图片，AI将为您生成精美手办</Text>
-      <Button className="upload-btn" onClick={chooseAndGenerateImage}>
-        选择图片开始生成
+    <View className="button-container">
+      <Button className="create-button" onClick={chooseAndGenerateImage}>
+        一键制作
      </Button>
    </View>
  )

  // 2. Loading环节
  const renderLoadingStep = () => (
-    <View className="step-container">
+    <View className="loading-overlay">
+      <View className="loading-container">
        <View className="loading-spinner" />
-      <Text className="step-title">AI正在生成中...</Text>
-      <Text className="step-desc">请耐心等待，正在为您精心制作</Text>
+        <Text className="loading-title">AI正在生成中...</Text>
+        <Text className="loading-desc">请耐心等待，正在为您精心制作</Text>
+      </View>
    </View>
  )

-  // 3. 结果预览环节
+  // 3. 结果预览环节 - 全屏滑动预览
  const renderResultStep = () => (
-    <View className="step-container">
-      <Text className="step-title">✨ 生成完成</Text>
-      <View className="result-grid">
-        {state.images.map((url, index) => (
-          <Image key={index} className="result-image" src={url} mode="aspectFill" />
-        ))}
+    <View className="fullscreen-container">
+      <View className="fullscreen-header">
+        <Text className="fullscreen-title">✨ 生成完成</Text>
+        <Button className="close-btn" onClick={resetToUpload}>×</Button>
      </View>
-      <Button className="restart-btn" onClick={resetToUpload}>
-        重新生成
-      </Button>
+      <Swiper
+        className="fullscreen-swiper"
+        indicatorDots={true}
+        indicatorColor="#rgba(255,255,255,0.3)"
+        indicatorActiveColor="#fff"
+        circular={true}
+        autoplay={false}
+      >
+        {state.images.map((url, index) => (
+          <SwiperItem key={index} className="swiper-item">
+            <Image className="fullscreen-image" src={url} mode="aspectFit" />
+          </SwiperItem>
+        ))}
+      </Swiper>
    </View>
  )

  // 4. 错误环节
  const renderErrorStep = () => (
-    <View className="step-container">
-      <Text className="step-title">❌ 生成失败</Text>
+    <View className="error-overlay" onClick={resetToUpload}>
+      <View className="error-container">
+        <Text className="error-icon">⚠️</Text>
+        <Text className="error-title">生成失败</Text>
        <Text className="error-desc">{state.error}</Text>
-      <Button className="retry-btn" onClick={resetToUpload}>
-        重新尝试
-      </Button>
+        <Text className="error-hint">点击任意处重新开始</Text>
+      </View>
    </View>
  )

--- a/src/sdk/index.ts
+++ b/src/sdk/index.ts
@@ -167,7 +167,7 @@ export class BowongAISDK {

      // 上传第一张图片
      const filePath = chooseResult.tempFilePaths[0];
-      const prompt = `将画面中的角色重塑为顶级收藏级树脂手办，全身动态姿势，置于角色主题底座；高精度材质，手工涂装，肌肤纹理与服装材质真实分明。戏剧性硬光为主光源，凸显立体感，无过曝；强效补光消除死黑，细节完整可见。背景为窗边景深模糊，侧后方隐约可见产品包装盒。博物馆级摄影质感，全身细节无损，面部结构精准。禁止：任何2D元素或照搬原图、塑料感、面部模糊、五官错位、细节丢失`
+      const prompt = `Use nano banana style to create a 1/7 scale commercialized figure of the character in the illustration, in a realistic styie and environment.Place the figure on a computer desk, using a circular transparent acrylic base without any text.On the Macbook Pro screen, display the ZBrush modeling process of the figure in line mode. Next to the computer screen, place a BANDAl-style toy packaging box printedwith the original artwork.`
      return await this.generateImage({
        img_file: filePath,
        prompt: prompt