feat: 添加图像和更新首页样式

- 新增图像文件 Figure.jpg
- 更新 index.css，增加布局和按钮样式
- 修改 index.tsx，整合图像并优化按钮点击事件处理

src/pages/index/index.css

@@ -1,3 +1,95 @@
-.index{
+.index {
   font-size: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  min-height: 100vh;
+  min-width: 100vw;
+  margin: 0;
+  padding: 0;
+  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;
+}
+
+.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);
+}
+
+/* 添加闪烁动画 */
+@keyframes sparkle {
+  0%,
+  100% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+.create-button::after {
+  content: "✨";
+  position: absolute;
+  top: -5px;
+  right: -5px;
+  font-size: 16px;
+  animation: sparkle 2s infinite;
+  pointer-events: none;
 }

src/pages/index/index.tsx

@@ -1,28 +1,34 @@
-import { View, Text, Button } from '@tarojs/components'
+import { View, Button } from "@tarojs/components";
-import { useLoad } from '@tarojs/taro'
+import { useLoad } from "@tarojs/taro";
-import './index.css'
+import figureImg from "../../assets/images/figure.jpg";
-import { useAd, useSdk } from '../../hooks/index'
+import { useSdk } from "../../hooks/index";
+import "./index.css";
 
 export default function Index() {
-
+  const sdk = useSdk();
-  const sdk = useSdk()
   useLoad(() => {
-    return () => { }
+    return () => {};
+  });
+
+  const handleCreateClick = () => {
+    sdk
+      .chooseAndGenerateImage()
+      .then((task_id) => {
+        console.log({ task_id });
+        return sdk.getTaskStatus(task_id);
       })
+      .then((res) => {
+        console.log(res);
+      });
+  };
 
   return (
-    <View className='index'>
+    <View className="index" style={{ backgroundImage: `url(${figureImg})` }}>
-      <Text>Hello world Ymm !!!!</Text>
+      <View className="button-container">
-      <Button onClick={() => {
+        <Button className="create-button" onClick={handleCreateClick}>
-        sdk.chooseAndGenerateImage().then(task_id => {
+          一键制作
-          console.log({ task_id })
-          return sdk.getTaskStatus(task_id)
-        }).then(res => {
-          console.log(res)
-        })
-      }}>
-        生图
         </Button>
       </View>
-  )
+    </View>
+  );
 }