yunqueai/ai_game
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(client): 前端场景和HTTP工具优化

Browse Source
This commit is contained in:
liangguodong
2026-03-13 17:48:22 +08:00
parent 0da6f210a6
commit 5f94129236
4 changed files with 272 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
client/js/scenes/AICreateScene.js
View File

@@ -253,16 +253,21 @@ export default class AICreateScene extends BaseScene {
// 关键词输入
let currentY = tagEndY + 25;
ctx.textAlign = 'left';
ctx.fillStyle = 'rgba(255,255,255,0.8)';
ctx.font = '13px sans-serif';
ctx.fillText('故事关键词：', padding, currentY);
this.renderInputBox(ctx, padding, currentY + 15, inputWidth, 45, this.createForm.keywords || '例如：霸总、契约婚姻、追妻火葬场', 'keywords');
// 主角设定
currentY += 80;
ctx.textAlign = 'left';
ctx.fillText('主角设定：', padding, currentY);
this.renderInputBox(ctx, padding, currentY + 15, inputWidth, 45, this.createForm.protagonist || '例如：独立女性设计师', 'protagonist');
// 核心冲突
currentY += 80;
ctx.textAlign = 'left';
ctx.fillText('核心冲突：', padding, currentY);
this.renderInputBox(ctx, padding, currentY + 15, inputWidth, 45, this.createForm.conflict || '例如：假结婚变真爱', 'conflict');

57
client/js/scenes/HomeScene.js
View File

@@ -2,6 +2,7 @@
* 首页场景 - 支持UGC
*/
import BaseScene from './BaseScene';
import { getStaticUrl } from '../utils/http';
export default class HomeScene extends BaseScene {
constructor(main, params) {
@@ -13,6 +14,9 @@ export default class HomeScene extends BaseScene {
this.lastTouchY = 0;
this.scrollVelocity = 0;
// 封面图片缓存
this.coverImages = {};
// 底部Tab: 首页/发现/创作/我的
this.bottomTab = 0;
@@ -35,6 +39,23 @@ export default class HomeScene extends BaseScene {
async init() {
this.storyList = this.main.storyManager.storyList;
this.calculateMaxScroll();
// 预加载封面图片
this.preloadCoverImages();
}
/**
* 预加载故事封面图片
*/
preloadCoverImages() {
this.storyList.forEach(story => {
if (story.cover_url && !this.coverImages[story.id]) {
const img = wx.createImage();
img.onload = () => {
this.coverImages[story.id] = img;
};
img.src = getStaticUrl(story.cover_url);
}
});
}
getFilteredStories() {
@@ -248,18 +269,32 @@ export default class HomeScene extends BaseScene {
// 封面
const coverW = 80, coverH = height - 20;
const coverGradient = ctx.createLinearGradient(x + 10, y + 10, x + 10 + coverW, y + 10 + coverH);
const colors = this.getCategoryGradient(story.category);
coverGradient.addColorStop(0, colors[0]);
coverGradient.addColorStop(1, colors[1]);
ctx.fillStyle = coverGradient;
this.roundRect(ctx, x + 10, y + 10, coverW, coverH, 10);
ctx.fill();
const coverX = x + 10, coverY = y + 10;
// 尝试显示封面图片
const coverImg = this.coverImages[story.id];
if (coverImg) {
// 有图片，绘制图片
ctx.save();
this.roundRect(ctx, coverX, coverY, coverW, coverH, 10);
ctx.clip();
ctx.drawImage(coverImg, coverX, coverY, coverW, coverH);
ctx.restore();
} else {
// 无图片，显示渐变占位
const coverGradient = ctx.createLinearGradient(coverX, coverY, coverX + coverW, coverY + coverH);
const colors = this.getCategoryGradient(story.category);
coverGradient.addColorStop(0, colors[0]);
coverGradient.addColorStop(1, colors[1]);
ctx.fillStyle = coverGradient;
this.roundRect(ctx, coverX, coverY, coverW, coverH, 10);
ctx.fill();
ctx.fillStyle = 'rgba(255,255,255,0.85)';
ctx.font = 'bold 10px sans-serif';
ctx.textAlign = 'center';
ctx.fillText(story.category || '故事', x + 10 + coverW / 2, y + 10 + coverH / 2 + 4);
ctx.fillStyle = 'rgba(255,255,255,0.85)';
ctx.font = 'bold 10px sans-serif';
ctx.textAlign = 'center';
ctx.fillText(story.category || '故事', coverX + coverW / 2, coverY + coverH / 2 + 4);
}
const textX = x + 100;
const maxW = width - 115;

162
client/js/scenes/StoryScene.js
View File

@@ -2,6 +2,7 @@
* 故事播放场景 - 视觉小说风格
*/
import BaseScene from './BaseScene';
import { getNodeBackground, getNodeCharacter, getDraftNodeBackground, getStaticUrl } from '../utils/http';
export default class StoryScene extends BaseScene {
constructor(main, params) {
@@ -31,6 +32,11 @@ export default class StoryScene extends BaseScene {
// 场景图相关
this.sceneImage = null;
this.sceneColors = this.generateSceneColors();
// 节点图片相关
this.nodeBackgroundImages = {}; // 缓存背景图 {nodeKey: Image}
this.nodeCharacterImages = {}; // 缓存立绘 {nodeKey: Image}
this.currentBackgroundImg = null;
this.currentCharacterImg = null;
// AI改写相关
this.isAIRewriting = false;
// 剧情回顾模式
@@ -638,6 +644,77 @@ export default class StoryScene extends BaseScene {
// 重置滚动
this.textScrollY = 0;
this.maxScrollY = 0;
// 加载当前节点的背景图和立绘
this.loadNodeImages();
}
// 加载当前节点的背景图和立绘
loadNodeImages() {
if (!this.currentNode || !this.storyId) return;
const nodeKey = this.currentNode.nodeKey || this.main.storyManager.currentNodeKey;
if (!nodeKey) return;
// 判断是否是草稿模式
const isDraftMode = !!this.draftId;
// 获取背景图 URL
let bgUrl;
if (isDraftMode) {
// 草稿模式：优先使用节点中的 background_url（需要转成完整URL），否则用草稿路径
if (this.currentNode.background_url) {
bgUrl = getStaticUrl(this.currentNode.background_url);
} else {
bgUrl = getDraftNodeBackground(this.storyId, this.draftId, nodeKey);
}
} else {
// 普通模式：使用故事节点路径
bgUrl = getNodeBackground(this.storyId, nodeKey);
}
console.log('[loadNodeImages] nodeKey:', nodeKey, ', isDraftMode:', isDraftMode, ', bgUrl:', bgUrl);
// 加载背景图
if (!this.nodeBackgroundImages[nodeKey]) {
const bgImg = wx.createImage();
bgImg.onload = () => {
this.nodeBackgroundImages[nodeKey] = bgImg;
if (this.main.storyManager.currentNodeKey === nodeKey || isDraftMode) {
this.currentBackgroundImg = bgImg;
}
};
bgImg.onerror = () => {
// 图片加载失败，使用默认渐变
this.nodeBackgroundImages[nodeKey] = null;
};
bgImg.src = bgUrl;
} else {
this.currentBackgroundImg = this.nodeBackgroundImages[nodeKey];
}
// 加载角色立绘（只在后端返回了 character_image 时才加载）
if (!isDraftMode && this.currentNode.character_image) {
if (!this.nodeCharacterImages[nodeKey]) {
const charImg = wx.createImage();
charImg.onload = () => {
this.nodeCharacterImages[nodeKey] = charImg;
if (this.main.storyManager.currentNodeKey === nodeKey) {
this.currentCharacterImg = charImg;
}
};
charImg.onerror = () => {
// 图片加载失败，不显示立绘
this.nodeCharacterImages[nodeKey] = null;
};
// 优先使用后端返回的路径，否则用默认路径
charImg.src = this.currentNode.character_image.startsWith('http')
? this.currentNode.character_image
: getStaticUrl(this.currentNode.character_image);
} else {
this.currentCharacterImg = this.nodeCharacterImages[nodeKey];
}
}
}
update() {
@@ -695,15 +772,45 @@ export default class StoryScene extends BaseScene {
}
renderSceneBackground(ctx) {
// 场景区域（上方45%）
// 场景区域（上方42%）
const sceneHeight = this.screenHeight * 0.42;
// 渐变背景
const gradient = ctx.createLinearGradient(0, 0, 0, sceneHeight);
gradient.addColorStop(0, this.sceneColors.bg1);
gradient.addColorStop(1, this.sceneColors.bg2);
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, this.screenWidth, sceneHeight);
// 优先显示背景图
if (this.currentBackgroundImg) {
// 绘制背景图（等比例覆盖）
const img = this.currentBackgroundImg;
const imgRatio = img.width / img.height;
const areaRatio = this.screenWidth / sceneHeight;
let drawW, drawH, drawX, drawY;
if (imgRatio > areaRatio) {
// 图片更宽，按高度适配
drawH = sceneHeight;
drawW = drawH * imgRatio;
drawX = (this.screenWidth - drawW) / 2;
drawY = 0;
} else {
// 图片更高，按宽度适配
drawW = this.screenWidth;
drawH = drawW / imgRatio;
drawX = 0;
drawY = (sceneHeight - drawH) / 2;
}
ctx.save();
ctx.beginPath();
ctx.rect(0, 0, this.screenWidth, sceneHeight);
ctx.clip();
ctx.drawImage(img, drawX, drawY, drawW, drawH);
ctx.restore();
} else {
// 无背景图，使用渐变背景
const gradient = ctx.createLinearGradient(0, 0, 0, sceneHeight);
gradient.addColorStop(0, this.sceneColors.bg1);
gradient.addColorStop(1, this.sceneColors.bg2);
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, this.screenWidth, sceneHeight);
}
// 底部渐变过渡到对话框
const fadeGradient = ctx.createLinearGradient(0, sceneHeight - 60, 0, sceneHeight);
@@ -721,21 +828,34 @@ export default class StoryScene extends BaseScene {
const sceneHeight = this.screenHeight * 0.42;
const centerX = this.screenWidth / 2;
// 场景氛围光效
const glowGradient = ctx.createRadialGradient(centerX, sceneHeight * 0.5, 0, centerX, sceneHeight * 0.5, 200);
glowGradient.addColorStop(0, this.sceneColors.accent + '30');
glowGradient.addColorStop(1, 'transparent');
ctx.fillStyle = glowGradient;
ctx.fillRect(0, 0, this.screenWidth, sceneHeight);
// 绘制角色立绘（如果有）
if (this.currentCharacterImg) {
const img = this.currentCharacterImg;
// 立绘高度占场景区域80%，保持比例
const charH = sceneHeight * 0.8;
const charW = charH * (img.width / img.height);
const charX = centerX - charW / 2;
const charY = sceneHeight - charH;
ctx.drawImage(img, charX, charY, charW, charH);
} else {
// 无立绘时显示装饰效果
// 场景氛围光效
const glowGradient = ctx.createRadialGradient(centerX, sceneHeight * 0.5, 0, centerX, sceneHeight * 0.5, 200);
glowGradient.addColorStop(0, this.sceneColors.accent + '30');
glowGradient.addColorStop(1, 'transparent');
ctx.fillStyle = glowGradient;
ctx.fillRect(0, 0, this.screenWidth, sceneHeight);
// 装饰粒子
ctx.fillStyle = this.sceneColors.accent + '40';
const particles = [[50, 100], [120, 180], [200, 80], [280, 150], [320, 60], [80, 250], [250, 220]];
particles.forEach(([x, y]) => {
ctx.beginPath();
ctx.arc(x, y, 2, 0, Math.PI * 2);
ctx.fill();
});
// 装饰粒子
ctx.fillStyle = this.sceneColors.accent + '40';
const particles = [[50, 100], [120, 180], [200, 80], [280, 150], [320, 60], [80, 250], [250, 220]];
particles.forEach(([x, y]) => {
ctx.beginPath();
ctx.arc(x, y, 2, 0, Math.PI * 2);
ctx.fill();
});
}
// 场景提示文字（中央）
ctx.fillStyle = 'rgba(255,255,255,0.15)';