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

refactor: 首页支持UGC，新增内容源Tab和作者信息

Browse Source
This commit is contained in:
liangguodong
2026-03-03 17:15:07 +08:00
parent 699362cc7d
commit 2cca60b0d8
2 changed files with 309 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -216,16 +216,17 @@ export default class AICreateScene extends BaseScene {
ctx.fillStyle = 'rgba(255,255,255,0.8)';
ctx.font = '12px sans-serif';
ctx.textAlign = 'left';
ctx.fillText('热门改写方向：', padding, y + 60);
ctx.fillText('热门改写方向：', padding, y + 55);
this.renderTags(ctx, this.rewriteTags, padding, y + 75, 'rewrite');
const tagEndY = this.renderTags(ctx, this.rewriteTags, padding, y + 70, 'rewrite');
// 选择故事
// 选择故事 - 位置根据标签高度动态调整
ctx.fillStyle = 'rgba(255,255,255,0.8)';
ctx.font = '13px sans-serif';
ctx.fillText('选择要改写的故事：', padding, y + 145);
ctx.textAlign = 'left';
ctx.fillText('选择要改写的故事：', padding, tagEndY + 25);
this.renderStoryList(ctx, y + 160, 'rewrite');
this.renderStoryList(ctx, tagEndY + 40, 'rewrite');
}
renderContinueTab(ctx, startY) {
@@ -240,15 +241,16 @@ export default class AICreateScene extends BaseScene {
ctx.fillStyle = 'rgba(255,255,255,0.8)';
ctx.font = '12px sans-serif';
ctx.textAlign = 'left';
ctx.fillText('续写方向：', padding, y + 60);
ctx.fillText('续写方向：', padding, y + 55);
this.renderTags(ctx, this.continueTags, padding, y + 75, 'continue');
const tagEndY = this.renderTags(ctx, this.continueTags, padding, y + 70, 'continue');
ctx.fillStyle = 'rgba(255,255,255,0.8)';
ctx.font = '13px sans-serif';
ctx.fillText('选择要续写的故事：', padding, y + 145);
ctx.textAlign = 'left';
ctx.fillText('选择要续写的故事：', padding, tagEndY + 25);
this.renderStoryList(ctx, y + 160, 'continue');
this.renderStoryList(ctx, tagEndY + 40, 'continue');
}
renderCreateTab(ctx, startY) {
@@ -265,24 +267,27 @@ export default class AICreateScene extends BaseScene {
ctx.fillStyle = 'rgba(255,255,255,0.8)';
ctx.font = '13px sans-serif';
ctx.textAlign = 'left';
ctx.fillText('选择题材：', padding, y + 60);
ctx.fillText('选择题材：', padding, y + 55);
this.renderTags(ctx, this.genreTags, padding, y + 75, 'genre');
const tagEndY = this.renderTags(ctx, this.genreTags, padding, y + 70, 'genre');
// 关键词输入
ctx.fillText('故事关键词：', padding, y + 145);
this.renderInputBox(ctx, padding, y + 160, inputWidth, 45, this.createForm.keywords || '例如：霸总、契约婚姻、追妻火葬场', 'keywords');
let currentY = tagEndY + 25;
ctx.fillText('故事关键词：', padding, currentY);
this.renderInputBox(ctx, padding, currentY + 15, inputWidth, 45, this.createForm.keywords || '例如：霸总、契约婚姻、追妻火葬场', 'keywords');
// 主角设定
ctx.fillText('主角设定：', padding, y + 225);
this.renderInputBox(ctx, padding, y + 240, inputWidth, 45, this.createForm.protagonist || '例如：独立女性设计师', 'protagonist');
currentY += 80;
ctx.fillText('主角设定：', padding, currentY);
this.renderInputBox(ctx, padding, currentY + 15, inputWidth, 45, this.createForm.protagonist || '例如：独立女性设计师', 'protagonist');
// 核心冲突
ctx.fillText('核心冲突：', padding, y + 305);
this.renderInputBox(ctx, padding, y + 320, inputWidth, 45, this.createForm.conflict || '例如：假结婚变真爱', 'conflict');
currentY += 80;
ctx.fillText('核心冲突：', padding, currentY);
this.renderInputBox(ctx, padding, currentY + 15, inputWidth, 45, this.createForm.conflict || '例如：假结婚变真爱', 'conflict');
// 开始创作按钮
const btnY = y + 400;
const btnY = currentY + 85;
const btnGradient = ctx.createLinearGradient(padding, btnY, this.screenWidth - padding, btnY);
btnGradient.addColorStop(0, '#a855f7');
btnGradient.addColorStop(1, '#ec4899');
@@ -303,6 +308,7 @@ export default class AICreateScene extends BaseScene {
const tagGap = 8;
let currentX = startX;
let currentY = startY;
let maxY = startY + tagHeight; // 记录最大Y坐标
if (!this.tagRects) this.tagRects = {};
this.tagRects[type] = [];
@@ -314,6 +320,7 @@ export default class AICreateScene extends BaseScene {
if (currentX + tagWidth > this.screenWidth - 15) {
currentX = startX;
currentY += tagHeight + tagGap;
maxY = currentY + tagHeight;
}
const isSelected = (type === 'genre' && this.createForm.genre === tag) ||
@@ -353,6 +360,8 @@ export default class AICreateScene extends BaseScene {
currentX += tagWidth + tagGap;
});
return maxY; // 返回标签区域结束的Y坐标
}
renderInputBox(ctx, x, y, width, height, placeholder, field) {