feat: 首页接口对接

src/api/AigcSceneListApi.ts

@@ -1,9 +1,27 @@
 /* eslint-disable */
 // @ts-ignore
 import request from '@common/ajax';
+import type { Response } from './types';
+
+export interface AigcSceneListItem {
+  sortIndex: string;
+  sceneName: string;
+  sceneCode: string;
+  aigcSceneStyleList: AigcSceneStyleItem[];
+}
+
+export interface AigcSceneStyleItem {
+  sortIndex: string;
+  sceneName: string;
+  sceneCode: string;
+  sceneStyleId: string;
+  sceneStyle: string;
+  sceneCoverUrl: string;
+}
+
 
 export const getAigcSceneList = (params: any) => {
-  return request({
+  return request<Response<AigcSceneListItem[]>>({
     url: '/aigc/aigcSceneList',
     method: 'get',
     params,

src/api/index.ts

@@ -1,3 +1,5 @@
 /* eslint-disable */
 // @ts-ignore
+export * from './types';
+
 export * from './AigcSceneListApi';

src/api/types.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+// @ts-ignore
+
+export type Response<T = any> = {
+  code: number;
+  msg: string;
+  data: T;
+};

src/views/home/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <transition name="fade" mode="out-in">
-      <img :key="activeScene.bg" :src="activeScene.bg" class="bg-image" />
+      <img :key="activeScene.sceneName" :src="activeScene.sceneCoverUrl" class="bg-image" />
     </transition>
 
     <div class="gradient-overlay"></div>
@@ -19,12 +19,12 @@
       <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" />
+          <img :src="item.sceneCoverUrl" class="thumb-img" />
-          <div class="scene-name">{{ item.name }}</div>
+          <div class="scene-name">{{ item.sceneName }}</div>
         </div>
       </div>
 
-      <div class="active-title">{{ activeScene.name }}</div>
+      <div class="active-title">{{ activeScene.sceneName }}</div>
 
       <div class="quota-text">✨ 今日还可生成 <span>2</span> 张</div>
 
@@ -47,40 +47,33 @@
 
 </template>
 
-<script setup>
+<script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onMounted, reactive } from 'vue';
 import { useRouter } from 'vue-router';
+// @ts-ignore
 import TopNavBar from '../components/TopNavBar.vue';
+// @ts-ignore
 import PhotoGuide from '../components/PhotoGuide.vue';
+// @ts-ignore
 import AgreementTip from '../components/AgreementTip.vue';
-import { getAigcSceneList } from '@api';
+// @ts-ignore
+import { getAigcSceneList, AigcSceneListItem, AigcSceneStyleItem } from '@api';
 
 // --- 测试数据 ---
 const styles = [
-  { id: 'real', name: '真实风格' },
+  { id: 'real', name: '真实风格', sceneStyle: '0' },
-  { id: 'comic', name: '漫画风格' }
+  { id: 'comic', name: '漫画风格', sceneStyle: '1' }
 ];
 
-const mockData = {
+const mockData = reactive({
-  real: [
+  real: [] as AigcSceneStyleItem[],
-    { name: '无边戏水', thumb: 'https://pic.rmb.bdstatic.com/bjh/news/1660587f950922830e980e276b00a912.jpeg', bg: 'https://pic.rmb.bdstatic.com/bjh/news/1660587f950922830e980e276b00a912.jpeg' },
+  comic: [] as AigcSceneStyleItem[]
-    { 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' },
-  ]
-};
 
 const router = useRouter();
 
 // --- 状态 ---
-const activeStyleId = ref('real');
+const activeStyleId = ref<'real' | 'comic'>('real');
 const activeSceneIndex = ref(0);
 const showGuide = ref(false);
 
@@ -123,17 +116,42 @@ const currentScenes = computed(() => mockData[activeStyleId.value] || []);
 const activeScene = computed(() => currentScenes.value[activeSceneIndex.value] || {});
 
 // --- 方法 ---
-const handleStyleChange = (id) => {
+const handleStyleChange = (id: 'real' | 'comic') => {
   activeStyleId.value = id;
   activeSceneIndex.value = 0;
 };
 
 // 数据请求
 const fetchSceneList = async () => {
-  // 这里可以替换成真实的 API 请求
+  const list: AigcSceneListItem[] = await getAigcSceneList();
-  const response = await getAigcSceneList();
+  const realArr: any[] = [];
-  // mockData[activeStyleId.value] = response.data.scenes;
+  const comicArr: any[] = [];
+
+  list.forEach((scene) => {
+    const styles = scene.aigcSceneStyleList || [];
+    styles.forEach((s: AigcSceneStyleItem) => {
+      const styleItem: AigcSceneStyleItem = {
+        sceneName: scene.sceneName,
+        sceneCode: scene.sceneCode,
+        sortIndex: scene.sortIndex,
+        sceneStyle: s.sceneStyle,
+        sceneStyleId: s.sceneStyleId,
+        sceneCoverUrl: s.sceneCoverUrl,
       };
+      if (s.sceneStyle === '0') {
+        realArr.push(styleItem);
+      }
+      if (s.sceneStyle === '1') {
+        comicArr.push(styleItem);
+      }
+    });
+  });
+
+  mockData.real = realArr;
+  mockData.comic = comicArr;
+  console.log('处理后的场景列表：', JSON.stringify(mockData));
+};
+
 
 onMounted(() => {
   fetchSceneList();
@@ -288,14 +306,15 @@ onMounted(() => {
 /* 大标题样式 */
 .active-title {
   text-align: center;
-  font-size: 44px;
+  font-size: 56px;
   margin: 12px 0 32px;
-  background: linear-gradient(to bottom, #FFFFFF 0%, #B9E9FF 100%);
+  background: linear-gradient(to bottom, #FFFFFF 0%, #CBF2FC 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   font-weight: 900;
   letter-spacing: 2px;
   font-style: italic;
+  font-family: LogoSC Unbounded Sans, LogoSC Unbounded Sans;
 }
 
 /* 底部操作区 */