From 453bf0a0d26224ad6e125ffc544f6aee50d14d05 Mon Sep 17 00:00:00 2001
From: zoujing <zoujing@gogpay.cn>
Date: Wed, 1 Apr 2026 20:18:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=90=AD=E5=BB=BA=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E7=9A=84=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue              |   2 +-
 src/views/home/index.vue | 310 +++++++++++++++++++++++++++++++++++++--
 2 files changed, 297 insertions(+), 15 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 0c517cf..5bb7c62 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,7 +14,7 @@ router.beforeEach((to, from, next) => {
   const keepAlive = to?.meta?.keepAlive
 
   if (!router.hasRoute(to.name)) {
-    router.push('/error')
+    router.push('/home')
     return
   }
 
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 40dd5a3..8ea3838 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,22 +1,304 @@
 <template>
-  <van-button @click="handleClick">跳转记录</van-button>
+  <div class="app-container">
+    <transition name="fade" mode="out-in">
+      <img :key="activeScene.bg" :src="activeScene.bg" class="bg-image" />
+    </transition>
+
+    <div class="gradient-overlay"></div>
+
+    <div class="top-nav">
+      <span class="icon">〈</span>
+      <span class="icon-history">🕙</span>
+    </div>
+
+    <div class="content-layer">
+      <div class="style-tabs">
+        <div v-for="tab in styles" :key="tab.id" :class="['tab-item', { active: activeStyleId === tab.id }]"
+          @click="handleStyleChange(tab.id)">
+          {{ tab.name }}
+        </div>
+      </div>
+
+      <div class="scene-list-container">
+        <div v-for="(item, index) in currentScenes" :key="`${activeStyleId}-${index}`"
+          :class="['scene-card', { active: activeSceneIndex === index }]" @click="activeSceneIndex = index">
+          <img :src="item.thumb" class="thumb-img" />
+          <div class="scene-name">{{ item.name }}</div>
+        </div>
+      </div>
+
+      <div class="active-title">{{ activeScene.name }}</div>
+
+      <div class="quota-text">✨ 今日还可生成 <span>2</span> 张</div>
+
+      <div class="footer-section">
+        <button class="generate-btn">立即生成</button>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script setup name="home">
-const router = useRouter()
+<script setup>
+import { ref, computed } from 'vue';
 
-// 跳转按钮操作
-const handleClick = () => {
-  console.log('跳转记录')
-}
+// --- 测试数据 ---
+const styles = [
+  { id: 'real', name: '真实风格' },
+  { id: 'comic', name: '漫画风格' }
+];
 
-onMounted(() => {
-  console.log('onMounted')
-})
+const mockData = {
+  real: [
+    { name: '无边戏水', thumb: 'https://pic.rmb.bdstatic.com/bjh/news/1660587f950922830e980e276b00a912.jpeg', bg: 'https://pic.rmb.bdstatic.com/bjh/news/1660587f950922830e980e276b00a912.jpeg' },
+    { name: '花瓣赏樱', thumb: 'https://pic.rmb.bdstatic.com/bjh/a5138770aac4303a36122ba78b9bb0243471.jpeg@h_1280', bg: 'https://pic.rmb.bdstatic.com/bjh/a5138770aac4303a36122ba78b9bb0243471.jpeg@h_1280' },
+    { name: '洞穴泡池', thumb: 'https://img2.baidu.com/it/u=2049087723,586351684&fm=253&app=138&f=JPEG?w=800&h=1400', bg: 'https://img2.baidu.com/it/u=2049087723,586351684&fm=253&app=138&f=JPEG?w=800&h=1400' },
+    { name: '萌鸡小队', thumb: 'https://img2.baidu.com/it/u=2558178253,1119347742&fm=253&app=138&f=JPEG?w=800&h=1400', bg: 'https://img2.baidu.com/it/u=2558178253,1119347742&fm=253&app=138&f=JPEG?w=800&h=1400' },
+    { name: '图腾戏水', thumb: 'https://img2.baidu.com/it/u=3580358401,288479606&fm=253&app=138&f=JPEG?w=800&h=1400', bg: 'https://img2.baidu.com/it/u=3580358401,288479606&fm=253&app=138&f=JPEG?w=800&h=1400' },
+  ],
+  comic: [
+    { name: '二次元泳池', thumb: 'https://img2.baidu.com/it/u=3357105687,2201196310&fm=253&app=138&f=JPEG?w=800&h=1400', bg: 'https://img2.baidu.com/it/u=3357105687,2201196310&fm=253&app=138&f=JPEG?w=800&h=1400' },
+    { name: '赛博樱花', thumb: 'https://img0.baidu.com/it/u=790408018,2989683687&fm=253&app=138&f=JPEG?w=800&h=1400', bg: 'https://img0.baidu.com/it/u=790408018,2989683687&fm=253&app=138&f=JPEG?w=800&h=1400' },
+    { name: '梦幻山洞', thumb: 'https://img2.baidu.com/it/u=2720967234,3522597250&fm=253&app=138&f=JPEG?w=800&h=1400', bg: 'https://img2.baidu.com/it/u=2720967234,3522597250&fm=253&app=138&f=JPEG?w=800&h=1400' },
+    { name: '卡通乐园', thumb: 'https://img1.baidu.com/it/u=3958396600,3215281876&fm=253&app=138&f=JPEG?w=500&h=889', bg: 'https://img1.baidu.com/it/u=3958396600,3215281876&fm=253&app=138&f=JPEG?w=500&h=889' },
+  ]
+};
 
-onActivated(() => {
-  console.log('onActivated')
-})
+// --- 状态 ---
+const activeStyleId = ref('real');
+const activeSceneIndex = ref(0);
+
+// --- 计算属性 ---
+const currentScenes = computed(() => mockData[activeStyleId.value] || []);
+const activeScene = computed(() => currentScenes.value[activeSceneIndex.value] || {});
+
+// --- 方法 ---
+const handleStyleChange = (id) => {
+  activeStyleId.value = id;
+  activeSceneIndex.value = 0;
+};
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped>
+.app-container {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  background-color: #000;
+  overflow: hidden;
+  color: #fff;
+  font-family: sans-serif;
+}
+
+/* 背景图片 */
+.bg-image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 60%;
+  object-fit: cover;
+  z-index: 0;
+}
+
+/* 黑色渐变浮层 */
+.gradient-overlay {
+  position: absolute;
+  inset: 0;
+  height: 60%;
+  z-index: 1;
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 70%, rgba(0, 0, 0, 0.7) 85%, #000 100%);
+}
+
+/* 顶部导航 */
+.top-nav {
+  position: absolute;
+  top: 50px;
+  left: 20px;
+  right: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  z-index: 10;
+}
+
+.top-nav .icon {
+  font-size: 24px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.top-nav .icon-history {
+  font-size: 22px;
+  cursor: pointer;
+}
+
+/* 内容布局层 */
+.content-layer {
+  position: relative;
+  z-index: 2;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+/* 风格切换 Tab */
+.style-tabs {
+  display: flex;
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(15px);
+  margin: 0 auto 16px;
+  border-radius: 30px;
+  padding: 4px;
+}
+
+.tab-item {
+  padding: 8px 22px;
+  border-radius: 26px;
+  font-size: 14px;
+  color: #ddd;
+  transition: all 0.2s;
+  cursor: pointer;
+}
+
+.tab-item.active {
+  background: #fff;
+  color: #000;
+  font-weight: bold;
+}
+
+/* 横向场景列表 */
+.scene-list-container {
+  display: flex;
+  overflow-x: auto;
+  padding: 20px;
+  gap: 16px;
+  scrollbar-width: none;
+  align-items: flex-end;
+}
+
+.scene-list-container::-webkit-scrollbar {
+  display: none;
+}
+
+/* Item 基础样式 */
+.scene-card {
+  flex: 0 0 90px;
+  position: relative;
+  height: 120px;
+  border-radius: 14px;
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  background: #1a1a1a;
+  overflow: visible;
+  /* 必须 visible 才能让三角形溢出 */
+}
+
+.thumb-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 12px;
+  opacity: 0.5;
+  display: block;
+}
+
+/* 3. 选中时放大并显示 border */
+.scene-card.active {
+  border: 2px solid #fff;
+  transform: scale(1.15);
+  z-index: 5;
+}
+
+.scene-card.active .thumb-img {
+  opacity: 1;
+}
+
+/* 2. 选中时的倒三角：无间隔紧贴 border */
+.scene-card.active::before {
+  content: '';
+  position: absolute;
+  /* top = -(三角形高度) 确保严丝合缝 */
+  top: -8px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  border-bottom: 8px solid #fff;
+}
+
+/* item 底部文字半透明背景 */
+.scene-name {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  font-size: 11px;
+  padding: 4px 0;
+  text-align: center;
+  border-bottom-left-radius: 12px;
+  border-bottom-right-radius: 12px;
+  backdrop-filter: blur(2px);
+}
+
+/* 大标题样式 */
+.active-title {
+  text-align: center;
+  font-size: 44px;
+  margin: 12px 0 32px;
+  background: linear-gradient(to bottom, #FFFFFF 0%, #B9E9FF 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-weight: 900;
+  letter-spacing: 2px;
+  font-style: italic;
+}
+
+/* 底部操作区 */
+.footer-section {
+  padding: 0 23px 32px;
+  text-align: center;
+}
+
+.quota-text {
+  text-align: center;
+  font-size: 13px;
+  color: #bbb;
+  padding: 12px;
+  margin: 0 102px 15px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 999px 999px 999px 999px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.quota-text span {
+  color: #5ef9ff;
+  font-weight: bold;
+}
+
+.generate-btn {
+  width: 100%;
+  height: 60px;
+  border-radius: 30px;
+  border: none;
+  background: linear-gradient(90deg, #C5FF94, #87F1FF);
+  font-weight: bold;
+  font-size: 20px;
+  color: #000;
+  box-shadow: 0 5px 15px rgba(135, 241, 255, 0.3);
+  cursor: pointer;
+}
+
+/* 背景切换过渡动画 */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
\ No newline at end of file