update: home scss

novel-app/deploy.ps1

@@ -0,0 +1,20 @@
+# 打包项目，携带应用前缀（index.html中相对路径将自动修复为/dev/jxnu/<学号>前缀）
+# /dev/ 项目测试版上传路径
+# /dev/jxnu/<学号> nova-crm项目预留路径
+set NODE_OPTIONS=–max_old_space_size=16000
+node ./node_modules/@angular/cli/bin/ng build --base-href="/dev/jxnu/agent/"
+
+# 清空旧文件目录
+obsutil rm obs://nova-cloud/dev/jxnu/202226701055 -r -f -i=XSUWJSVMZNHLWFAINRZ1 -k=P4TyfwfDovVNqz08tI1IXoLWXyEOSTKJRVlsGcV6 -e="obs.cn-south-1.myhuaweicloud.com"
+
+# 同步文件目录
+obsutil sync ./www obs://nova-cloud/dev/jxnu/202226701055  -i=XSUWJSVMZNHLWFAINRZ1 -k=P4TyfwfDovVNqz08tI1IXoLWXyEOSTKJRVlsGcV6 -e="obs.cn-south-1.myhuaweicloud.com" -acl=public-read
+
+
+# 授权公开可读
+obsutil chattri obs://nova-cloud/dev/jxnu/202226701055 -r -f -i=XSUWJSVMZNHLWFAINRZ1 -k=P4TyfwfDovVNqz08tI1IXoLWXyEOSTKJRVlsGcV6 -e="obs.cn-south-1.myhuaweicloud.com" -acl=public-read
+
+# 列举对象
+obsutil ls obs://nova-cloud/dev/jxnu/agent  -i=XSUWJSVMZNHLWFAINRZ1 -k=P4TyfwfDovVNqz08tI1IXoLWXyEOSTKJRVlsGcV6 -e="obs.cn-south-1.myhuaweicloud.com"
+
+

novel-app/obsutil_windows_amd64_5.5.12/setup.bat

@@ -0,0 +1,19 @@
+@ECHO OFF
+rem Please ensure that this script is in the same directory as obsutil.
+TITLE Add obsutil as custom command for Windows.
+set linkFile=C:\windows\obsutil.exe
+set sourceFile=%~dp0%\obsutil.exe
+if exist %linkFile% (
+    del C:\windows\obsutil.exe
+)
+if exist %sourceFile% (
+    mklink %linkFile% %~dp0%\obsutil.exe
+) else (
+    echo Failed:%sourceFile% is not exist!
+)
+if %errorlevel% == 0 (
+    echo Successfully! %linkFile%
+) else (
+    echo Failed: failed to setup, %linkFile%
+)
+pause

novel-app/src/app/home/home.page.html

@@ -1,12 +1,32 @@
-<ion-header>
+<ion-header [translucent]="true" class="ion-no-border">
   <ion-toolbar>
-    <ion-title>首页</ion-title>
+    <div class="brand-header">
+      <div class="brand-title">
+        <div class="title-container">
+          <span>幻书坊</span>
+          <img src="assets/images/logo1.png" alt="幻书坊">
+        </div>
+      </div>
+    </div>
   </ion-toolbar>
 </ion-header>
+
 <ion-content [fullscreen]="true">
-  <!-- 顶部图片区域 -->
-  <div class="header-section">
-    <ion-img src="../../assets/images/首页顶部图.png" alt="header"></ion-img>
+
+  <!-- 轮播图 -->
+  <div class="banner-section">
+    <div #bannerContainer class="banner-container" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)"
+      (touchend)="onTouchEnd($event)">
+      <div class="banner-img-container" [style.transform]="'translateX(' + translateX + 'px)'">
+        <img *ngFor="let slide of slides" [src]="slide.image" [alt]="slide.alt">
+      </div>
+      <div class="banner-indicators">
+        <span class="indicator" *ngFor="let slide of slides; let i = index" [class.active]="currentIndex === i"
+          (click)="goToSlide(i)"></span>
+      </div>
+      <div class="banner-arrows">
+      </div>
+    </div>
   </div>
 
   <!-- 功能按钮区域 -->
@@ -15,7 +35,7 @@
     <ion-button class="feature-button" (click)="navigateTo('/story-generator')" expand="block" fill="clear">
       <div class="button-content">
         <div class="icon-wrapper light-pink">
-          <ion-icon name="book"></ion-icon>
+          <img src="assets/images/story-generator-icon.png" alt="长篇生成">
         </div>
         <span>长篇生成</span>
       </div>
@@ -25,7 +45,7 @@
     <ion-button class="feature-button" (click)="navigateTo('/short-generator')" expand="block" fill="clear">
       <div class="button-content">
         <div class="icon-wrapper light-blue">
-          <ion-icon name="person-outline"></ion-icon>
+          <img src="assets/images/short-generator-icon.png" alt="短篇生成">
         </div>
         <span>短篇生成</span>
       </div>
@@ -35,7 +55,7 @@
     <ion-button class="feature-button" (click)="navigateTo('/toolbox')" expand="block" fill="clear">
       <div class="button-content">
         <div class="icon-wrapper light-purple">
-          <ion-icon name="build-outline"></ion-icon>
+          <img src="assets/images/toolbox-icon.png" alt="工具箱">
         </div>
         <span>工具箱</span>
       </div>
@@ -55,7 +75,6 @@
         </div>
       </ion-card-header>
 
-
       <ion-card-content>
         <ion-grid *ngIf="stories.length > 0">
           <ion-row>
@@ -72,7 +91,7 @@
         </ion-grid>
 
         <div class="empty-state" *ngIf="stories.length === 0">
-          <ion-icon name="document-text-outline"></ion-icon>
+          <ion-icon name="document-outline"></ion-icon>
           <h3>暂无作品</h3>
           <p>点击新建作品按钮开始创作</p>
         </div>

novel-app/src/app/home/home.page.scss

@@ -1,19 +1,153 @@
 :host {
-    --ion-background-color: #f4f5f8;
+    --page-padding: 16px;
+    --primary-color: #003366;
+    /* 深蓝色 */
+    --secondary-color: #336633;
+    /* 墨绿色 */
+    --background-color: #f5f5f5;
+    --text-color: #333333;
+    --highlight-color: #ffcc00;
+    /* 高亮颜色 */
 }
 
-.header-section {
-    width: 100%;
-    height: 180px;
-    overflow: hidden;
+/* home.page.scss */
+ion-content {
+    --background: #f0f8ff;
+    /* 你可以根据需要调整颜色 */
+}
+
+/* 其他样式 */
+.gradient-background {
+    background: linear-gradient(135deg, #ff7e5f, #feb47b);
+    /* 你可以根据需要调整渐变色 */
+    color: white;
+    /* 确保文字颜色与背景对比明显 */
+    border: none;
+    /* 去掉默认边框 */
+}
 
-    ion-img {
+// 头部样式
+.brand-header {
+    padding: 8px var(--page-padding);
+    display: flex;
+    justify-content: center;
+
+    .brand-title {
+        display: flex;
+        justify-content: center;
         width: 100%;
-        height: 100%;
-        object-fit: cover;
+
+        .title-container {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            font-family: 'Courier New', Courier, monospace;
+            font-size: 16px;
+            font-weight: 600;
+
+            span {
+                color: var(--primary-color);
+            }
+
+            img {
+                height: 18px;
+                width: 18px;
+                margin-top: 2px;
+            }
+        }
+    }
+}
+
+// 统计信息样式
+.stats-section {
+    display: flex;
+    justify-content: space-around;
+    padding: 10px 0;
+    background-color: var(--primary-color);
+    color: white;
+    border-radius: 8px;
+    margin-bottom: 10px;
+
+    .stat-item {
+        text-align: center;
+        font-size: 1.2em;
+
+        .stat-value {
+            font-size: 2em;
+            margin-bottom: 5px;
+        }
+
+        .stat-label {
+            font-size: 1em;
+        }
+    }
+}
+
+// 轮播图样式
+.banner-section {
+    margin: 16px var(--page-padding);
+
+    .banner-container {
+        position: relative;
+        overflow: hidden;
+        border-radius: 12px;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        background-color: white;
+
+        .banner-img-container {
+            display: flex;
+            transition: transform 0.5s ease;
+        }
+
+        img {
+            width: 100%;
+            height: auto;
+        }
+
+        .banner-indicators {
+            position: absolute;
+            bottom: 16px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            gap: 8px;
+
+            .indicator {
+                width: 10px;
+                height: 10px;
+                border-radius: 50%;
+                background-color: rgba(0, 0, 0, 0.5);
+                cursor: pointer;
+
+                &.active {
+                    background-color: #ffcc00;
+                }
+            }
+        }
+
+        .banner-arrows {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            display: flex;
+            gap: 16px;
+
+            .arrow-btn {
+                background-color: rgba(0, 0, 0, 0.5);
+                padding: 8px;
+                border-radius: 50%;
+                color: white;
+                cursor: pointer;
+
+                ion-icon {
+                    font-size: 24px;
+                }
+            }
+        }
     }
 }
 
+// 功能按钮区域样式
 .features-section {
     display: flex;
     justify-content: space-between;
@@ -59,13 +193,13 @@
 
             ion-icon {
                 font-size: 24px;
-                color: #333;
+                color: var(--primary-color);
             }
         }
 
         span {
             font-size: 14px;
-            color: #333;
+            color: var(--primary-color);
             font-weight: 500;
         }
     }
@@ -89,6 +223,7 @@
                 font-size: 18px;
                 font-weight: 600;
                 margin: 0;
+                color: var(--primary-color);
             }
         }
     }
@@ -102,13 +237,13 @@
                 margin: 0;
                 font-size: 14px;
                 font-weight: 500;
-                color: #333;
+                color: var(--primary-color);
             }
 
             p {
                 margin: 4px 0 0;
                 font-size: 12px;
-                color: #666;
+                color: var(--text-color);
             }
 
             ion-row {
@@ -130,13 +265,13 @@
         h3 {
             margin: 0 0 8px;
             font-size: 16px;
-            color: #333;
+            color: var(--primary-color);
         }
 
         p {
             margin: 0;
             font-size: 14px;
-            color: #666;
+            color: var(--text-color);
         }
     }
 }

novel-app/src/app/home/home.page.ts

@@ -1,8 +1,10 @@
-import { Component, ViewChild } from '@angular/core';
+// home.page.ts
+import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { IonicModule, PopoverController } from '@ionic/angular';
 import { Router } from '@angular/router';
 
+
 interface Story {
   id: string;
   cover: string;
@@ -17,8 +19,112 @@ interface Story {
   standalone: true,
   imports: [IonicModule, CommonModule]
 })
-export class HomePage {
+export class HomePage implements AfterViewInit {
   stories: Story[] = [];
+  slideWidth: number = 0; // 设置默认值为0
+  autoPlayInterval: NodeJS.Timeout | undefined;
+  currentIndex: number = 0;
+  slides: any[] = []; // 初始化为空数组
+  translateX: number = 0;
+  startX: number = 0;
+  currentTranslateX: number = 0;
+
+  @ViewChild('bannerContainer', { read: ElementRef }) bannerContainer!: ElementRef;
+
+  ngAfterViewInit() {
+    this.startAutoPlay();
+    this.checkSlideWidth();
+  }
+
+  ngAfterViewChecked() {
+    this.checkSlideWidth();
+  }
+
+  private checkSlideWidth() {
+    const container = this.bannerContainer.nativeElement;
+    if (container && container.clientWidth > 0) {
+      this.slideWidth = container.clientWidth;
+      console.log('slideWidth:', this.slideWidth);
+      this.slides = [
+        { image: 'assets/images/banner1.jpg', alt: 'Slide 1' },
+        { image: 'assets/images/banner2.jpg', alt: 'Slide 2' },
+        { image: 'assets/images/banner3.jpg', alt: 'Slide 3' },
+        { image: 'assets/images/banner4.jpg', alt: 'Slide 4' },
+        { image: 'assets/images/banner5.jpg', alt: 'Slide 5' },
+      ];
+      this.updateTranslateX();
+    } else {
+      console.warn('bannerContainer not found or has zero width');
+    }
+  }
+
+  ngOnDestroy() {
+    this.stopAutoPlay();
+  }
+
+  private startAutoPlay() {
+    this.stopAutoPlay();
+    this.autoPlayInterval = setInterval(() => {
+      this.nextSlide();
+    }, 3000); // 每3秒切换一次
+  }
+
+  private stopAutoPlay() {
+    if (this.autoPlayInterval) {
+      clearInterval(this.autoPlayInterval);
+    }
+  }
+
+  nextSlide() {
+    this.currentIndex = (this.currentIndex + 1) % this.slides.length;
+    this.updateTranslateX();
+  }
+
+  prevSlide() {
+    this.currentIndex = (this.currentIndex - 1 + this.slides.length) % this.slides.length;
+    this.updateTranslateX();
+  }
+
+  goToSlide(index: number) {
+    this.currentIndex = index;
+    this.updateTranslateX();
+  }
+
+  private updateTranslateX() {
+    if (this.slideWidth !== undefined && this.slideWidth > 0) {
+      this.translateX = -this.currentIndex * this.slideWidth;
+      this.currentTranslateX = this.translateX;
+      console.log('translateX:', this.translateX); // 添加调试信息
+    } else {
+      console.warn('slideWidth is not defined or zero');
+    }
+  }
+  onTouchStart(event: TouchEvent) {
+    this.startX = event.touches[0].clientX;
+    this.stopAutoPlay();
+    console.log('Touch Start:', this.startX); // 添加调试信息
+  }
+
+  onTouchMove(event: TouchEvent) {
+    const currentX = event.touches[0].clientX;
+    const diffX = currentX - this.startX;
+    this.currentTranslateX = this.translateX + diffX;
+    console.log('Touch Move:', diffX, this.currentTranslateX); // 添加调试信息
+  }
+
+  onTouchEnd(event: TouchEvent) {
+    const currentX = event.changedTouches[0].clientX;
+    const diffX = currentX - this.startX;
+    if (diffX > 50) {
+      this.prevSlide();
+    } else if (diffX < -50) {
+      this.nextSlide();
+    } else {
+      this.updateTranslateX();
+    }
+    this.startAutoPlay();
+    console.log('Touch End:', diffX, this.currentIndex); // 添加调试信息
+  }
 
   constructor(
     private router: Router,

novel-app/src/index.html

@@ -3,12 +3,13 @@
 
 <head>
   <meta charset="utf-8" />
-  <title>Ionic App</title>
+  <title>幻书坊：ai小说app</title>
 
   <base href="/" />
 
   <meta name="color-scheme" content="light dark" />
-  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="viewport"
+    content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
   <meta name="format-detection" content="telephone=no" />
   <meta name="msapplication-tap-highlight" content="no" />
 
@@ -23,4 +24,4 @@
   <app-root></app-root>
 </body>
 
-</html>
+</html>