1382 lines
32 KiB
Vue
1382 lines
32 KiB
Vue
|
<template>
|
|||
|
|
<view class="ai-generate-container" :style="{ paddingTop: statusBarHeight + 'px' }">
|
|||
|
|
<!-- 顶部导航 -->
|
|||
|
|
<view class="nav-bar">
|
|||
|
|
<view class="nav-left" @click="goBack">
|
|||
|
|
<text class="iconfont icon-fanhui"></text>
|
|||
|
|
</view>
|
|||
|
|
<view class="nav-title">图片生成</view>
|
|||
|
|
<view class="nav-right" @click="goToHistory">
|
|||
|
|
<text class="iconfont icon-lishi"></text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<scroll-view scroll-y class="main-content" :style="{ height: scrollViewHeight }">
|
|||
|
|
<!-- 参考图模块 -->
|
|||
|
|
<view class="section reference-section">
|
|||
|
|
|
|||
|
|
<view class="reference-images">
|
|||
|
|
<!-- 已上传的参考图 -->
|
|||
|
|
<view
|
|||
|
|
v-for="(img, index) in referenceImages"
|
|||
|
|
:key="index"
|
|||
|
|
class="reference-item"
|
|||
|
|
>
|
|||
|
|
<image :src="img" mode="aspectFill" class="ref-image"></image>
|
|||
|
|
<view class="ref-delete" @click="removeReference(index)">
|
|||
|
|
<text class="iconfont icon-guanbi"></text>
|
|||
|
|
</view>
|
|||
|
|
<view class="ref-tag">智能参考</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 添加按钮 -->
|
|||
|
|
<view
|
|||
|
|
v-if="referenceImages.length < 3"
|
|||
|
|
class="reference-add"
|
|||
|
|
@click="addReference"
|
|||
|
|
>
|
|||
|
|
<text class="add-icon">+</text>
|
|||
|
|
<text class="add-text">上传参考图</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 提示词输入模块 -->
|
|||
|
|
<view class="section prompt-section">
|
|||
|
|
<view class="prompt-input-wrapper">
|
|||
|
|
<textarea
|
|||
|
|
v-model="promptText"
|
|||
|
|
class="prompt-input"
|
|||
|
|
placeholder="输入想要生成的图片描述，如：做一张618大促海报"
|
|||
|
|
:maxlength="800"
|
|||
|
|
:auto-height="true"
|
|||
|
|
@input="onPromptInput"
|
|||
|
|
></textarea>
|
|||
|
|
|
|||
|
|
<!-- 语音输入按钮 -->
|
|||
|
|
<view class="voice-btn" @click="startVoiceInput" v-if="!isRecording">
|
|||
|
|
<text class="iconfont icon-laba"></text>
|
|||
|
|
</view>
|
|||
|
|
<view class="voice-btn recording" @click="stopVoiceInput" v-else>
|
|||
|
|
<view class="recording-animation"></view>
|
|||
|
|
<text class="recording-time">{{ recordDuration }}s</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 录音提示 -->
|
|||
|
|
<view class="recording-hint" v-if="isRecording">
|
|||
|
|
<text class="hint-icon">🎤</text>
|
|||
|
|
<text class="hint-text">正在录音，点击右下角完成</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 提示词建议 -->
|
|||
|
|
<view class="prompt-suggestions" v-if="showSuggestions">
|
|||
|
|
<view
|
|||
|
|
v-for="(item, index) in suggestions"
|
|||
|
|
:key="index"
|
|||
|
|
class="suggestion-item"
|
|||
|
|
@click="applySuggestion(item)"
|
|||
|
|
>
|
|||
|
|
<text class="suggestion-text">{{ item }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 生成类型切换 -->
|
|||
|
|
<view class="section type-section">
|
|||
|
|
<view class="type-tabs">
|
|||
|
|
<view class="type-tab active">
|
|||
|
|
<text class="tab-text">图片生成</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="type-tab" @click="goToVideoGenerate">
|
|||
|
|
<text class="tab-text">视频生成</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 配置选项 -->
|
|||
|
|
<view class="section config-section">
|
|||
|
|
<!-- 生成比例选择 -->
|
|||
|
|
<view class="ratio-section">
|
|||
|
|
<view class="ratio-header" @click="showRatioList = !showRatioList">
|
|||
|
|
<view class="ratio-title-wrapper">
|
|||
|
|
<text class="ratio-title">生成比例</text>
|
|||
|
|
<text class="ratio-current" v-if="!showRatioList">{{ selectedRatio }}</text>
|
|||
|
|
</view>
|
|||
|
|
<text class="iconfont" :class="showRatioList ? 'icon-xiangshang' : 'icon-xiangxia'"></text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="ratio-content" v-if="showRatioList">
|
|||
|
|
<view class="ratio-list">
|
|||
|
|
<view
|
|||
|
|
v-for="(ratio, index) in ratios"
|
|||
|
|
:key="index"
|
|||
|
|
:class="['ratio-item', selectedRatio === ratio.value ? 'active' : '']"
|
|||
|
|
@click="selectRatio(ratio.value)"
|
|||
|
|
>
|
|||
|
|
<view class="ratio-box" :style="{ aspectRatio: ratio.aspect }"></view>
|
|||
|
|
<text class="ratio-text">{{ ratio.value }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 联想词助手开关 -->
|
|||
|
|
<view class="config-item assistant-item">
|
|||
|
|
<view class="assistant-info">
|
|||
|
|
<text class="assistant-title">联想词助手</text>
|
|||
|
|
<text class="assistant-desc">AI智能补充和优化提示词</text>
|
|||
|
|
</view>
|
|||
|
|
<switch
|
|||
|
|
:checked="enableAssistant"
|
|||
|
|
@change="toggleAssistant"
|
|||
|
|
color="#42ca4d"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 底部占位 -->
|
|||
|
|
<view class="bottom-placeholder"></view>
|
|||
|
|
</scroll-view>
|
|||
|
|
|
|||
|
|
<!-- AI生成内容标识 -->
|
|||
|
|
<view class="ai-notice">
|
|||
|
|
<text class="ai-notice-text">内容由AI生成，结果仅供参考</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 底部操作栏 -->
|
|||
|
|
<view class="footer-bar">
|
|||
|
|
<button class="generate-btn" @click="handleGenerate">
|
|||
|
|
<text class="btn-text">一键生成</text>
|
|||
|
|
<!-- <text class="btn-count">{{ generateCount }}/张</text> -->
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<button class="gallery-btn" @click="goToGallery">
|
|||
|
|
<text class="iconfont icon-tupian"></text>
|
|||
|
|
<text class="btn-text">我的创作</text>
|
|||
|
|
</button>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import api from '@/api/models-api.js'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
statusBarHeight: 0,
|
|||
|
|
scrollViewHeight: '100vh',
|
|||
|
|
|
|||
|
|
// 参考图
|
|||
|
|
referenceImages: [],
|
|||
|
|
|
|||
|
|
// 提示词
|
|||
|
|
promptText: '',
|
|||
|
|
showSuggestions: false,
|
|||
|
|
suggestions: [
|
|||
|
|
'618大促海报',
|
|||
|
|
'会员礼包banner',
|
|||
|
|
'新品上市宣传图',
|
|||
|
|
'优惠券设计'
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
// 语音输入
|
|||
|
|
isRecording: false,
|
|||
|
|
recorderManager: null,
|
|||
|
|
recordDuration: 0,
|
|||
|
|
recordTimer: null,
|
|||
|
|
|
|||
|
|
// 模型选择
|
|||
|
|
selectedModel: '4.0',
|
|||
|
|
showModelPicker: false,
|
|||
|
|
models: [
|
|||
|
|
{
|
|||
|
|
name: '4.0',
|
|||
|
|
value: '4.0',
|
|||
|
|
icon: '/static/images/model-4.0.png',
|
|||
|
|
desc: '最新模型，图片质量最高，速度适中',
|
|||
|
|
badge: 'New'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '3.1',
|
|||
|
|
value: '3.1',
|
|||
|
|
icon: '/static/images/model-3.1.png',
|
|||
|
|
desc: '平衡模型，质量与速度兼顾'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '3.0',
|
|||
|
|
value: '3.0',
|
|||
|
|
icon: '/static/images/model-3.0.png',
|
|||
|
|
desc: '稳定版本，生成速度快'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '2.1',
|
|||
|
|
value: '2.1',
|
|||
|
|
icon: '/static/images/model-2.1.png',
|
|||
|
|
desc: '轻量模型，快速生成'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '2.0 PRO',
|
|||
|
|
value: '2.0',
|
|||
|
|
icon: '/static/images/model-2.0.png',
|
|||
|
|
desc: '专业版，细节丰富'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
// 生成比例
|
|||
|
|
selectedRatio: '9:16',
|
|||
|
|
ratios: [
|
|||
|
|
{ value: '9:16', aspect: '9/16', label: '竖屏' },
|
|||
|
|
{ value: '3:4', aspect: '3/4', label: '竖屏' },
|
|||
|
|
{ value: '2:3', aspect: '2/3', label: '竖屏' },
|
|||
|
|
{ value: '1:1', aspect: '1/1', label: '方形' },
|
|||
|
|
{ value: '3:2', aspect: '3/2', label: '横屏' }
|
|||
|
|
],
|
|||
|
|
showRatioList: false, // 比例列表展开状态
|
|||
|
|
|
|||
|
|
// 图片质量
|
|||
|
|
selectedQuality: '2K',
|
|||
|
|
qualities: [
|
|||
|
|
{ value: '2K', label: '2K' },
|
|||
|
|
{ value: '4K', label: '4K' }
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
// 联想词助手
|
|||
|
|
enableAssistant: true,
|
|||
|
|
|
|||
|
|
// 生成类型
|
|||
|
|
generateType: 'image',
|
|||
|
|
generateCount: 4,
|
|||
|
|
sourceArticleId: ''
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onLoad(options) {
|
|||
|
|
this.initPage();
|
|||
|
|
if (options && options.description) {
|
|||
|
|
this.promptText = decodeURIComponent(options.description);
|
|||
|
|
}
|
|||
|
|
if (options && options.articleId) {
|
|||
|
|
this.sourceArticleId = options.articleId;
|
|||
|
|
}
|
|||
|
|
// 接收参考图片参数
|
|||
|
|
if (options && options.referenceImage) {
|
|||
|
|
const refImage = decodeURIComponent(options.referenceImage);
|
|||
|
|
this.referenceImages = [refImage];
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onUnload() {
|
|||
|
|
// 清理录音计时器
|
|||
|
|
this.stopRecordTimer();
|
|||
|
|
|
|||
|
|
// 如果正在录音，停止录音
|
|||
|
|
if (this.isRecording && this.recorderManager) {
|
|||
|
|
this.recorderManager.stop();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
initPage() {
|
|||
|
|
const systemInfo = uni.getSystemInfoSync();
|
|||
|
|
this.statusBarHeight = systemInfo.statusBarHeight || 0;
|
|||
|
|
|
|||
|
|
// 计算滚动区域高度
|
|||
|
|
const navHeight = 44;
|
|||
|
|
const footerHeight = 120;
|
|||
|
|
this.scrollViewHeight = `calc(100vh - ${this.statusBarHeight + navHeight + footerHeight}px)`;
|
|||
|
|
|
|||
|
|
// 初始化录音管理器
|
|||
|
|
this.initRecorder();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 初始化录音管理器
|
|||
|
|
initRecorder() {
|
|||
|
|
// #ifdef MP-WEIXIN || APP-PLUS
|
|||
|
|
this.recorderManager = uni.getRecorderManager();
|
|||
|
|
|
|||
|
|
// 录音开始事件
|
|||
|
|
this.recorderManager.onStart(() => {
|
|||
|
|
console.log('录音开始');
|
|||
|
|
this.recordDuration = 0;
|
|||
|
|
this.startRecordTimer();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 录音结束事件
|
|||
|
|
this.recorderManager.onStop((res) => {
|
|||
|
|
console.log('录音结束', res);
|
|||
|
|
this.stopRecordTimer();
|
|||
|
|
|
|||
|
|
if (res.duration < 1000) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '录音时间太短',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理录音结果
|
|||
|
|
this.handleRecordResult(res);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 录音错误事件
|
|||
|
|
this.recorderManager.onError((err) => {
|
|||
|
|
console.error('录音错误:', err);
|
|||
|
|
this.isRecording = false;
|
|||
|
|
this.stopRecordTimer();
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '录音失败，请重试',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
// #ifdef H5
|
|||
|
|
// H5 环境提示
|
|||
|
|
console.log('H5环境暂不支持录音功能');
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 开始录音计时
|
|||
|
|
startRecordTimer() {
|
|||
|
|
this.recordTimer = setInterval(() => {
|
|||
|
|
this.recordDuration++;
|
|||
|
|
if (this.recordDuration >= 60) {
|
|||
|
|
// 录音超过60秒自动停止
|
|||
|
|
this.stopVoiceInput();
|
|||
|
|
}
|
|||
|
|
}, 1000);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 停止录音计时
|
|||
|
|
stopRecordTimer() {
|
|||
|
|
if (this.recordTimer) {
|
|||
|
|
clearInterval(this.recordTimer);
|
|||
|
|
this.recordTimer = null;
|
|||
|
|
}
|
|||
|
|
this.recordDuration = 0;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 返回
|
|||
|
|
goBack() {
|
|||
|
|
uni.navigateBack();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 查看历史
|
|||
|
|
goToHistory() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/ai-generate/history'
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 跳转到我的图库
|
|||
|
|
goToGallery() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/ai-generate/history'
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 跳转到视频生成
|
|||
|
|
goToVideoGenerate() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/ai-generate/oneclick'
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 添加参考图
|
|||
|
|
async addReference() {
|
|||
|
|
if (this.referenceImages.length >= 3) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '最多添加3张参考图',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// 选择图片
|
|||
|
|
const res = await new Promise((resolve, reject) => {
|
|||
|
|
uni.chooseImage({
|
|||
|
|
count: 3 - this.referenceImages.length,
|
|||
|
|
sizeType: ['compressed'],
|
|||
|
|
sourceType: ['album', 'camera'],
|
|||
|
|
success: resolve,
|
|||
|
|
fail: reject
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 批量上传图片
|
|||
|
|
const uploadPromises = res.tempFilePaths.map(async (filePath, index) => {
|
|||
|
|
try {
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: `上传中 ${index + 1}/${res.tempFilePaths.length}...`,
|
|||
|
|
mask: true
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const uploadResult = await api.uploadFile(filePath, {
|
|||
|
|
model: 'user',
|
|||
|
|
pid: '7'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (uploadResult && uploadResult.code === 200) {
|
|||
|
|
console.log('图片上传成功:', uploadResult.data);
|
|||
|
|
return uploadResult.data.fullUrl;
|
|||
|
|
} else {
|
|||
|
|
throw new Error(uploadResult?.message || '上传失败');
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('图片上传失败:', error);
|
|||
|
|
throw error;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 等待所有图片上传完成
|
|||
|
|
const uploadedUrls = await Promise.all(uploadPromises);
|
|||
|
|
|
|||
|
|
uni.hideLoading();
|
|||
|
|
|
|||
|
|
// 添加到参考图列表
|
|||
|
|
this.referenceImages.push(...uploadedUrls);
|
|||
|
|
|
|||
|
|
uni.showToast({
|
|||
|
|
title: `成功添加${uploadedUrls.length}张图片`,
|
|||
|
|
icon: 'success',
|
|||
|
|
duration: 2000
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
} catch (error) {
|
|||
|
|
uni.hideLoading();
|
|||
|
|
console.error('图片选择或上传失败:', error);
|
|||
|
|
|
|||
|
|
let errorMsg = '图片上传失败';
|
|||
|
|
if (error.errMsg && error.errMsg.includes('cancel')) {
|
|||
|
|
// 用户取消选择，不显示错误提示
|
|||
|
|
return;
|
|||
|
|
} else if (error.message) {
|
|||
|
|
errorMsg = error.message;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
uni.showToast({
|
|||
|
|
title: errorMsg,
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 3000
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 移除参考图
|
|||
|
|
removeReference(index) {
|
|||
|
|
this.referenceImages.splice(index, 1);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 提示词输入
|
|||
|
|
onPromptInput(e) {
|
|||
|
|
this.promptText = e.detail.value;
|
|||
|
|
// 显示建议（简化逻辑）
|
|||
|
|
this.showSuggestions = this.promptText.length > 0 && this.promptText.length < 10;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 应用建议
|
|||
|
|
applySuggestion(text) {
|
|||
|
|
this.promptText = text;
|
|||
|
|
this.showSuggestions = false;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 开始语音输入
|
|||
|
|
startVoiceInput() {
|
|||
|
|
// #ifdef H5
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: 'H5环境暂不支持语音输入，请使用小程序或APP',
|
|||
|
|
showCancel: false
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
// #ifdef MP-WEIXIN || APP-PLUS
|
|||
|
|
if (!this.recorderManager) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '录音功能初始化失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 检查录音权限
|
|||
|
|
uni.authorize({
|
|||
|
|
scope: 'scope.record',
|
|||
|
|
success: () => {
|
|||
|
|
this.startRecording();
|
|||
|
|
},
|
|||
|
|
fail: () => {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '需要录音权限',
|
|||
|
|
content: '请在设置中开启录音权限',
|
|||
|
|
confirmText: '去设置',
|
|||
|
|
success: (res) => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
uni.openSetting();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 开始录音
|
|||
|
|
startRecording() {
|
|||
|
|
this.isRecording = true;
|
|||
|
|
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '开始录音',
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 1000
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 开始录音
|
|||
|
|
this.recorderManager.start({
|
|||
|
|
duration: 60000, // 最长录音60秒
|
|||
|
|
sampleRate: 16000,
|
|||
|
|
numberOfChannels: 1,
|
|||
|
|
encodeBitRate: 96000,
|
|||
|
|
format: 'mp3'
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 停止语音输入
|
|||
|
|
stopVoiceInput() {
|
|||
|
|
if (!this.isRecording) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.isRecording = false;
|
|||
|
|
|
|||
|
|
// #ifdef MP-WEIXIN || APP-PLUS
|
|||
|
|
if (this.recorderManager) {
|
|||
|
|
this.recorderManager.stop();
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '正在识别...',
|
|||
|
|
icon: 'loading',
|
|||
|
|
duration: 2000
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 处理录音结果
|
|||
|
|
async handleRecordResult(res) {
|
|||
|
|
console.log('录音文件路径:', res.tempFilePath);
|
|||
|
|
console.log('录音时长:', res.duration, 'ms');
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// 这里可以调用语音识别API
|
|||
|
|
// 示例：将录音文件上传到服务器进行识别
|
|||
|
|
const recognizedText = await this.recognizeSpeech(res.tempFilePath);
|
|||
|
|
|
|||
|
|
if (recognizedText) {
|
|||
|
|
// 将识别结果添加到提示词中
|
|||
|
|
if (this.promptText) {
|
|||
|
|
this.promptText += ' ' + recognizedText;
|
|||
|
|
} else {
|
|||
|
|
this.promptText = recognizedText;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '识别成功',
|
|||
|
|
icon: 'success',
|
|||
|
|
duration: 1500
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('语音识别失败:', error);
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '识别失败，请重试',
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 2000
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 语音识别（对接腾讯云语音识别服务）
|
|||
|
|
async recognizeSpeech(audioPath) {
|
|||
|
|
try {
|
|||
|
|
// 1. 上传录音文件到服务器
|
|||
|
|
console.log('开始上传录音文件:', audioPath);
|
|||
|
|
const uploadRes = await api.uploadFile(audioPath, {
|
|||
|
|
model: 'audio',
|
|||
|
|
pid: '8'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (!uploadRes || uploadRes.code !== 200) {
|
|||
|
|
throw new Error('录音文件上传失败');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const audioUrl = uploadRes.data.fullUrl;
|
|||
|
|
console.log('录音文件上传成功，URL:', audioUrl);
|
|||
|
|
|
|||
|
|
// 2. 创建语音识别任务
|
|||
|
|
console.log('创建语音识别任务...');
|
|||
|
|
const createTaskRes = await api.createAsrTask({
|
|||
|
|
url: audioUrl,
|
|||
|
|
engineModelType: '16k_zh',
|
|||
|
|
channelNum: 1,
|
|||
|
|
resTextFormat: 0,
|
|||
|
|
sourceType: 0
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (!createTaskRes || createTaskRes.code !== 200) {
|
|||
|
|
throw new Error('创建识别任务失败');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const taskId = createTaskRes.data.taskId;
|
|||
|
|
console.log('识别任务创建成功，任务ID:', taskId);
|
|||
|
|
|
|||
|
|
// 3. 轮询查询识别结果
|
|||
|
|
const result = await this.pollAsrResult(taskId);
|
|||
|
|
|
|||
|
|
// 4. 解析识别文本
|
|||
|
|
const text = this.parseAsrResult(result);
|
|||
|
|
|
|||
|
|
if (!text) {
|
|||
|
|
throw new Error('识别结果为空');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
console.log('语音识别成功，结果:', text);
|
|||
|
|
return text;
|
|||
|
|
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('语音识别失败:', error);
|
|||
|
|
throw error;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 轮询查询ASR识别结果
|
|||
|
|
async pollAsrResult(taskId, maxAttempts = 30, interval = 2000) {
|
|||
|
|
let attempts = 0;
|
|||
|
|
|
|||
|
|
while (attempts < maxAttempts) {
|
|||
|
|
attempts++;
|
|||
|
|
console.log(`查询识别状态，第${attempts}次尝试...`);
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const statusRes = await api.queryAsrStatus(taskId);
|
|||
|
|
|
|||
|
|
if (!statusRes || statusRes.code !== 200) {
|
|||
|
|
throw new Error('查询识别状态失败');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const status = statusRes.data.status;
|
|||
|
|
const statusStr = statusRes.data.statusStr;
|
|||
|
|
|
|||
|
|
console.log(`任务状态: ${statusStr} (${status})`);
|
|||
|
|
|
|||
|
|
// status: 0-等待处理, 1-处理中, 2-识别成功, 3-识别失败
|
|||
|
|
if (status === 2) {
|
|||
|
|
// 识别成功
|
|||
|
|
console.log('识别成功！');
|
|||
|
|
return statusRes.data;
|
|||
|
|
} else if (status === 3) {
|
|||
|
|
// 识别失败
|
|||
|
|
throw new Error(statusRes.data.errorMsg || '识别失败');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 等待一段时间后继续查询
|
|||
|
|
await new Promise(resolve => setTimeout(resolve, interval));
|
|||
|
|
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('查询识别状态出错:', error);
|
|||
|
|
|
|||
|
|
// 如果不是最后一次尝试，继续重试
|
|||
|
|
if (attempts < maxAttempts) {
|
|||
|
|
await new Promise(resolve => setTimeout(resolve, interval));
|
|||
|
|
continue;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
throw error;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
throw new Error('识别超时，请重试');
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 解析ASR识别结果文本
|
|||
|
|
parseAsrResult(data) {
|
|||
|
|
if (!data || !data.result) {
|
|||
|
|
return '';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let text = data.result;
|
|||
|
|
|
|||
|
|
// 去除时间戳标记，例如：[0:0.000,0:11.580]
|
|||
|
|
text = text.replace(/\[\d+:\d+\.\d+,\d+:\d+\.\d+\]\s*/g, '');
|
|||
|
|
|
|||
|
|
// 去除多余的空格和换行
|
|||
|
|
text = text.replace(/\n+/g, ' ').trim();
|
|||
|
|
|
|||
|
|
// 去除多余的空格
|
|||
|
|
text = text.replace(/\s+/g, ' ');
|
|||
|
|
|
|||
|
|
return text;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 选择模型
|
|||
|
|
selectModel(value) {
|
|||
|
|
this.selectedModel = value;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 从选择器选择模型
|
|||
|
|
selectModelFromPicker(value) {
|
|||
|
|
this.selectedModel = value;
|
|||
|
|
this.showModelPicker = false;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 选择比例
|
|||
|
|
selectRatio(value) {
|
|||
|
|
this.selectedRatio = value;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 选择质量
|
|||
|
|
selectQuality(value) {
|
|||
|
|
this.selectedQuality = value;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 切换联想词助手
|
|||
|
|
toggleAssistant(e) {
|
|||
|
|
this.enableAssistant = e.detail.value;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 生成图片
|
|||
|
|
async handleGenerate() {
|
|||
|
|
// 验证
|
|||
|
|
if (!this.promptText.trim()) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请输入生成描述',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 验证是否有参考图
|
|||
|
|
if (this.referenceImages.length === 0) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请至少添加一张参考图',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: '生成中...'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 调用图片编辑API
|
|||
|
|
const response = await api.createImageEditTask({
|
|||
|
|
prompt: this.promptText,
|
|||
|
|
image_urls: this.referenceImages,
|
|||
|
|
output_format: 'png',
|
|||
|
|
image_size: this.selectedRatio,
|
|||
|
|
title: this.promptText
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
console.log('图片编辑任务创建成功:', response);
|
|||
|
|
|
|||
|
|
uni.hideLoading();
|
|||
|
|
|
|||
|
|
// 跳转到结果页，携带生成参数
|
|||
|
|
const params = {
|
|||
|
|
promptText: encodeURIComponent(this.promptText),
|
|||
|
|
ratio: this.selectedRatio,
|
|||
|
|
model: this.selectedModel,
|
|||
|
|
referenceImages: encodeURIComponent(JSON.stringify(this.referenceImages)),
|
|||
|
|
generate: 'true'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const queryString = Object.keys(params)
|
|||
|
|
.map(key => `${key}=${params[key]}`)
|
|||
|
|
.join('&');
|
|||
|
|
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `/pages/ai-generate/result?${queryString}`,
|
|||
|
|
success: () => {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '任务已提交',
|
|||
|
|
icon: 'success'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('图片编辑任务创建失败:', error);
|
|||
|
|
uni.hideLoading();
|
|||
|
|
uni.showToast({
|
|||
|
|
title: error.message || '生成失败，请重试',
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 2000
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.ai-generate-container {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100vh;
|
|||
|
|
background: linear-gradient(180deg, #000000 0%, #1a1a1a 100%);
|
|||
|
|
position: relative;
|
|||
|
|
overflow-x: hidden;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 顶部导航
|
|||
|
|
.nav-bar {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
height: 44px;
|
|||
|
|
padding: 0 16px;
|
|||
|
|
|
|||
|
|
.nav-left,
|
|||
|
|
.nav-right {
|
|||
|
|
width: 44px;
|
|||
|
|
height: 44px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
.iconfont {
|
|||
|
|
font-size: 20px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-title {
|
|||
|
|
font-size: 17px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// AI生成内容标识
|
|||
|
|
.ai-notice {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
padding: 8px 16px;
|
|||
|
|
margin: -8px 16px 1px 16px;
|
|||
|
|
background: rgba(66, 202, 77, 0.1);
|
|||
|
|
border: 1px solid rgba(66, 202, 77, 0.3);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
backdrop-filter: blur(10px);
|
|||
|
|
|
|||
|
|
.ai-notice-icon {
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ai-notice-text {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #42ca4d;
|
|||
|
|
line-height: 1.4;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 主内容区
|
|||
|
|
.main-content {
|
|||
|
|
padding: 0 16px; width:92%
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 区块样式
|
|||
|
|
.section {
|
|||
|
|
margin-bottom: 20px; margin-top: 10rpx;
|
|||
|
|
|
|||
|
|
.section-header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
|
|||
|
|
.section-title {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-tip {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #8f9bb3; margin-right: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 参考图模块
|
|||
|
|
.reference-images {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 12px;
|
|||
|
|
|
|||
|
|
.reference-item {
|
|||
|
|
width: 100px;
|
|||
|
|
height: 100px;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.ref-image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ref-delete {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 4px;
|
|||
|
|
right: 4px;
|
|||
|
|
width: 20px;
|
|||
|
|
height: 20px;
|
|||
|
|
background: rgba(0, 0, 0, 0.6);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
.iconfont {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ref-tag {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 4px;
|
|||
|
|
left: 4px;
|
|||
|
|
padding: 2px 6px;
|
|||
|
|
background: rgba(0, 214, 178, 0.9);
|
|||
|
|
border-radius: 4px;
|
|||
|
|
font-size: 10px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.reference-add {
|
|||
|
|
width: 100px;
|
|||
|
|
height: 100px;
|
|||
|
|
border: 2px dashed #3d4458;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
background: rgba(61, 68, 88, 0.2);
|
|||
|
|
|
|||
|
|
.add-icon {
|
|||
|
|
font-size: 32px;
|
|||
|
|
color: #8f9bb3;
|
|||
|
|
margin-bottom: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-text {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #8f9bb3;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 提示词输入
|
|||
|
|
.prompt-section {
|
|||
|
|
.prompt-input-wrapper {
|
|||
|
|
position: relative;
|
|||
|
|
background: rgba(61, 68, 88, 0.3);
|
|||
|
|
border-radius: 16px;
|
|||
|
|
padding: 16px;
|
|||
|
|
min-height: 120px;
|
|||
|
|
|
|||
|
|
.prompt-input {
|
|||
|
|
width: 100%;
|
|||
|
|
min-height: 88px;
|
|||
|
|
font-size: 15px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.voice-btn {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 16px;
|
|||
|
|
right: 16px;
|
|||
|
|
width: 44px;
|
|||
|
|
height: 44px;
|
|||
|
|
background: linear-gradient(135deg, #42ca4d 0%, #38b045 100%);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
.iconfont {
|
|||
|
|
font-size: 24px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.recording {
|
|||
|
|
background: #ff6b6b;
|
|||
|
|
width: 56px;
|
|||
|
|
height: 56px;
|
|||
|
|
|
|||
|
|
.recording-animation {
|
|||
|
|
width: 20px;
|
|||
|
|
height: 20px;
|
|||
|
|
background: #ffffff;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
animation: pulse 1s infinite;
|
|||
|
|
margin-bottom: 2px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.recording-time {
|
|||
|
|
font-size: 10px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 录音提示
|
|||
|
|
.recording-hint {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
margin-top: 12px;
|
|||
|
|
padding: 8px 16px;
|
|||
|
|
background: rgba(255, 107, 107, 0.1);
|
|||
|
|
border-radius: 20px;
|
|||
|
|
border: 1px solid rgba(255, 107, 107, 0.3);
|
|||
|
|
animation: blink 1.5s infinite;
|
|||
|
|
|
|||
|
|
.hint-icon {
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hint-text {
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: #ff6b6b;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.prompt-suggestions {
|
|||
|
|
margin-top: 12px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 8px;
|
|||
|
|
|
|||
|
|
.suggestion-item {
|
|||
|
|
padding: 6px 12px;
|
|||
|
|
background: rgba(61, 68, 88, 0.4);
|
|||
|
|
border-radius: 16px;
|
|||
|
|
|
|||
|
|
.suggestion-text {
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: #8f9bb3;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 生成类型切换
|
|||
|
|
.type-section {
|
|||
|
|
background: rgba(61, 68, 88, 0.3);
|
|||
|
|
border-radius: 16px;
|
|||
|
|
padding: 0px;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
|
|||
|
|
.type-tabs {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 8px;
|
|||
|
|
|
|||
|
|
.type-tab {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 48px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
background: transparent;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
cursor: pointer;
|
|||
|
|
|
|||
|
|
.tab-text {
|
|||
|
|
font-size: 15px;
|
|||
|
|
color: #8f9bb3;
|
|||
|
|
font-weight: 500;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.active {
|
|||
|
|
background-color: #404641;
|
|||
|
|
|
|||
|
|
.tab-text {
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&:not(.active):active {
|
|||
|
|
background: rgba(61, 68, 88, 0.5);
|
|||
|
|
transform: scale(0.98);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 配置选项
|
|||
|
|
.config-section {
|
|||
|
|
// 比例选择区域
|
|||
|
|
.ratio-section {
|
|||
|
|
background: rgba(61, 68, 88, 0.3);
|
|||
|
|
border-radius: 14px;
|
|||
|
|
padding: 14px;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
|
|||
|
|
.ratio-header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
cursor: pointer;
|
|||
|
|
|
|||
|
|
.ratio-title-wrapper {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
|
|||
|
|
.ratio-title {
|
|||
|
|
font-size: 15px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ratio-current {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #42ca4d;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.iconfont {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #8f9bb3;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ratio-content {
|
|||
|
|
margin-top: 12px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.config-item {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
|
|||
|
|
.config-header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
|
|||
|
|
.config-label {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
|
|||
|
|
.iconfont {
|
|||
|
|
font-size: 18px;
|
|||
|
|
color: #42ca4d;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.label-text {
|
|||
|
|
font-size: 15px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.label-version {
|
|||
|
|
font-size: 15px;
|
|||
|
|
color: #8f9bb3;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.config-action {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 4px;
|
|||
|
|
|
|||
|
|
.action-text {
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: #42ca4d;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.iconfont {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #42ca4d;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 比例列表
|
|||
|
|
.ratio-list {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 12px;
|
|||
|
|
|
|||
|
|
.ratio-item {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 10px;
|
|||
|
|
background: rgba(61, 68, 88, 0.3);
|
|||
|
|
border-radius: 10px;
|
|||
|
|
border: 2px solid transparent;
|
|||
|
|
|
|||
|
|
.ratio-box {
|
|||
|
|
width: 20px;
|
|||
|
|
background: #8f9bb3;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
margin-bottom: 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ratio-text {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #8f9bb3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.active {
|
|||
|
|
background: rgba(6, 67, 14, 0.1);
|
|||
|
|
border-color: #42ca4d;
|
|||
|
|
|
|||
|
|
.ratio-box {
|
|||
|
|
background: #42ca4d;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ratio-text {
|
|||
|
|
color: #42ca4d;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 联想词助手
|
|||
|
|
.assistant-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 14px;
|
|||
|
|
background: rgba(61, 68, 88, 0.3);
|
|||
|
|
border-radius: 12px;
|
|||
|
|
|
|||
|
|
.assistant-info {
|
|||
|
|
flex: 1;
|
|||
|
|
|
|||
|
|
.assistant-title {
|
|||
|
|
display: block;
|
|||
|
|
font-size: 15px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
margin-bottom: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.assistant-desc {
|
|||
|
|
display: block;
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #8f9bb3;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 底部占位
|
|||
|
|
.bottom-placeholder {
|
|||
|
|
height: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 底部操作栏
|
|||
|
|
.footer-bar {
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
padding: 12px 16px 24px;
|
|||
|
|
background: linear-gradient(0deg, rgba(10, 14, 26, 0.95) 0%, rgba(10, 14, 26, 0.8) 100%);
|
|||
|
|
backdrop-filter: blur(20px);
|
|||
|
|
display: flex;
|
|||
|
|
gap: 12px;
|
|||
|
|
|
|||
|
|
.generate-btn {
|
|||
|
|
flex: 2;
|
|||
|
|
height: 50px;
|
|||
|
|
background: linear-gradient(135deg, #42ca4d 0%, #38b045 100%);
|
|||
|
|
border-radius: 12px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
border: none;
|
|||
|
|
|
|||
|
|
.btn-text {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-count {
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: rgba(255, 255, 255, 0.8);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gallery-btn {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 50px;
|
|||
|
|
background: rgba(61, 68, 88, 0.4);
|
|||
|
|
border-radius: 12px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: 6px;
|
|||
|
|
border: none;
|
|||
|
|
|
|||
|
|
.iconfont {
|
|||
|
|
font-size: 18px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-text {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 动画
|
|||
|
|
@keyframes pulse {
|
|||
|
|
0%, 100% {
|
|||
|
|
transform: scale(1);
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
50% {
|
|||
|
|
transform: scale(0.8);
|
|||
|
|
opacity: 0.6;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes blink {
|
|||
|
|
0%, 100% {
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
50% {
|
|||
|
|
opacity: 0.5;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|