-
welcome
-
-
-
-
-
-
-
-
-
-
-
-
+
+
@@ -25,13 +25,13 @@ defineProps({
type: String,
default: '任务正在执行',
},
-});
+})
-
\ No newline at end of file
+
diff --git a/web/src/components/ui/ItemsInput.vue b/web/src/components/ui/ItemsInput.vue
index 42339645..9a298996 100644
--- a/web/src/components/ui/ItemsInput.vue
+++ b/web/src/components/ui/ItemsInput.vue
@@ -2,48 +2,48 @@
{{ tag }}
- + 新增
-
+ + 新增
-
\ No newline at end of file
+
diff --git a/web/src/components/ui/RippleButton.vue b/web/src/components/ui/RippleButton.vue
index c21b5985..84ff20da 100644
--- a/web/src/components/ui/RippleButton.vue
+++ b/web/src/components/ui/RippleButton.vue
@@ -1,35 +1,35 @@
-
\ No newline at end of file
+
diff --git a/web/src/main.js b/web/src/main.js
index 10015992..78839f63 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -5,21 +5,26 @@
// * @Author yangjian102621@163.com
// * +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-import { createApp } from "vue";
-import ElementPlus from "element-plus";
-import "element-plus/dist/index.css";
-import "@/assets/iconfont/iconfont.css";
-import "vant/lib/index.css";
-import App from "./App.vue";
-import { useThemeStore } from "@/store/theme";
-import { createPinia } from "pinia";
-import "animate.css/animate.min.css";
-import "@/assets/css/tailwind.css";
+import '@/assets/css/tailwind.css'
+import '@/assets/iconfont/iconfont.css'
+import { useThemeStore } from '@/store/theme'
+import 'animate.css/animate.min.css'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import { createPinia } from 'pinia'
+import 'vant/lib/index.css'
+import { createApp } from 'vue'
+import App from './App.vue'
+import '@/assets/css/common.scss'
+import '@/assets/css/theme-dark.scss'
+import '@/assets/css/theme-light.scss'
+import { router } from '@/router'
import {
ActionSheet,
Badge,
Button,
+ Calendar,
Cell,
CellGroup,
Circle,
@@ -48,12 +53,17 @@ import {
Overlay,
Picker,
Popup,
+ PullRefresh,
+ Radio,
+ RadioGroup,
Row,
Search,
ShareSheet,
Slider,
Sticky,
+ Swipe,
SwipeCell,
+ SwipeItem,
Switch,
Tab,
Tabbar,
@@ -61,64 +71,75 @@ import {
Tabs,
Tag,
TextEllipsis,
+ Toast,
Uploader,
-} from "vant";
-import { router } from "@/router";
-import "@/assets/css/theme-dark.styl";
-import "@/assets/css/theme-light.styl";
-import "@/assets/css/common.styl";
+} from 'vant'
-const pinia = createPinia();
-const themeStore = useThemeStore(pinia); // 使用 theme store
+const pinia = createPinia()
+const themeStore = useThemeStore(pinia) // 使用 theme store
// 设置初始主题
-document.documentElement.setAttribute("data-theme", themeStore.theme);
+document.documentElement.setAttribute('data-theme', themeStore.theme)
-const app = createApp(App);
-app.use(createPinia());
-app.use(ConfigProvider);
-app.use(Tabbar);
-app.use(TabbarItem);
-app.use(NavBar);
-app.use(Search);
-app.use(Cell);
-app.use(Image);
-app.use(TextEllipsis);
-app.use(Notify);
-app.use(Picker);
-app.use(Popup);
-app.use(List);
-app.use(Form);
-app.use(Field);
-app.use(CellGroup);
-app.use(Button);
-app.use(DropdownMenu);
-app.use(Icon);
-app.use(DropdownItem);
-app.use(Sticky);
-app.use(SwipeCell);
-app.use(Dialog);
-app.use(ShareSheet);
-app.use(Switch);
-app.use(Uploader);
-app.use(Tag);
-app.use(Overlay);
-app.use(Col);
-app.use(Row);
-app.use(Slider);
-app.use(Badge);
-app.use(Collapse);
-app.use(CollapseItem);
-app.use(Grid);
-app.use(GridItem);
-app.use(Empty);
-app.use(Circle);
-app.use(Loading);
-app.use(Lazyload);
-app.use(ImagePreview);
-app.use(Tab);
-app.use(Tabs);
-app.use(Divider);
-app.use(NoticeBar);
-app.use(ActionSheet);
-app.use(router).use(ElementPlus).mount("#app");
+// 同时设置初始 dark 类
+if (themeStore.theme === 'dark') {
+ document.documentElement.classList.add('dark')
+} else {
+ document.documentElement.classList.remove('dark')
+}
+
+const app = createApp(App)
+app.use(createPinia())
+app.use(ConfigProvider)
+app.use(Tabbar)
+app.use(TabbarItem)
+app.use(NavBar)
+app.use(Search)
+app.use(Cell)
+app.use(Image)
+app.use(TextEllipsis)
+app.use(Notify)
+app.use(Picker)
+app.use(Popup)
+app.use(Radio)
+app.use(RadioGroup)
+app.use(List)
+app.use(Form)
+app.use(Field)
+app.use(CellGroup)
+app.use(Button)
+app.use(DropdownMenu)
+app.use(Icon)
+app.use(DropdownItem)
+app.use(Sticky)
+app.use(Swipe)
+app.use(SwipeItem)
+app.use(SwipeCell)
+app.use(Dialog)
+app.use(ShareSheet)
+app.use(Switch)
+app.use(Uploader)
+app.use(Tag)
+app.use(Overlay)
+app.use(Col)
+app.use(Row)
+app.use(Slider)
+app.use(Badge)
+app.use(Collapse)
+app.use(CollapseItem)
+app.use(Grid)
+app.use(GridItem)
+app.use(Empty)
+app.use(Circle)
+app.use(Loading)
+app.use(Lazyload)
+app.use(ImagePreview)
+app.use(Tab)
+app.use(Tabs)
+app.use(Divider)
+app.use(NoticeBar)
+app.use(ActionSheet)
+app.use(PullRefresh)
+app.use(Calendar)
+app.use(Toast)
+app.use(router).use(ElementPlus).mount('#app')
diff --git a/web/src/router.js b/web/src/router.js
index a4396afd..f8f2bebf 100644
--- a/web/src/router.js
+++ b/web/src/router.js
@@ -123,25 +123,18 @@ const routes = [
meta: { title: '导出会话记录' },
component: () => import('@/views/ChatExport.vue'),
},
+
{
name: 'login',
path: '/login',
meta: { title: '用户登录' },
component: () => import('@/views/Login.vue'),
},
-
- {
- name: 'login-callback',
- path: '/login/callback',
- meta: { title: '用户登录' },
- component: () => import('@/views/LoginCallback.vue'),
- },
{
name: 'register',
path: '/register',
-
meta: { title: '用户注册' },
- component: () => import('@/views/Register.vue'),
+ component: () => import('@/views/Login.vue'),
},
{
name: 'resetpassword',
@@ -155,12 +148,7 @@ const routes = [
meta: { title: '控制台登录' },
component: () => import('@/views/admin/Login.vue'),
},
- {
- path: '/payReturn',
- name: 'pay-return',
- meta: { title: '支付回调' },
- component: () => import('@/views/PayReturn.vue'),
- },
+
{
name: 'admin',
path: '/admin',
@@ -175,10 +163,94 @@ const routes = [
component: () => import('@/views/admin/Dashboard.vue'),
},
{
- path: '/admin/system',
- name: 'admin-system',
- meta: { title: '系统设置' },
- component: () => import('@/views/admin/SysConfig.vue'),
+ path: '/admin/config/basic',
+ name: 'admin-config-basic',
+ meta: { title: '基础配置' },
+ component: () => import('@/views/admin/settings/BasicConfig.vue'),
+ },
+ {
+ path: '/admin/config/power',
+ name: 'admin-config-power',
+ meta: { title: '算力配置' },
+ component: () => import('@/views/admin/settings/PowerConfig.vue'),
+ },
+ {
+ path: '/admin/config/payment',
+ name: 'admin-config-payment',
+ meta: { title: '支付配置' },
+ component: () => import('@/views/admin/settings/PaymentConfig.vue'),
+ },
+ {
+ path: '/admin/config/storage',
+ name: 'admin-config-storage',
+ meta: { title: '存储配置' },
+ component: () => import('@/views/admin/settings/StorageConfig.vue'),
+ },
+ {
+ path: '/admin/config/sms',
+ name: 'admin-config-sms',
+ meta: { title: '短信配置' },
+ component: () => import('@/views/admin/settings/SmsConfig.vue'),
+ },
+ {
+ path: '/admin/config/smtp',
+ name: 'admin-config-smtp',
+ meta: { title: '邮件配置' },
+ component: () => import('@/views/admin/settings/SmtpConfig.vue'),
+ },
+ {
+ path: '/admin/config/plugin',
+ name: 'admin-config-plugin',
+ meta: { title: '插件配置' },
+ component: () => import('@/views/admin/settings/PluginConfig.vue'),
+ },
+ {
+ path: '/admin/moderation/config',
+ name: 'admin-config-moderation',
+ meta: { title: '文本审查配置' },
+ component: () => import('@/views/admin/moderation/ModerationConfig.vue'),
+ },
+ {
+ path: '/admin/moderation/list',
+ name: 'admin-moderation-list',
+ meta: { title: '文本审核记录' },
+ component: () => import('@/views/admin/moderation/ModerationList.vue'),
+ },
+ {
+ path: '/admin/config/markmap',
+ name: 'admin-config-markmap',
+ meta: { title: '思维导图配置' },
+ component: () => import('@/views/admin/settings/MarkMapConfig.vue'),
+ },
+ {
+ path: '/admin/config/notice',
+ name: 'admin-config-notice',
+ meta: { title: '公告配置' },
+ component: () => import('@/views/admin/settings/NoticeConfig.vue'),
+ },
+ {
+ path: '/admin/config/agreement',
+ name: 'admin-config-agreement',
+ meta: { title: '用户协议' },
+ component: () => import('@/views/admin/settings/AgreementConfig.vue'),
+ },
+ {
+ path: '/admin/config/privacy',
+ name: 'admin-config-privacy',
+ meta: { title: '隐私声明' },
+ component: () => import('@/views/admin/settings/PrivacyConfig.vue'),
+ },
+ {
+ path: '/admin/config/menu',
+ name: 'admin-config-menu',
+ meta: { title: '菜单配置' },
+ component: () => import('@/views/admin/settings/MenuConfig.vue'),
+ },
+ {
+ path: '/admin/config/license',
+ name: 'admin-config-license',
+ meta: { title: '授权激活' },
+ component: () => import('@/views/admin/settings/LicenseConfig.vue'),
},
{
path: '/admin/user',
@@ -268,7 +340,7 @@ const routes = [
path: '/admin/jimeng/config',
name: 'admin-jimeng-config',
meta: { title: '即梦设置' },
- component: () => import('@/views/admin/jimeng/JimengSetting.vue'),
+ component: () => import('@/views/admin/jimeng/JimengConfig.vue'),
},
{
path: '/admin/powerLog',
@@ -285,12 +357,6 @@ const routes = [
],
},
- {
- name: 'mobile-login',
- path: '/mobile/login',
- meta: { title: '用户登录' },
- component: () => import('@/views/mobile/Login.vue'),
- },
{
name: 'mobile',
path: '/mobile',
@@ -304,21 +370,37 @@ const routes = [
component: () => import('@/views/mobile/Index.vue'),
},
{
+ meta: { title: 'AI对话' },
path: '/mobile/chat',
name: 'mobile-chat',
component: () => import('@/views/mobile/ChatList.vue'),
},
{
- path: '/mobile/image',
- name: 'mobile-image',
- component: () => import('@/views/mobile/Image.vue'),
+ meta: { title: '创作中心' },
+ path: '/mobile/create',
+ name: 'mobile-create',
+ component: () => import('@/views/mobile/Create.vue'),
},
{
+ meta: { title: '发现' },
+ path: '/mobile/discover',
+ name: 'mobile-discover',
+ component: () => import('@/views/mobile/Discover.vue'),
+ },
+ {
+ meta: { title: '个人中心' },
path: '/mobile/profile',
name: 'mobile-profile',
component: () => import('@/views/mobile/Profile.vue'),
},
{
+ meta: { title: '会员充值' },
+ path: '/mobile/member',
+ name: 'mobile-member',
+ component: () => import('@/views/mobile/Member.vue'),
+ },
+ {
+ meta: { title: '作品展示' },
path: '/mobile/imgWall',
name: 'mobile-img-wall',
component: () => import('@/views/mobile/pages/ImgWall.vue'),
@@ -328,16 +410,50 @@ const routes = [
name: 'mobile-chat-session',
component: () => import('@/views/mobile/ChatSession.vue'),
},
+
{
- path: '/mobile/chat/export',
- name: 'mobile-chat-export',
- component: () => import('@/views/mobile/ChatExport.vue'),
- },
- {
+ meta: { title: '应用中心' },
path: '/mobile/apps',
name: 'mobile-apps',
component: () => import('@/views/mobile/Apps.vue'),
},
+ // 新增的功能页面路由
+ {
+ meta: { title: '消费日志' },
+ path: '/mobile/power-log',
+ name: 'mobile-power-log',
+ component: () => import('@/views/mobile/PowerLog.vue'),
+ },
+ {
+ meta: { title: '推广计划' },
+ path: '/mobile/invite',
+ name: 'mobile-invite',
+ component: () => import('@/views/mobile/Invite.vue'),
+ },
+ {
+ meta: { title: '设置' },
+ path: '/mobile/settings',
+ name: 'mobile-settings',
+ component: () => import('@/views/mobile/Settings.vue'),
+ },
+ {
+ meta: { title: 'Suno音乐创作' },
+ path: '/mobile/suno',
+ name: 'mobile-suno',
+ component: () => import('@/views/mobile/SunoCreate.vue'),
+ },
+ {
+ meta: { title: '视频生成' },
+ path: '/mobile/video',
+ name: 'mobile-video',
+ component: () => import('@/views/mobile/VideoCreate.vue'),
+ },
+ {
+ meta: { title: '即梦AI' },
+ path: '/mobile/jimeng',
+ name: 'mobile-jimeng',
+ component: () => import('@/views/mobile/JimengCreate.vue'),
+ },
],
},
@@ -345,7 +461,7 @@ const routes = [
name: 'test',
path: '/test',
meta: { title: '测试页面' },
- component: () => import('@/views/Test.vue'),
+ component: () => import('@/views/test/Test.vue'),
},
{
diff --git a/web/src/store/jimeng.js b/web/src/store/jimeng.js
index 8536990f..0a9ca489 100644
--- a/web/src/store/jimeng.js
+++ b/web/src/store/jimeng.js
@@ -12,7 +12,7 @@ import { httpDownload, httpGet, httpPost } from '@/utils/http'
import { replaceImg, substr } from '@/utils/libs'
import { ElMessageBox } from 'element-plus'
import { defineStore } from 'pinia'
-import { computed, nextTick, reactive, ref } from 'vue'
+import { computed, reactive, ref } from 'vue'
export const useJimengStore = defineStore('jimeng', () => {
// 当前激活的功能分类和具体功能
@@ -137,13 +137,13 @@ export const useJimengStore = defineStore('jimeng', () => {
})
const imageEditParams = reactive({
- image_urls: '',
+ image_input: '',
scale: 0.5,
seed: -1,
})
const imageEffectsParams = reactive({
- image_input1: '',
+ image_input: '',
template_id: '',
size: '1328x1328',
})
@@ -154,7 +154,7 @@ export const useJimengStore = defineStore('jimeng', () => {
})
const imageToVideoParams = reactive({
- image_urls: [],
+ image_input: [],
aspect_ratio: '16:9',
seed: -1,
})
@@ -374,7 +374,7 @@ export const useJimengStore = defineStore('jimeng', () => {
break
case 'image_to_image':
Object.assign(requestData, {
- image_input: imageToImageParams.image_input,
+ image_input: imageToImageParams.image_input[0],
width: parseInt(imageToImageParams.size.split('x')[0]),
height: parseInt(imageToImageParams.size.split('x')[1]),
gpen: imageToImageParams.gpen,
@@ -386,17 +386,18 @@ export const useJimengStore = defineStore('jimeng', () => {
break
case 'image_edit':
Object.assign(requestData, {
- image_urls: imageEditParams.image_urls,
+ image_input: imageEditParams.image_input[0],
scale: imageEditParams.scale,
seed: imageEditParams.seed,
})
break
case 'image_effects':
Object.assign(requestData, {
- image_input: imageEffectsParams.image_input1,
+ image_input: imageEffectsParams.image_input[0],
template_id: imageEffectsParams.template_id,
width: parseInt(imageEffectsParams.size.split('x')[0]),
height: parseInt(imageEffectsParams.size.split('x')[1]),
+ prompt: imageEffectsParams.prompt,
})
break
case 'text_to_video':
@@ -407,7 +408,7 @@ export const useJimengStore = defineStore('jimeng', () => {
break
case 'image_to_video':
Object.assign(requestData, {
- image_urls: imageToVideoParams.image_urls,
+ image_urls: imageToVideoParams.image_input,
aspect_ratio: imageToVideoParams.aspect_ratio,
seed: imageToVideoParams.seed,
})
@@ -430,7 +431,7 @@ export const useJimengStore = defineStore('jimeng', () => {
const downloadFile = async (item) => {
const url = replaceImg(item.video_url || item.img_url)
- const downloadURL = `${import.meta.env.VITE_API_HOST}/api/download?url=${url}`
+ const downloadURL = `/api/download?url=${url}`
const urlObj = new URL(url)
const fileName = urlObj.pathname.split('/').pop()
@@ -497,62 +498,6 @@ export const useJimengStore = defineStore('jimeng', () => {
showDialog.value = true
}
- // 画同款功能
- const drawSame = (item) => {
- // 联动功能开关
- if (item.type === 'text_to_image' || item.type === 'image_to_image') {
- activeCategory.value = 'image_generation'
- useImageInput.value = item.type === 'image_to_image'
- } else if (item.type === 'text_to_video' || item.type === 'image_to_video') {
- activeCategory.value = 'video_generation'
- useImageInput.value = item.type === 'image_to_video'
- } else if (item.type === 'image_edit') {
- activeCategory.value = 'image_editing'
- } else if (item.type === 'image_effects') {
- activeCategory.value = 'image_effects'
- }
- switchFunction(item.type)
- nextTick(() => {
- currentPrompt.value = item.prompt
- })
- if (item.type === 'text_to_image') {
- if (item.width && item.height) {
- textToImageParams.size = `${item.width}x${item.height}`
- }
- if (item.scale) textToImageParams.scale = item.scale
- if (item.seed) textToImageParams.seed = item.seed
- if (item.use_pre_llm !== undefined) textToImageParams.use_pre_llm = item.use_pre_llm
- } else if (item.type === 'image_to_image') {
- if (item.image_input) imageToImageParams.image_input = item.image_input
- if (item.width && item.height) {
- imageToImageParams.size = `${item.width}x${item.height}`
- }
- if (item.gpen) imageToImageParams.gpen = item.gpen
- if (item.skin) imageToImageParams.skin = item.skin
- if (item.skin_unifi) imageToImageParams.skin_unifi = item.skin_unifi
- if (item.gen_mode) imageToImageParams.gen_mode = item.gen_mode
- if (item.seed) imageToImageParams.seed = item.seed
- } else if (item.type === 'image_edit') {
- if (item.image_urls) imageEditParams.image_urls = item.image_urls
- if (item.scale) imageEditParams.scale = item.scale
- if (item.seed) imageEditParams.seed = item.seed
- } else if (item.type === 'image_effects') {
- if (item.image_input1) imageEffectsParams.image_input1 = item.image_input1
- if (item.template_id) imageEffectsParams.template_id = item.template_id
- if (item.width && item.height) {
- imageEffectsParams.size = `${item.width}x${item.height}`
- }
- } else if (item.type === 'text_to_video') {
- if (item.aspect_ratio) textToVideoParams.aspect_ratio = item.aspect_ratio
- if (item.seed) textToVideoParams.seed = item.seed
- } else if (item.type === 'image_to_video') {
- if (item.image_urls) imageToVideoParams.image_urls = item.image_urls
- if (item.aspect_ratio) imageToVideoParams.aspect_ratio = item.aspect_ratio
- if (item.seed) imageToVideoParams.seed = item.seed
- }
- showMessageOK('已填入全部参数，可直接生成同款')
- }
-
// 页面卸载时清理轮询
const cleanup = () => {
stopPolling()
@@ -615,14 +560,12 @@ export const useJimengStore = defineStore('jimeng', () => {
removeJob,
playVideo,
cleanup,
- drawSame,
// 工具函数
substr,
replaceImg,
}
})
-
export const imageSizeOptions = [
{ label: '1:1 (1328x1328)', value: '1328x1328' },
{ label: '3:2 (1584x1056)', value: '1584x1056' },
@@ -640,3 +583,68 @@ export const videoAspectRatioOptions = [
{ label: '16:9 (横版)', value: '16:9' },
{ label: '9:16 (竖版)', value: '9:16' },
]
+
+export const imageEffectsTemplateOptions = [
+ {
+ label: '毛毡3D拍立得风格',
+ value: 'felt_3d_polaroid',
+ preview: '/images/jimeng/templates/felt_3d_polaroid.png',
+ },
+ { label: '像素世界风', value: 'my_world', preview: '/images/jimeng/templates/my_world.png' },
+ {
+ label: '像素世界-万物通用版',
+ value: 'my_world_universal',
+ preview: '/images/jimeng/templates/my_world_universal.png',
+ },
+ {
+ label: '盲盒玩偶风',
+ value: 'plastic_bubble_figure',
+ preview: '/images/jimeng/templates/plastic_bubble_figure.png',
+ },
+ {
+ label: '塑料泡罩人偶-文字卡头版',
+ value: 'plastic_bubble_figure_cartoon_text',
+ preview: '/images/jimeng/templates/plastic_bubble_figure_cartoon_text.png',
+ },
+ {
+ label: '毛绒玩偶风',
+ value: 'furry_dream_doll',
+ preview: '/images/jimeng/templates/furry_dream_doll.png',
+ },
+ {
+ label: '迷你世界玩偶风',
+ value: 'micro_landscape_mini_world',
+ preview: '/images/jimeng/templates/micro_landscape_mini_world.png',
+ },
+ {
+ label: '微型景观小世界-职业版',
+ value: 'micro_landscape_mini_world_professional',
+ preview: '/images/jimeng/templates/micro_landscape_mini_world_professional.png',
+ },
+ {
+ label: '亚克力挂饰',
+ value: 'acrylic_ornaments',
+ preview: '/images/jimeng/templates/acrylic_ornaments.png',
+ },
+ {
+ label: '毛毡钥匙扣',
+ value: 'felt_keychain',
+ preview: '/images/jimeng/templates/felt_keychain.png',
+ },
+ {
+ label: 'Lofi 像素人物小卡',
+ value: 'lofi_pixel_character_mini_card',
+ preview: '/images/jimeng/templates/lofi_pixel_character_mini_card.png',
+ },
+ {
+ label: '天使形象手办',
+ value: 'angel_figurine',
+ preview: '/images/jimeng/templates/angel_figurine.png',
+ },
+ {
+ label: '躺在毛茸茸肚皮里',
+ value: 'lying_in_fluffy_belly',
+ preview: '/images/jimeng/templates/lying_in_fluffy_belly.png',
+ },
+ { label: '玻璃球', value: 'glass_ball', preview: '/images/jimeng/templates/glass_ball.png' },
+]
diff --git a/web/src/store/mobile/jimeng.js b/web/src/store/mobile/jimeng.js
new file mode 100644
index 00000000..300ce5cf
--- /dev/null
+++ b/web/src/store/mobile/jimeng.js
@@ -0,0 +1,525 @@
+import { showMessageError, showMessageOK } from '@/utils/dialog'
+import { httpDownload, httpGet, httpPost } from '@/utils/http'
+import { replaceImg } from '@/utils/libs'
+import { defineStore } from 'pinia'
+import { showConfirmDialog } from 'vant'
+import { computed, reactive, ref, watch } from 'vue'
+
+export const useJimengStore = defineStore('mobile-jimeng', () => {
+ // 响应式数据
+ const activeCategory = ref('image_generation')
+ const useImageInput = ref(false)
+ const submitting = ref(false)
+ const listLoading = ref(false)
+ const listFinished = ref(false)
+ const currentList = ref([])
+ const showMediaDialog = ref(false)
+ const currentMediaUrl = ref('')
+ const currentPrompt = ref('')
+ const page = ref(1)
+ const pageSize = ref(10)
+ const total = ref(0)
+ const currentPowerCost = ref(0)
+ const taskPulling = ref(true)
+ const tastPullHandler = ref(null)
+
+ // 新增：算力配置
+ const powerConfig = ref({
+ text_to_image: 20,
+ image_to_image: 30,
+ image_edit: 25,
+ image_effects: 15,
+ text_to_video: 100,
+ image_to_video: 120,
+ })
+
+ // 功能分类
+ const categories = ref([
+ { key: 'image_generation', name: '图像生成' },
+ { key: 'image_editing', name: '图像编辑' },
+ { key: 'image_effects', name: '图像特效' },
+ { key: 'video_generation', name: '视频生成' },
+ ])
+
+ // 选项数据
+ const imageSizeOptions = [
+ { label: '1:1 (1328x1328)', value: '1328x1328' },
+ { label: '3:2 (1584x1056)', value: '1584x1056' },
+ { label: '2:3 (1056x1584)', value: '1056x1584' },
+ { label: '4:3 (1472x1104)', value: '1472x1104' },
+ { label: '3:4 (1104x1472)', value: '1104x1472' },
+ { label: '16:9 (1664x936)', value: '1664x936' },
+ { label: '9:16 (936x1664)', value: '936x1664' },
+ { label: '21:9 (2016x864)', value: '2016x864' },
+ { label: '9:21 (864x2016)', value: '864x2016' },
+ ]
+
+ const videoAspectRatioOptions = [
+ { label: '1:1 (正方形)', value: '1:1' },
+ { label: '16:9 (横版)', value: '16:9' },
+ { label: '9:16 (竖版)', value: '9:16' },
+ ]
+
+ const imageEffectsTemplateOptions = [
+ {
+ label: '毛毡3D拍立得风格',
+ value: 'felt_3d_polaroid',
+ preview: '/images/jimeng/templates/felt_3d_polaroid.png',
+ },
+ { label: '像素世界风', value: 'my_world', preview: '/images/jimeng/templates/my_world.png' },
+ {
+ label: '像素世界-万物通用版',
+ value: 'my_world_universal',
+ preview: '/images/jimeng/templates/my_world_universal.png',
+ },
+ {
+ label: '盲盒玩偶风',
+ value: 'plastic_bubble_figure',
+ preview: '/images/jimeng/templates/plastic_bubble_figure.png',
+ },
+ {
+ label: '塑料泡罩人偶-文字卡头版',
+ value: 'plastic_bubble_figure_cartoon_text',
+ preview: '/images/jimeng/templates/plastic_bubble_figure_cartoon_text.png',
+ },
+ {
+ label: '毛绒玩偶风',
+ value: 'furry_dream_doll',
+ preview: '/images/jimeng/templates/furry_dream_doll.png',
+ },
+ {
+ label: '迷你世界玩偶风',
+ value: 'micro_landscape_mini_world',
+ preview: '/images/jimeng/templates/micro_landscape_mini_world.png',
+ },
+ {
+ label: '微型景观小世界-职业版',
+ value: 'micro_landscape_mini_world_professional',
+ preview: '/images/jimeng/templates/micro_landscape_mini_world_professional.png',
+ },
+ {
+ label: '亚克力挂饰',
+ value: 'acrylic_ornaments',
+ preview: '/images/jimeng/templates/acrylic_ornaments.png',
+ },
+ {
+ label: '毛毡钥匙扣',
+ value: 'felt_keychain',
+ preview: '/images/jimeng/templates/felt_keychain.png',
+ },
+ {
+ label: 'Lofi 像素人物小卡',
+ value: 'lofi_pixel_character_mini_card',
+ preview: '/images/jimeng/templates/lofi_pixel_character_mini_card.png',
+ },
+ {
+ label: '天使形象手办',
+ value: 'angel_figurine',
+ preview: '/images/jimeng/templates/angel_figurine.png',
+ },
+ {
+ label: '躺在毛茸茸肚皮里',
+ value: 'lying_in_fluffy_belly',
+ preview: '/images/jimeng/templates/lying_in_fluffy_belly.png',
+ },
+ { label: '玻璃球', value: 'glass_ball', preview: '/images/jimeng/templates/glass_ball.png' },
+ ]
+
+ // 功能参数
+ // 各功能的参数
+ const textToImageParams = reactive({
+ size: '1328x1328',
+ scale: 2.5,
+ seed: -1,
+ use_pre_llm: true,
+ })
+
+ const imageToImageParams = reactive({
+ image_input: '',
+ size: '1328x1328',
+ gpen: 0.4,
+ skin: 0.3,
+ skin_unifi: 0,
+ gen_mode: 'creative',
+ seed: -1,
+ })
+
+ const imageEditParams = reactive({
+ image_input: '',
+ scale: 0.5,
+ seed: -1,
+ })
+
+ const imageEffectsParams = reactive({
+ image_input: '',
+ template_id: '',
+ size: '1328x1328',
+ })
+
+ const textToVideoParams = reactive({
+ aspect_ratio: '16:9',
+ seed: -1,
+ })
+
+ const imageToVideoParams = reactive({
+ image_urls: [],
+ aspect_ratio: '16:9',
+ seed: -1,
+ })
+
+ // 计算属性
+ const activeFunction = computed(() => {
+ if (activeCategory.value === 'image_generation') {
+ return useImageInput.value ? 'image_to_image' : 'text_to_image'
+ } else if (activeCategory.value === 'image_editing') {
+ return 'image_edit'
+ } else if (activeCategory.value === 'image_effects') {
+ return 'image_effects'
+ } else if (activeCategory.value === 'video_generation') {
+ return useImageInput.value ? 'image_to_video' : 'text_to_video'
+ }
+ return 'text_to_image'
+ })
+
+ // 新增：动态计算当前算力消耗
+ const updateCurrentPowerCost = () => {
+ const functionKey = activeFunction.value
+ currentPowerCost.value = powerConfig.value[functionKey] || 10
+ }
+
+ // 监听任务类型变化，自动更新算力
+ watch(
+ [activeCategory, useImageInput],
+ () => {
+ updateCurrentPowerCost()
+ },
+ { immediate: true }
+ )
+
+ // Actions
+ const getCategoryIcon = (category) => {
+ const iconMap = {
+ image_generation: 'iconfont icon-image',
+ image_editing: 'iconfont icon-edit',
+ image_effects: 'iconfont icon-chuangzuo',
+ video_generation: 'iconfont icon-video',
+ }
+ return iconMap[category] || 'iconfont icon-image'
+ }
+
+ const switchCategory = (key) => {
+ activeCategory.value = key
+ useImageInput.value = false
+ }
+
+ // 新增：获取算力配置
+ const fetchPowerConfig = async () => {
+ try {
+ const res = await httpGet('/api/jimeng/power-config')
+ if (res.data) {
+ powerConfig.value = res.data
+ updateCurrentPowerCost() // 更新当前算力消耗
+ }
+ } catch (error) {
+ console.error('获取算力配置失败:', error)
+ }
+ }
+
+ const submitTask = () => {
+ if (!currentPrompt.value.trim()) {
+ showMessageError('请输入提示词')
+ return
+ }
+
+ submitting.value = true
+ let requestData = { task_type: activeFunction.value, prompt: currentPrompt.value }
+ // 根据功能类型添加相应参数
+ switch (activeFunction.value) {
+ case 'text_to_image':
+ Object.assign(requestData, {
+ width: parseInt(textToImageParams.size.split('x')[0]),
+ height: parseInt(textToImageParams.size.split('x')[1]),
+ scale: textToImageParams.scale,
+ seed: textToImageParams.seed,
+ use_pre_llm: textToImageParams.use_pre_llm,
+ })
+ break
+ case 'image_to_image':
+ Object.assign(requestData, {
+ image_input: imageToImageParams.image_input[0],
+ width: parseInt(imageToImageParams.size.split('x')[0]),
+ height: parseInt(imageToImageParams.size.split('x')[1]),
+ gpen: imageToImageParams.gpen,
+ skin: imageToImageParams.skin,
+ skin_unifi: imageToImageParams.skin_unifi,
+ gen_mode: imageToImageParams.gen_mode,
+ seed: imageToImageParams.seed,
+ })
+ break
+ case 'image_edit':
+ Object.assign(requestData, {
+ image_input: imageEditParams.image_input[0],
+ scale: imageEditParams.scale,
+ seed: imageEditParams.seed,
+ })
+ break
+ case 'image_effects':
+ Object.assign(requestData, {
+ image_input: imageEffectsParams.image_input[0],
+ template_id: imageEffectsParams.template_id,
+ width: parseInt(imageEffectsParams.size.split('x')[0]),
+ height: parseInt(imageEffectsParams.size.split('x')[1]),
+ prompt: imageEffectsParams.prompt,
+ })
+ break
+ case 'text_to_video':
+ Object.assign(requestData, {
+ aspect_ratio: textToVideoParams.aspect_ratio,
+ seed: textToVideoParams.seed,
+ })
+ break
+ case 'image_to_video':
+ Object.assign(requestData, {
+ image_urls: imageToVideoParams.image_input,
+ aspect_ratio: imageToVideoParams.aspect_ratio,
+ seed: imageToVideoParams.seed,
+ })
+ break
+ }
+
+ return httpPost('/api/jimeng/task', requestData)
+ .then(() => {
+ fetchData(1)
+ taskPulling.value = true
+ showMessageOK('创建任务成功')
+ currentPrompt.value = ''
+ })
+ .catch((e) => {
+ showMessageError('创建任务失败：' + e.message)
+ })
+ .finally(() => {
+ submitting.value = false
+ })
+ }
+
+ const fetchData = (_page) => {
+ if (_page) {
+ page.value = _page
+ }
+ listLoading.value = true
+
+ return httpPost('/api/jimeng/jobs', { page: page.value, page_size: pageSize.value })
+ .then((res) => {
+ total.value = res.data.total
+ let needPull = false
+ const items = []
+ if (res.data.items) {
+ for (let v of res.data.items) {
+ if (v.status === 'in_queue' || v.status === 'generating') {
+ needPull = true
+ }
+ items.push(v)
+ }
+ }
+ listLoading.value = false
+ taskPulling.value = needPull
+
+ if (page.value === 1) {
+ currentList.value = items
+ } else {
+ currentList.value.push(...items)
+ }
+
+ if (items.length < pageSize.value) {
+ listFinished.value = true
+ }
+ })
+ .catch((e) => {
+ listLoading.value = false
+ showMessageError('获取作品列表失败：' + e.message)
+ })
+ }
+
+ const loadMore = () => {
+ page.value++
+ fetchData()
+ }
+
+ const playMedia = (item) => {
+ currentMediaUrl.value = item.img_url || item.video_url
+ showMediaDialog.value = true
+ }
+
+ const downloadFile = async (item) => {
+ const url = replaceImg(item.video_url || item.img_url)
+ const downloadURL = `/api/download?url=${url}`
+ const urlObj = new URL(url)
+ const fileName = urlObj.pathname.split('/').pop()
+
+ item.downloading = true
+
+ try {
+ const response = await httpDownload(downloadURL)
+ const blob = new Blob([response.data])
+ const link = document.createElement('a')
+ link.href = URL.createObjectURL(blob)
+ link.download = fileName
+ document.body.appendChild(link)
+ link.click()
+ document.body.removeChild(link)
+ URL.revokeObjectURL(link.href)
+ item.downloading = false
+ } catch (error) {
+ showMessageError('下载失败')
+ item.downloading = false
+ }
+ }
+
+ const retryTask = (id) => {
+ return httpGet('/api/jimeng/retry', { id })
+ .then(() => {
+ showMessageOK('重试任务成功')
+ fetchData(1)
+ })
+ .catch((e) => {
+ showMessageError('重试任务失败：' + e.message)
+ })
+ }
+
+ const removeJob = async (item) => {
+ return showConfirmDialog({
+ title: '确认删除',
+ message: '此操作将会删除任务相关文件，继续操作吗?',
+ confirmButtonText: '确认删除',
+ cancelButtonText: '取消',
+ })
+ .then(() => {
+ return httpGet('/api/jimeng/remove', { id: item.id })
+ .then(() => {
+ showMessageOK('任务删除成功')
+ fetchData(1)
+ })
+ .catch((e) => {
+ showMessageError('任务删除失败：' + e.message)
+ })
+ })
+ .catch(() => {})
+ }
+
+ const getFunctionName = (type) => {
+ const nameMap = {
+ text_to_image: '文生图',
+ image_to_image: '图生图',
+ image_edit: '图像编辑',
+ image_effects: '图像特效',
+ text_to_video: '文生视频',
+ image_to_video: '图生视频',
+ }
+ return nameMap[type] || type
+ }
+
+ const getTaskType = (type) => {
+ return type.includes('video') ? 'warning' : 'primary'
+ }
+
+ const startTaskPolling = () => {
+ tastPullHandler.value = setInterval(() => {
+ if (taskPulling.value) {
+ fetchData(1)
+ }
+ }, 5000)
+ }
+
+ const stopTaskPolling = () => {
+ if (tastPullHandler.value) {
+ clearInterval(tastPullHandler.value)
+ }
+ }
+
+ const closeMediaDialog = () => {
+ showMediaDialog.value = false
+ currentMediaUrl.value = ''
+ }
+
+ // 新增：复制提示词功能
+ const copyPrompt = (prompt) => {
+ navigator.clipboard
+ .writeText(prompt)
+ .then(() => {
+ showMessageOK('提示词已复制')
+ })
+ .catch(() => {
+ showMessageError('复制失败')
+ })
+ }
+
+ // 新增：复制错误信息功能
+ const copyErrorMsg = (msg) => {
+ navigator.clipboard
+ .writeText(msg)
+ .then(() => {
+ showMessageOK('错误信息已复制')
+ })
+ .catch(() => {
+ showMessageError('复制失败')
+ })
+ }
+
+ // 新增：初始化方法
+ const init = async () => {
+ await fetchPowerConfig()
+ }
+
+ return {
+ // State
+ activeCategory,
+ useImageInput,
+ submitting,
+ listLoading,
+ listFinished,
+ currentList,
+ showMediaDialog,
+ currentMediaUrl,
+ currentPrompt,
+ page,
+ pageSize,
+ total,
+ currentPowerCost,
+ taskPulling,
+ tastPullHandler,
+ categories,
+ imageSizeOptions,
+ videoAspectRatioOptions,
+ imageEffectsTemplateOptions,
+ textToImageParams,
+ imageToImageParams,
+ imageEditParams,
+ imageEffectsParams,
+ textToVideoParams,
+ imageToVideoParams,
+ powerConfig,
+
+ // Computed
+ activeFunction,
+
+ // Actions
+ getCategoryIcon,
+ switchCategory,
+ submitTask,
+ fetchData,
+ loadMore,
+ playMedia,
+ downloadFile,
+ retryTask,
+ removeJob,
+ getFunctionName,
+ getTaskType,
+ startTaskPolling,
+ stopTaskPolling,
+ closeMediaDialog,
+ fetchPowerConfig,
+ copyPrompt,
+ copyErrorMsg,
+ init,
+ }
+})
diff --git a/web/src/store/mobile/suno.js b/web/src/store/mobile/suno.js
new file mode 100644
index 00000000..35352a95
--- /dev/null
+++ b/web/src/store/mobile/suno.js
@@ -0,0 +1,366 @@
+import { getSystemInfo } from '@/store/cache'
+import { closeLoading, showLoading, showMessageError, showMessageOK } from '@/utils/dialog'
+import { httpDownload, httpGet, httpPost } from '@/utils/http'
+import { replaceImg } from '@/utils/libs'
+import { defineStore } from 'pinia'
+import { showConfirmDialog } from 'vant'
+import { reactive, ref } from 'vue'
+
+export const useSunoStore = defineStore('suno', () => {
+ // 状态
+ const custom = ref(false)
+ const data = reactive({
+ model: 'chirp-auk',
+ tags: '',
+ lyrics: '',
+ prompt: '',
+ title: '',
+ instrumental: false,
+ ref_task_id: '',
+ extend_secs: 0,
+ ref_song_id: '',
+ type: 1,
+ })
+ const loading = ref(false)
+ const list = ref([])
+ const listLoading = ref(false)
+ const listFinished = ref(false)
+ const btnText = ref('开始创作')
+ const refSong = ref(null)
+ const showModelPicker = ref(false)
+ const showPlayer = ref(false)
+ const showDeleteModal = ref(false)
+ const currentAudio = ref('')
+ const uploadFiles = ref([])
+ const uploadRef = ref(null)
+ const isGenerating = ref(false)
+ const deleting = ref(false)
+ const models = ref([
+ { label: 'v3.0', value: 'chirp-v3-0' },
+ { label: 'v3.5', value: 'chirp-v3-5' },
+ { label: 'v4.0', value: 'chirp-v4' },
+ { label: 'v4.5', value: 'chirp-auk' },
+ ])
+ const tags = ref([
+ { label: '女声', value: 'female vocals' },
+ { label: '男声', value: 'male vocals' },
+ { label: '流行', value: 'pop' },
+ { label: '摇滚', value: 'rock' },
+ { label: '电音', value: 'electronic' },
+ { label: '钢琴', value: 'piano' },
+ { label: '吉他', value: 'guitar' },
+ { label: '嘻哈', value: 'hip hop' },
+ ])
+ const page = ref(1)
+ const pageSize = ref(10)
+ const total = ref(0)
+ const taskPulling = ref(true)
+ const tastPullHandler = ref(null)
+ const sunoPowerCost = ref(0)
+
+ onMounted(() => {
+ getSystemInfo().then((res) => {
+ sunoPowerCost.value = res.data.suno_power
+ })
+ })
+
+ // 方法
+ const onModelSelect = (selectedModel) => {
+ data.model = selectedModel.value
+ }
+ const selectTag = (tag) => {
+ if (data.tags.length + tag.value.length >= 119) {
+ showMessageError('标签长度超出限制')
+ return
+ }
+ const currentTags = data.tags.split(',').filter((t) => t.trim())
+ if (!currentTags.includes(tag.value)) {
+ currentTags.push(tag.value)
+ data.tags = currentTags.join(',')
+ }
+ }
+ const createLyric = () => {
+ if (data.lyrics === '') {
+ showMessageError('请输入歌词描述')
+ return
+ }
+ isGenerating.value = true
+ httpPost('/api/prompt/lyric', { prompt: data.lyrics })
+ .then((res) => {
+ const lines = res.data.split('\n')
+ data.title = lines.shift().replace(/\*/g, '')
+ lines.shift()
+ data.lyrics = lines.join('\n')
+ showMessageOK('歌词生成成功')
+ })
+ .catch((e) => {
+ showMessageError('歌词生成失败：' + e.message)
+ })
+ .finally(() => {
+ isGenerating.value = false
+ })
+ }
+ const handleFileChange = (file) => {
+ uploadFiles.value = [file]
+ if (file.status === 'ready') {
+ uploadAudio(file)
+ }
+ }
+ const beforeUpload = (file) => {
+ const isLt10M = file.size / 1024 / 1024 < 10
+ if (!isLt10M) {
+ showMessageError('文件大小不能超过 10MB!')
+ return false
+ }
+ return true
+ }
+ const uploadAudio = (file) => {
+ const formData = new FormData()
+ formData.append('file', file.raw, file.name)
+ showLoading('正在上传文件...')
+ httpPost('/api/upload', formData)
+ .then((res) => {
+ httpPost('/api/suno/create', {
+ audio_url: res.data.url,
+ title: res.data.name,
+ type: 4,
+ })
+ .then(() => {
+ fetchData(1)
+ showMessageOK('歌曲上传成功')
+ removeRefSong()
+ uploadFiles.value = []
+ if (uploadRef.value) {
+ uploadRef.value.clearFiles()
+ }
+ })
+ .catch((e) => {
+ showMessageError('歌曲上传失败：' + e.message)
+ })
+ .finally(() => {
+ closeLoading()
+ })
+ })
+ .catch((e) => {
+ showMessageError('文件上传失败:' + e.message)
+ })
+ .finally(() => {
+ closeLoading()
+ })
+ }
+ const create = () => {
+ data.type = custom.value ? 2 : 1
+ data.ref_task_id = refSong.value ? refSong.value.task_id : ''
+ data.ref_song_id = refSong.value ? refSong.value.song_id : ''
+ data.extend_secs = refSong.value ? refSong.value.extend_secs : 0
+ if (refSong.value) {
+ if (data.extend_secs > refSong.value.duration) {
+ showMessageError('续写开始时间不能超过原歌曲长度')
+ return
+ }
+ } else if (custom.value) {
+ if (data.lyrics === '') {
+ showMessageError('请输入歌词')
+ return
+ }
+ if (data.title === '') {
+ showMessageError('请输入歌曲标题')
+ return
+ }
+ } else {
+ if (data.prompt === '') {
+ showMessageError('请输入歌曲描述')
+ return
+ }
+ }
+ loading.value = true
+ httpPost('/api/suno/create', data)
+ .then(() => {
+ fetchData(1)
+ taskPulling.value = true
+ showMessageOK('创建任务成功')
+ })
+ .catch((e) => {
+ showMessageError('创建任务失败：' + e.message)
+ })
+ .finally(() => {
+ loading.value = false
+ })
+ }
+ const fetchData = (_page) => {
+ if (_page) {
+ page.value = _page
+ }
+ listLoading.value = true
+ httpGet('/api/suno/list', { page: page.value, page_size: pageSize.value })
+ .then((res) => {
+ total.value = res.data.total
+ let needPull = false
+ const items = []
+ for (let v of res.data.items) {
+ if (v.progress === 100) {
+ v.major_model_version = v['raw_data']['major_model_version']
+ }
+ if (v.progress === 0 || v.progress === 102) {
+ needPull = true
+ }
+ items.push(v)
+ }
+ listLoading.value = false
+ taskPulling.value = needPull
+ if (page.value === 1) {
+ list.value = items
+ } else {
+ list.value.push(...items)
+ }
+ if (items.length < pageSize.value) {
+ listFinished.value = true
+ }
+ })
+ .catch((e) => {
+ listLoading.value = false
+ showMessageError('获取作品列表失败：' + e.message)
+ })
+ }
+ const loadMore = () => {
+ if (!listFinished.value && !listLoading.value) {
+ page.value++
+ fetchData()
+ }
+ }
+ const refreshFirstPage = () => {
+ const currentPage = page.value
+ const currentList = [...list.value]
+ httpGet('/api/suno/list', { page: 1, page_size: pageSize.value })
+ .then((res) => {
+ let needPull = false
+ const firstPageItems = []
+ for (let v of res.data.items) {
+ if (v.progress === 100) {
+ v.major_model_version = v['raw_data']['major_model_version']
+ }
+ if (v.progress === 0 || v.progress === 102) {
+ needPull = true
+ }
+ firstPageItems.push(v)
+ }
+ taskPulling.value = needPull
+ if (currentPage === 1) {
+ list.value = firstPageItems
+ } else {
+ const otherPagesData = currentList.slice(pageSize.value)
+ list.value = [...firstPageItems, ...otherPagesData]
+ }
+ })
+ .catch((e) => {
+ console.error('刷新第一页数据失败：', e)
+ })
+ }
+ const play = (item) => {
+ currentAudio.value = item.audio_url
+ showPlayer.value = true
+ }
+ const download = (item) => {
+ const url = replaceImg(item.audio_url)
+ const downloadURL = `/api/download?url=${url}`
+ const urlObj = new URL(url)
+ const fileName = urlObj.pathname.split('/').pop()
+ item.downloading = true
+ httpDownload(downloadURL)
+ .then((response) => {
+ const blob = new Blob([response.data])
+ const link = document.createElement('a')
+ link.href = URL.createObjectURL(blob)
+ link.download = fileName
+ document.body.appendChild(link)
+ link.click()
+ document.body.removeChild(link)
+ URL.revokeObjectURL(link.href)
+ item.downloading = false
+ })
+ .catch(() => {
+ showMessageError('下载失败')
+ item.downloading = false
+ })
+ .finally(() => {
+ item.downloading = false
+ })
+ }
+
+ const removeJob = (item) => {
+ showConfirmDialog({
+ title: '确认删除',
+ message: '此操作将会删除任务相关文件，继续操作吗？',
+ confirmButtonText: '确认删除',
+ cancelButtonText: '取消',
+ }).then(() => {
+ httpGet('/api/suno/remove', { id: item.id })
+ .then(() => {
+ showMessageOK('任务删除成功')
+ fetchData(1)
+ })
+ .catch(() => {
+ showMessageError('任务删除失败')
+ })
+ })
+ }
+
+ const extend = (item) => {
+ refSong.value = item
+ refSong.value.extend_secs = item.duration
+ data.title = item.title
+ custom.value = true
+ btnText.value = '续写歌曲'
+ window.scrollTo({ top: 0, behavior: 'smooth' })
+ }
+ const removeRefSong = () => {
+ refSong.value = null
+ btnText.value = '开始创作'
+ }
+
+ // 副作用（定时轮询、滚动监听）建议在页面层处理，store 只暴露方法
+
+ return {
+ // 状态
+ custom,
+ data,
+ loading,
+ list,
+ listLoading,
+ listFinished,
+ btnText,
+ refSong,
+ showModelPicker,
+ showPlayer,
+ showDeleteModal,
+ currentAudio,
+ uploadFiles,
+ uploadRef,
+ isGenerating,
+ deleting,
+ models,
+ tags,
+ page,
+ pageSize,
+ total,
+ taskPulling,
+ tastPullHandler,
+ sunoPowerCost,
+ // 方法
+ onModelSelect,
+ selectTag,
+ createLyric,
+ handleFileChange,
+ beforeUpload,
+ uploadAudio,
+ create,
+ fetchData,
+ loadMore,
+ refreshFirstPage,
+ play,
+ download,
+ removeJob,
+ extend,
+ removeRefSong,
+ }
+})
diff --git a/web/src/store/mobile/video.js b/web/src/store/mobile/video.js
new file mode 100644
index 00000000..4e3e13c9
--- /dev/null
+++ b/web/src/store/mobile/video.js
@@ -0,0 +1,397 @@
+import { defineStore } from 'pinia'
+import { ref, reactive, watch } from 'vue'
+import { httpGet, httpPost } from '@/utils/http'
+import { showMessageOK, showMessageError, showLoading, closeLoading } from '@/utils/dialog'
+import { getSystemInfo } from '@/store/cache'
+
+export const useVideoStore = defineStore('video', () => {
+ // 状态
+ const activeVideoType = ref('luma')
+ const loading = ref(false)
+ const generating = ref(false)
+ const isGenerating = ref(false)
+ const listLoading = ref(false)
+ const listFinished = ref(false)
+ const currentList = ref([])
+ const showVideoDialog = ref(false)
+ const currentVideoUrl = ref('')
+
+ // Luma 参数
+ const lumaParams = reactive({
+ prompt: '',
+ image: '',
+ image_tail: '',
+ loop: false,
+ expand_prompt: false,
+ })
+ const lumaUseImageMode = ref(false)
+ const lumaStartImage = ref([])
+ const lumaEndImage = ref([])
+
+ // KeLing 参数
+ const kelingParams = reactive({
+ aspect_ratio: '16:9',
+ model: 'kling-v1-6',
+ duration: '5',
+ mode: 'std',
+ cfg_scale: 0.5,
+ prompt: '',
+ negative_prompt: '',
+ image: '',
+ image_tail: '',
+ camera_control: {
+ type: '',
+ config: {
+ horizontal: 0,
+ vertical: 0,
+ pan: 0,
+ tilt: 0,
+ roll: 0,
+ zoom: 0,
+ },
+ },
+ })
+ const kelingUseImageMode = ref(false)
+ const kelingStartImage = ref([])
+ const kelingEndImage = ref([])
+
+ // 选项数据
+ const aspectRatioOptions = ['16:9', '9:16', '1:1', '4:3']
+ const modelOptions = [
+ { label: '可灵 1.6', value: 'kling-v1-6' },
+ { label: '可灵 1.5', value: 'kling-v1-5' },
+ { label: '可灵 1.0', value: 'kling-v1' },
+ ]
+ const durationOptions = ['5', '10']
+ const modeOptions = ['std', 'pro']
+ const cameraControlOptions = [
+ '',
+ 'simple',
+ 'down_back',
+ 'forward_up',
+ 'right_turn_forward',
+ 'left_turn_forward',
+ ]
+ const getCameraControlLabel = (option) => {
+ const labelMap = {
+ '': '请选择',
+ simple: '简单运镜',
+ down_back: '下移拉远',
+ forward_up: '推进上移',
+ right_turn_forward: '右旋推进',
+ left_turn_forward: '左旋推进',
+ }
+ return labelMap[option] || option
+ }
+
+ // 页面数据
+ const page = ref(1)
+ const pageSize = ref(10)
+ const total = ref(0)
+ const lumaPowerCost = ref(0)
+ const kelingPowerCost = ref(0)
+ const taskPulling = ref(true)
+ const keLingPowers = ref({})
+
+ // 监听器：当可灵参数变化时更新算力
+ watch(
+ () => [kelingParams.model, kelingParams.mode, kelingParams.duration],
+ () => {
+ updateModelPower()
+ },
+ { deep: true }
+ )
+
+ // 方法
+ const updateModelPower = () => {
+ // 根据模型、模式、时长计算算力消耗
+ const key = `${kelingParams.model}_${kelingParams.mode}_${kelingParams.duration}`
+ kelingPowerCost.value = keLingPowers.value[key] || 10
+ }
+ watch(
+ () => [kelingParams.model, kelingParams.mode, kelingParams.duration],
+ () => {
+ updateModelPower()
+ },
+ { deep: true }
+ )
+
+ // 监听器：当可灵参数变化时更新算力
+ watch(
+ () => [kelingParams.model, kelingParams.mode, kelingParams.duration],
+ () => {
+ updateModelPower()
+ },
+ { deep: true }
+ )
+
+ const switchVideoType = (type) => {
+ activeVideoType.value = type
+ }
+ const handleLumaStartImageUpload = (e) => {
+ if (e.target.files[0]) {
+ uploadLumaStartImage({ file: e.target.files[0], name: e.target.files[0].name })
+ }
+ }
+ const handleLumaEndImageUpload = (e) => {
+ if (e.target.files[0]) {
+ uploadLumaEndImage({ file: e.target.files[0], name: e.target.files[0].name })
+ }
+ }
+ const handleKelingStartImageUpload = (e) => {
+ if (e.target.files[0]) {
+ uploadKelingStartImage({ file: e.target.files[0], name: e.target.files[0].name })
+ }
+ }
+ const handleKelingEndImageUpload = (e) => {
+ if (e.target.files[0]) {
+ uploadKelingEndImage({ file: e.target.files[0], name: e.target.files[0].name })
+ }
+ }
+
+ const generatePrompt = async () => {
+ if (isGenerating.value) return
+
+ const prompt = activeVideoType.value === 'luma' ? lumaParams.prompt : kelingParams.prompt
+ if (!prompt) {
+ return showMessageError('请输入原始提示词')
+ }
+
+ isGenerating.value = true
+ try {
+ const res = await httpPost('/api/prompt/video', { prompt })
+ if (activeVideoType.value === 'luma') {
+ lumaParams.prompt = res.data
+ } else {
+ kelingParams.prompt = res.data
+ }
+ } catch (error) {
+ showMessageError('生成提示词失败：' + error.message)
+ } finally {
+ isGenerating.value = false
+ }
+ }
+ const toggleLumaImageMode = () => {
+ if (!lumaUseImageMode.value) {
+ lumaParams.image = ''
+ lumaParams.image_tail = ''
+ lumaStartImage.value = []
+ lumaEndImage.value = []
+ }
+ }
+ const toggleKelingImageMode = () => {
+ if (!kelingUseImageMode.value) {
+ kelingParams.image = ''
+ kelingParams.image_tail = ''
+ kelingStartImage.value = []
+ kelingEndImage.value = []
+ }
+ }
+ const uploadLumaStartImage = (file) => {
+ uploadImage(file, (url) => {
+ lumaParams.image = url
+ })
+ }
+ const uploadLumaEndImage = (file) => {
+ uploadImage(file, (url) => {
+ lumaParams.image_tail = url
+ })
+ }
+ const uploadKelingStartImage = (file) => {
+ uploadImage(file, (url) => {
+ kelingParams.image = url
+ })
+ }
+ const uploadKelingEndImage = (file) => {
+ uploadImage(file, (url) => {
+ kelingParams.image_tail = url
+ })
+ }
+ const uploadImage = (file, callback) => {
+ const formData = new FormData()
+ formData.append('file', file.file, file.name)
+ showLoading('正在上传图片...')
+ httpPost('/api/upload', formData)
+ .then((res) => {
+ callback(res.data.url)
+ showMessageOK('图片上传成功')
+ })
+ .catch((e) => {
+ showMessageError('图片上传失败:' + e.message)
+ })
+ .finally(() => {
+ closeLoading()
+ })
+ }
+ const createLumaVideo = () => {
+ if (!lumaParams.prompt.trim()) {
+ showMessageError('请输入视频提示词')
+ return
+ }
+ generating.value = true
+ const params = {
+ ...lumaParams,
+ task_type: 'luma',
+ }
+ httpPost('/api/video/create', params)
+ .then(() => {
+ fetchData(1)
+ taskPulling.value = true
+ showMessageOK('创建任务成功')
+ })
+ .catch((e) => {
+ showMessageError('创建任务失败：' + e.message)
+ })
+ .finally(() => {
+ generating.value = false
+ })
+ }
+ const createKelingVideo = () => {
+ if (!kelingParams.prompt.trim()) {
+ showMessageError('请输入视频提示词')
+ return
+ }
+ generating.value = true
+ const params = {
+ ...kelingParams,
+ task_type: 'keling',
+ }
+ httpPost('/api/video/create', params)
+ .then(() => {
+ fetchData(1)
+ taskPulling.value = true
+ showMessageOK('创建任务成功')
+ })
+ .catch((e) => {
+ showMessageError('创建任务失败：' + e.message)
+ })
+ .finally(() => {
+ generating.value = false
+ })
+ }
+ const fetchData = (_page) => {
+ if (_page) {
+ page.value = _page
+ }
+ listLoading.value = true
+ httpGet('/api/video/list', { page: page.value, page_size: pageSize.value })
+ .then((res) => {
+ total.value = res.data.total
+ let needPull = false
+ const items = []
+ for (let v of res.data.items) {
+ if (v.progress === 0 || v.progress === 102) {
+ needPull = true
+ }
+ items.push(v)
+ }
+ listLoading.value = false
+ taskPulling.value = needPull
+ if (page.value === 1) {
+ currentList.value = items
+ } else {
+ currentList.value.push(...items)
+ }
+ if (items.length < pageSize.value) {
+ listFinished.value = true
+ }
+ })
+ .catch((e) => {
+ listLoading.value = false
+ showMessageError('获取作品列表失败：' + e.message)
+ })
+ }
+ const fetchUserPower = async () => {
+ try {
+ // 获取系统信息，更新算力配置
+ const sysInfo = await getSystemInfo()
+ lumaPowerCost.value = sysInfo.data.luma_power || 10
+ keLingPowers.value = sysInfo.data.keling_powers || {}
+ updateModelPower()
+ } catch (error) {
+ console.error('获取用户算力失败:', error)
+ // 设置默认值
+ lumaPowerCost.value = 10
+ kelingPowerCost.value = 15
+ }
+ }
+ const loadMore = () => {
+ page.value++
+ fetchData()
+ }
+ const playVideo = (item) => {
+ currentVideoUrl.value = item.video_url
+ showVideoDialog.value = true
+ }
+ const downloadVideo = (item) => {
+ item.downloading = true
+ const link = document.createElement('a')
+ link.href = item.video_url
+ link.download = item.title || 'video.mp4'
+ document.body.appendChild(link)
+ link.click()
+ document.body.removeChild(link)
+ item.downloading = false
+ showMessageOK('开始下载')
+ }
+ const removeJob = (item) => {
+ // 建议在页面层处理弹窗，store 只负责数据和业务
+ }
+
+ return {
+ // 状态
+ activeVideoType,
+ loading,
+ generating,
+ isGenerating,
+ listLoading,
+ listFinished,
+ currentList,
+ showVideoDialog,
+ currentVideoUrl,
+ lumaParams,
+ lumaUseImageMode,
+ lumaStartImage,
+ lumaEndImage,
+ kelingParams,
+ kelingUseImageMode,
+ kelingStartImage,
+ kelingEndImage,
+ aspectRatioOptions,
+ modelOptions,
+ durationOptions,
+ modeOptions,
+ cameraControlOptions,
+ getCameraControlLabel,
+ page,
+ pageSize,
+ total,
+ lumaPowerCost,
+ kelingPowerCost,
+ taskPulling,
+ keLingPowers,
+ // 方法
+ updateModelPower,
+ switchVideoType,
+ handleLumaStartImageUpload,
+ handleLumaEndImageUpload,
+ handleKelingStartImageUpload,
+ handleKelingEndImageUpload,
+ generatePrompt,
+ toggleLumaImageMode,
+ toggleKelingImageMode,
+ uploadLumaStartImage,
+ uploadLumaEndImage,
+ uploadKelingStartImage,
+ uploadKelingEndImage,
+ uploadImage,
+ createLumaVideo,
+ createKelingVideo,
+ fetchData,
+ fetchUserPower,
+ loadMore,
+ playVideo,
+ downloadVideo,
+ removeJob,
+ }
+})
diff --git a/web/src/store/sharedata.js b/web/src/store/sharedata.js
index f2662c3b..c795cca1 100644
--- a/web/src/store/sharedata.js
+++ b/web/src/store/sharedata.js
@@ -109,6 +109,14 @@ export const useSharedStore = defineStore('shared', {
setTheme(theme) {
this.theme = theme
document.documentElement.setAttribute('data-theme', theme) // 设置 HTML 的 data-theme 属性
+
+ // 同时设置 dark 类，以便 Tailwind 的 dark: 前缀能够工作
+ if (theme === 'dark') {
+ document.documentElement.classList.add('dark')
+ } else {
+ document.documentElement.classList.remove('dark')
+ }
+
Storage.set('theme', theme)
},
setIsLogin(value) {
diff --git a/web/src/store/suno.js b/web/src/store/suno.js
new file mode 100644
index 00000000..a9ddd99f
--- /dev/null
+++ b/web/src/store/suno.js
@@ -0,0 +1,440 @@
+import { closeLoading, showLoading, showMessageError, showMessageOK } from '@/utils/dialog'
+import { httpDownload, httpGet, httpPost } from '@/utils/http'
+import { replaceImg } from '@/utils/libs'
+import Compressor from 'compressorjs'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { compact } from 'lodash'
+import { defineStore } from 'pinia'
+import { computed, onMounted, ref } from 'vue'
+import { checkSession, getSystemInfo } from './cache'
+import { useSharedStore } from './sharedata'
+
+export const useSunoStore = defineStore('suno', () => {
+ // 响应式数据
+ const custom = ref(false)
+ const models = ref([
+ { label: 'v3.0', value: 'chirp-v3-0' },
+ { label: 'v3.5', value: 'chirp-v3-5' },
+ { label: 'v4.0', value: 'chirp-v4' },
+ { label: 'v4.5', value: 'chirp-auk' },
+ ])
+
+ const tags = ref([
+ { label: '女声', value: 'female vocals' },
+ { label: '男声', value: 'male vocals' },
+ { label: '流行', value: 'pop' },
+ { label: '摇滚', value: 'rock' },
+ { label: '硬摇滚', value: 'hard rock' },
+ { label: '电音', value: 'electronic' },
+ { label: '金属', value: 'metal' },
+ { label: '重金属', value: 'heavy metal' },
+ { label: '节拍', value: 'beat' },
+ { label: '弱拍', value: 'upbeat' },
+ { label: '合成器', value: 'synth' },
+ { label: '吉他', value: 'guitar' },
+ { label: '钢琴', value: 'piano' },
+ { label: '小提琴', value: 'violin' },
+ { label: '贝斯', value: 'bass' },
+ { label: '嘻哈', value: 'hip hop' },
+ ])
+
+ const data = ref({
+ model: 'chirp-auk',
+ tags: '',
+ lyrics: '',
+ prompt: '',
+ title: '',
+ instrumental: false,
+ ref_task_id: '',
+ extend_secs: 0,
+ ref_song_id: '',
+ })
+
+ const loading = ref(false)
+ const noData = ref(true)
+ const playList = ref([])
+ const showPlayer = ref(false)
+ const list = ref([])
+ const taskPulling = ref(true)
+ const btnText = ref('开始创作')
+ const refSong = ref(null)
+ const showDialog = ref(false)
+ const editData = ref({ title: '', cover: '', id: 0 })
+ const promptPlaceholder = ref('请在这里输入你自己写的歌词...')
+ const isGenerating = ref(false)
+ const sunoPower = ref(0)
+ const isLogin = ref(false)
+ const shareStore = useSharedStore()
+
+ // 分页相关
+ const page = ref(1)
+ const pageSize = ref(10)
+ const total = ref(0)
+
+ // 定时器引用
+ let tastPullHandler = null
+
+ // 计算属性
+ const hasRefSong = computed(() => refSong.value !== null)
+
+ onMounted(() => {
+ getSystemInfo().then((res) => {
+ sunoPower.value = res.data.suno_power
+ })
+ checkSession().then((res) => {
+ isLogin.value = true
+ })
+ })
+
+ // 方法
+ const fetchData = async (_page) => {
+ if (_page) {
+ page.value = _page
+ }
+ loading.value = true
+
+ try {
+ const res = await httpGet('/api/suno/list', {
+ page: page.value,
+ page_size: pageSize.value,
+ })
+
+ total.value = res.data.total
+ let needPull = false
+ const items = []
+
+ for (let v of res.data.items) {
+ if (v.progress === 100) {
+ v.major_model_version = v['raw_data']['major_model_version']
+ }
+ if (v.progress === 0 || v.progress === 102) {
+ needPull = true
+ }
+ items.push(v)
+ }
+
+ loading.value = false
+ taskPulling.value = needPull
+
+ // 如果任务有变化，则刷新任务列表
+ if (JSON.stringify(list.value) !== JSON.stringify(items)) {
+ list.value = items
+ }
+ noData.value = list.value.length === 0
+ } catch (e) {
+ loading.value = false
+ noData.value = true
+ showMessageError('获取作品列表失败：' + e.message)
+ }
+ }
+
+ const create = async () => {
+ if (!isLogin.value) {
+ return shareStore.setShowLoginDialog(true)
+ }
+
+ data.value.type = custom.value ? 2 : 1
+ data.value.ref_task_id = refSong.value ? refSong.value.task_id : ''
+ data.value.ref_song_id = refSong.value ? refSong.value.song_id : ''
+ data.value.extend_secs = refSong.value ? refSong.value.extend_secs : 0
+
+ // 验证输入
+ if (refSong.value) {
+ if (data.value.extend_secs > refSong.value.duration) {
+ return showMessageError('续写开始时间不能超过原歌曲长度')
+ }
+ } else if (custom.value) {
+ if (data.value.lyrics === '') {
+ return showMessageError('请输入歌词')
+ }
+ if (data.value.title === '') {
+ return showMessageError('请输入歌曲标题')
+ }
+ } else {
+ if (data.value.prompt === '') {
+ return showMessageError('请输入歌曲描述')
+ }
+ }
+
+ try {
+ await httpPost('/api/suno/create', data.value)
+ await fetchData(1)
+ taskPulling.value = true
+ showMessageOK('创建任务成功')
+ } catch (e) {
+ showMessageError('创建任务失败：' + e.message)
+ }
+ }
+
+ const merge = async (item) => {
+ try {
+ await httpPost('/api/suno/create', { song_id: item.song_id, type: 3 })
+ await fetchData(1)
+ taskPulling.value = true
+ showMessageOK('创建任务成功')
+ } catch (e) {
+ showMessageError('合并歌曲失败：' + e.message)
+ }
+ }
+
+ const download = async (item) => {
+ const url = replaceImg(item.audio_url)
+ const downloadURL = `/api/download?url=${url}`
+ const urlObj = new URL(url)
+ const fileName = urlObj.pathname.split('/').pop()
+
+ item.downloading = true
+
+ try {
+ const response = await httpDownload(downloadURL)
+ const blob = new Blob([response.data])
+ const link = document.createElement('a')
+ link.href = URL.createObjectURL(blob)
+ link.download = fileName
+ document.body.appendChild(link)
+ link.click()
+ document.body.removeChild(link)
+ URL.revokeObjectURL(link.href)
+ item.downloading = false
+ } catch (error) {
+ showMessageError('下载失败')
+ item.downloading = false
+ }
+ }
+
+ const uploadAudio = async (file) => {
+ // 判断是否登录
+ if (!isLogin.value) {
+ return shareStore.setShowLoginDialog(true)
+ }
+
+ const formData = new FormData()
+ formData.append('file', file.file, file.name)
+ showLoading('正在上传文件...')
+
+ try {
+ const res = await httpPost('/api/upload', formData)
+ await httpPost('/api/suno/create', {
+ audio_url: res.data.url,
+ title: res.data.name,
+ type: 4,
+ })
+ await fetchData(1)
+ showMessageOK('歌曲上传成功')
+ closeLoading()
+ removeRefSong()
+ ElMessage.success({ message: '上传成功', duration: 500 })
+ } catch (e) {
+ showMessageError('歌曲上传失败：' + e.message)
+ closeLoading()
+ }
+ }
+
+ const extend = (item) => {
+ refSong.value = item
+ refSong.value.extend_secs = item.duration
+ data.value.title = item.title
+ custom.value = true
+ btnText.value = '续写歌曲'
+ promptPlaceholder.value = '输入额外的歌词，根据您之前的歌词来扩展歌曲...'
+ }
+
+ const update = (item) => {
+ showDialog.value = true
+ editData.value.title = item.title
+ editData.value.cover = item.cover_url
+ editData.value.id = item.id
+ }
+
+ const updateSong = async () => {
+ if (editData.value.title === '' || editData.value.cover === '') {
+ return showMessageError('歌曲标题和封面不能为空')
+ }
+
+ try {
+ await httpPost('/api/suno/update', editData.value)
+ showMessageOK('更新歌曲成功')
+ showDialog.value = false
+ await fetchData()
+ } catch (e) {
+ showMessageError('更新歌曲失败：' + e.message)
+ }
+ }
+
+ const removeRefSong = () => {
+ refSong.value = null
+ btnText.value = '开始创作'
+ promptPlaceholder.value = '请在这里输入你自己写的歌词...'
+ }
+
+ const selectTag = (tag) => {
+ const currentTags = data.value.tags.trim()
+ const newTagLength = tag.value.length
+
+ if (currentTags.length + newTagLength >= 119) {
+ return
+ }
+
+ const tagArray = currentTags
+ ? currentTags
+ .split(',')
+ .map((t) => t.trim())
+ .filter((t) => t)
+ : []
+ const newTags = compact([...tagArray, tag.value])
+ data.value.tags = newTags.join(',')
+ }
+
+ const removeJob = async (item) => {
+ try {
+ await ElMessageBox.confirm('此操作将会删除任务相关文件，继续操作码?', '删除提示', {
+ confirmButtonText: '确认',
+ cancelButtonText: '取消',
+ type: 'warning',
+ })
+
+ await httpGet('/api/suno/remove', { id: item.id })
+ ElMessage.success('任务删除成功')
+ await fetchData()
+ } catch (e) {
+ if (e !== 'cancel') {
+ ElMessage.error('任务删除失败：' + e.message)
+ }
+ }
+ }
+
+ const publishJob = async (item) => {
+ try {
+ await httpGet('/api/suno/publish', { id: item.id, publish: item.publish })
+ ElMessage.success('操作成功')
+ } catch (e) {
+ ElMessage.error('操作失败：' + e.message)
+ }
+ }
+
+ const getShareURL = (item) => {
+ return `${location.protocol}//${location.host}/song/${item.song_id}`
+ }
+
+ const uploadCover = (file) => {
+ new Compressor(file.file, {
+ quality: 0.6,
+ success(result) {
+ const formData = new FormData()
+ formData.append('file', result, result.name)
+ showLoading('图片上传中...')
+
+ httpPost('/api/upload', formData)
+ .then((res) => {
+ editData.value.cover = res.data.url
+ ElMessage.success({ message: '上传成功', duration: 500 })
+ closeLoading()
+ })
+ .catch((e) => {
+ ElMessage.error('图片上传失败:' + e.message)
+ closeLoading()
+ })
+ },
+ error(err) {
+ console.log(err.message)
+ },
+ })
+ }
+
+ const createLyric = async () => {
+ if (data.value.lyrics === '') {
+ return showMessageError('请输入歌词描述')
+ }
+
+ isGenerating.value = true
+
+ try {
+ const res = await httpPost('/api/prompt/lyric', { prompt: data.value.lyrics })
+ const lines = res.data.split('\n')
+ data.value.title = lines.shift().replace(/\*/g, '')
+ lines.shift()
+ data.value.lyrics = lines.join('\n')
+ isGenerating.value = false
+ } catch (e) {
+ showMessageError('歌词生成失败：' + e.message)
+ isGenerating.value = false
+ }
+ }
+
+ const startTaskPolling = () => {
+ tastPullHandler = setInterval(() => {
+ if (taskPulling.value) {
+ fetchData(1)
+ }
+ }, 5000)
+ }
+
+ const stopTaskPolling = () => {
+ if (tastPullHandler) {
+ clearInterval(tastPullHandler)
+ tastPullHandler = null
+ }
+ }
+
+ const resetData = () => {
+ data.value = {
+ model: 'chirp-auk',
+ tags: '',
+ lyrics: '',
+ prompt: '',
+ title: '',
+ instrumental: false,
+ ref_task_id: '',
+ extend_secs: 0,
+ ref_song_id: '',
+ }
+ custom.value = false
+ refSong.value = null
+ btnText.value = '开始创作'
+ promptPlaceholder.value = '请在这里输入你自己写的歌词...'
+ }
+
+ return {
+ // 状态
+ custom,
+ models,
+ tags,
+ data,
+ loading,
+ noData,
+ playList,
+ showPlayer,
+ list,
+ taskPulling,
+ btnText,
+ refSong,
+ showDialog,
+ editData,
+ promptPlaceholder,
+ isGenerating,
+ page,
+ pageSize,
+ total,
+ hasRefSong,
+ sunoPower,
+ // 方法
+ fetchData,
+ create,
+ merge,
+ download,
+ uploadAudio,
+ extend,
+ update,
+ updateSong,
+ removeRefSong,
+ selectTag,
+ removeJob,
+ publishJob,
+ getShareURL,
+ uploadCover,
+ createLyric,
+ startTaskPolling,
+ stopTaskPolling,
+ resetData,
+ }
+})
diff --git a/web/src/store/theme.js b/web/src/store/theme.js
index 1c4964f9..fd40a2b9 100644
--- a/web/src/store/theme.js
+++ b/web/src/store/theme.js
@@ -1,15 +1,23 @@
// src/store/index.js
-import { defineStore } from "pinia";
+import { defineStore } from 'pinia'
-export const useThemeStore = defineStore("theme", {
+export const useThemeStore = defineStore('theme', {
state: () => ({
- theme: localStorage.getItem("theme") || "light" // 默认从 localStorage 获取主题
+ theme: localStorage.getItem('theme') || 'light', // 默认从 localStorage 获取主题
}),
actions: {
setTheme(theme) {
- this.theme = theme;
- document.documentElement.setAttribute("data-theme", theme);
- localStorage.setItem("theme", theme); // 保存到 localStorage
- }
- }
-});
+ this.theme = theme
+ document.documentElement.setAttribute('data-theme', theme)
+
+ // 同时设置 dark 类，以便 Tailwind 的 dark: 前缀能够工作
+ if (theme === 'dark') {
+ document.documentElement.classList.add('dark')
+ } else {
+ document.documentElement.classList.remove('dark')
+ }
+
+ localStorage.setItem('theme', theme) // 保存到 localStorage
+ },
+ },
+})
diff --git a/web/src/store/video.js b/web/src/store/video.js
index 87382323..c025892e 100644
--- a/web/src/store/video.js
+++ b/web/src/store/video.js
@@ -441,8 +441,6 @@ export const useVideoStore = defineStore('video', () => {
}
isGenerating.value = true
- showLoading('正在生成视频脚本...')
-
try {
const res = await httpPost('/api/prompt/video', { prompt })
if (activeVideoType.value === 'luma') {
@@ -450,10 +448,8 @@ export const useVideoStore = defineStore('video', () => {
} else {
kelingParams.prompt = res.data
}
- closeLoading()
} catch (error) {
showMessageError('生成提示词失败：' + error.message)
- closeLoading()
} finally {
isGenerating.value = false
}
@@ -468,7 +464,7 @@ export const useVideoStore = defineStore('video', () => {
// 视频下载
const downloadVideo = async (item) => {
const url = replaceImg(item.video_url)
- const downloadURL = `${import.meta.env.VITE_API_HOST}/api/download?url=${url}`
+ const downloadURL = `/api/download?url=${url}`
const urlObj = new URL(url)
const fileName = urlObj.pathname.split('/').pop()
diff --git a/web/src/utils/dialog.js b/web/src/utils/dialog.js
index b738ded9..a4bf3d95 100644
--- a/web/src/utils/dialog.js
+++ b/web/src/utils/dialog.js
@@ -1,51 +1,62 @@
/**
* Util lib functions
*/
-import {closeToast, showConfirmDialog, showFailToast, showLoadingToast, showSuccessToast, showToast} from "vant";
-import {isMobile} from "@/utils/libs";
-import {ElMessage} from "element-plus";
+import { isMobile } from '@/utils/libs'
+import { ElMessage } from 'element-plus'
+import {
+ closeToast,
+ showConfirmDialog,
+ showFailToast,
+ showLoadingToast,
+ showSuccessToast,
+ showToast,
+} from 'vant'
export function showLoginDialog(router) {
showConfirmDialog({
- title: "登录",
- message: "此操作需要登录才能进行，前往登录？",
+ title: '登录',
+ message: '此操作需要登录才能进行，前往登录？',
})
- .then(() => {
- router.push("/login");
- })
- .catch(() => {
- // on cancel
- });
+ .then(() => {
+ router.push('/login')
+ })
+ .catch(() => {
+ // on cancel
+ })
}
export function showMessageOK(message) {
if (isMobile()) {
- showSuccessToast(message);
+ showSuccessToast(message)
} else {
- ElMessage.success(message);
+ ElMessage.success(message)
}
}
+export function showMessageSuccess(message) {
+ showMessageOK(message)
+}
+
export function showMessageInfo(message) {
if (isMobile()) {
- showToast(message);
+ showToast(message)
} else {
- ElMessage.info(message);
+ ElMessage.info(message)
}
}
export function showMessageError(message) {
if (isMobile()) {
- showFailToast({message: message, duration: 0});
+ showFailToast({ message: message })
} else {
- ElMessage.error(message);
+ ElMessage.error(message)
}
}
-export function showLoading(message = "正在处理...") {
- showLoadingToast({message: message, forbidClick: true, duration: 0});
+export function showLoading(message = '正在处理...') {
+ showLoadingToast({ message: message, forbidClick: true, duration: 0 })
}
export function closeLoading() {
- closeToast();
+ closeToast()
}
diff --git a/web/src/utils/http.js b/web/src/utils/http.js
index 01620446..c1ddf351 100644
--- a/web/src/utils/http.js
+++ b/web/src/utils/http.js
@@ -5,8 +5,32 @@
// * @Author yangjian102621@163.com
// * +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-import axios from 'axios'
import { getAdminToken, getUserToken, removeAdminToken, removeUserToken } from '@/store/session'
+import axios from 'axios'
+
+// Blob 数据读取和解析的辅助函数
+export async function parseBlobResponse(blob) {
+ try {
+ // 检查 Blob 的类型
+ if (blob.type && blob.type.includes('application/json')) {
+ // 如果是 JSON 类型，直接解析
+ const text = await blob.text()
+ return JSON.parse(text)
+ } else {
+ // 如果不是 JSON 类型，尝试解析为文本
+ const text = await blob.text()
+ try {
+ return JSON.parse(text)
+ } catch (e) {
+ // 如果解析 JSON 失败，返回文本内容
+ return { message: text, rawData: text }
+ }
+ }
+ } catch (error) {
+ console.error('解析 Blob 响应失败:', error)
+ return { message: '解析响应数据失败', error: error.message }
+ }
+}
axios.defaults.timeout = 180000
// axios.defaults.baseURL = process.env.VUE_APP_API_HOST
@@ -29,7 +53,7 @@ axios.interceptors.response.use(
(response) => {
return response
},
- (error) => {
+ async (error) => {
if (error.response.status === 401) {
if (error.response.request.responseURL.indexOf('/api/admin') !== -1) {
removeAdminToken()
@@ -39,8 +63,14 @@ axios.interceptors.response.use(
error.response.data.message = '请先登录'
return Promise.reject(error.response.data)
}
+
if (error.response.status === 400) {
- return Promise.reject(new Error(error.response.data.message))
+ let errorMessage = error.response.data.message
+ if (!errorMessage) {
+ const parsedData = await parseBlobResponse(error.response.data)
+ errorMessage = parsedData.message
+ }
+ return Promise.reject(new Error(errorMessage))
} else {
return Promise.reject(error)
}
diff --git a/web/src/utils/libs.js b/web/src/utils/libs.js
index 1c151507..88be8fe1 100644
--- a/web/src/utils/libs.js
+++ b/web/src/utils/libs.js
@@ -236,7 +236,7 @@ export function showLoginDialog(router) {
message: '此操作需要登录才能进行，前往登录？',
})
.then(() => {
- router.push('/mobile/login')
+ router.push('/login')
})
.catch(() => {
// on cancel
diff --git a/web/src/views/404.vue b/web/src/views/404.vue
index 6b9d2043..1602cb3a 100644
--- a/web/src/views/404.vue
+++ b/web/src/views/404.vue
@@ -8,19 +8,19 @@
-
diff --git a/web/src/views/ChatApps.vue b/web/src/views/ChatApps.vue
index 573bed5e..0497ec45 100644
--- a/web/src/views/ChatApps.vue
+++ b/web/src/views/ChatApps.vue
@@ -167,7 +167,7 @@ const useRole = (role) => {
}
-
diff --git a/web/src/views/ChatExport.vue b/web/src/views/ChatExport.vue
index e373888e..2fbe53bd 100644
--- a/web/src/views/ChatExport.vue
+++ b/web/src/views/ChatExport.vue
@@ -1,119 +1,144 @@
-
-
当前已绑手机号：{{ mobile }}
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
+
-
\ No newline at end of file
+
diff --git a/web/src/components/Calling.vue b/web/src/components/Calling.vue
index e7b6c724..3197a584 100644
--- a/web/src/components/Calling.vue
+++ b/web/src/components/Calling.vue
@@ -1,6 +1,6 @@
- 当前已绑手机号：{{ mobile }}
+
@@ -12,40 +12,38 @@
-
\ No newline at end of file
+
diff --git a/web/src/components/Captcha.vue b/web/src/components/Captcha.vue
index 0d769a23..aeb59438 100644
--- a/web/src/components/Captcha.vue
+++ b/web/src/components/Captcha.vue
@@ -1,13 +1,19 @@
-
+
-
+
-
diff --git a/web/src/components/ChatReply.vue b/web/src/components/ChatReply.vue
index ea116b87..3d028630 100644
--- a/web/src/components/ChatReply.vue
+++ b/web/src/components/ChatReply.vue
@@ -131,6 +131,7 @@ const props = defineProps({
data: {
type: Object,
default: {
+ type: 'text',
icon: '',
content: {
text: '',
@@ -167,7 +168,7 @@ const md = new MarkdownIt({
const codeIndex = parseInt(Date.now()) + Math.floor(Math.random() * 10000000)
// 显示复制代码按钮和展开/收起按钮
const copyBtn = `
-
-
-
-
-
-
diff --git a/web/src/components/ui/BlackSwitch.vue b/web/src/components/ui/BlackSwitch.vue
deleted file mode 100644
index b956676d..00000000
--- a/web/src/components/ui/BlackSwitch.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-
-
人机验证
-
+
复制
`
+ if (lang && hl.getLanguage(lang)) {
+ const langHtml = `${lang}`
+ // 处理代码高亮
+ const preCode = hl.highlight(str, { language: lang }).value
+ // 将代码包裹在 pre 中
+ return `${preCode}${copyBtn} ${langHtml}${preCode}${copyBtn}
+
+
+
+
+
+
+
+
+
diff --git a/web/src/components/mobile/CustomSelectOption.vue b/web/src/components/mobile/CustomSelectOption.vue
new file mode 100644
index 00000000..198b811e
--- /dev/null
+++ b/web/src/components/mobile/CustomSelectOption.vue
@@ -0,0 +1,76 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/web/src/components/mobile/EmptyState.vue b/web/src/components/mobile/EmptyState.vue
new file mode 100644
index 00000000..f4930c37
--- /dev/null
+++ b/web/src/components/mobile/EmptyState.vue
@@ -0,0 +1,74 @@
+
+
+ {{ option.label }}
+
+ {{ option.desc }}
+
+
+
+
+
+
+
+
+ {{ actionText }}
+
+
+
+
+
+
+
+
+
+
diff --git a/web/src/components/mobile/MobileFileList.vue b/web/src/components/mobile/MobileFileList.vue
new file mode 100644
index 00000000..0e8befff
--- /dev/null
+++ b/web/src/components/mobile/MobileFileList.vue
@@ -0,0 +1,68 @@
+
+
+
+
+
+
+
+
diff --git a/web/src/components/ui/Alert.vue b/web/src/components/ui/Alert.vue
new file mode 100644
index 00000000..cb187cc7
--- /dev/null
+++ b/web/src/components/ui/Alert.vue
@@ -0,0 +1,47 @@
+
+
+
+
+ ![img]()
+
+
+ ![]()
+
+
+
+ {{ f.name }}
+
+
+ {{ extUpper(f.ext) }} · {{ FormatFileSize(f.size || 0) }}
+
+
+
+
+
+
+
+
diff --git a/web/src/components/ui/BlackDialog.vue b/web/src/components/ui/BlackDialog.vue
deleted file mode 100644
index 79323156..00000000
--- a/web/src/components/ui/BlackDialog.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-
-
+
+
+
+
+
+ {{ message }}
+
+
-
-
-
-
-
-
-
-
diff --git a/web/src/components/ui/BlackInput.vue b/web/src/components/ui/BlackInput.vue
deleted file mode 100644
index 0edc856b..00000000
--- a/web/src/components/ui/BlackInput.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/web/src/components/ui/BlackSelect.vue b/web/src/components/ui/BlackSelect.vue
deleted file mode 100644
index 1d68b9d9..00000000
--- a/web/src/components/ui/BlackSelect.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-
-
- {{ value.length }}/{{ maxlength }}
-
-
+
+
+
+
+
+
diff --git a/web/src/components/ui/CustomTabPane.vue b/web/src/components/ui/CustomTabPane.vue
new file mode 100644
index 00000000..bc184a9b
--- /dev/null
+++ b/web/src/components/ui/CustomTabPane.vue
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/web/src/components/ui/CustomTabs.vue b/web/src/components/ui/CustomTabs.vue
new file mode 100644
index 00000000..08f68c25
--- /dev/null
+++ b/web/src/components/ui/CustomTabs.vue
@@ -0,0 +1,376 @@
+
+
+
+
+
+
+
+
+
diff --git a/web/src/components/ui/Generating.vue b/web/src/components/ui/Generating.vue
index 1067da2d..dc4df460 100644
--- a/web/src/components/ui/Generating.vue
+++ b/web/src/components/ui/Generating.vue
@@ -13,7 +13,7 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- {{message}}
+ {{ message }}
-
-
-
-
+
+
-
-
-
-
-
- {{ chatTitle }}
-
-
-
+
+
+
+
diff --git a/web/src/views/ChatPlus.vue b/web/src/views/ChatPlus.vue
index 06213c4d..41bdfe5d 100644
--- a/web/src/views/ChatPlus.vue
+++ b/web/src/views/ChatPlus.vue
@@ -110,7 +110,7 @@
+
+
+
+
+
+ {{ chatTitle }}
+
+
+
-
+
@@ -329,18 +329,17 @@
-
-
+
-
+
@@ -361,32 +360,8 @@
-
-
-
-
-
-
-
-
-
-