xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2026-02-15 19:04:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

替换 vite 架构

Browse Source
This commit is contained in:
GeekMaster
2025-05-26 14:14:29 +08:00
parent 94a5187e75
commit b1ddcef593
20 changed files with 937 additions and 782 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
web/.env.development
View File

@@ -1,14 +1,14 @@
VUE_APP_API_HOST=http://localhost:5678
VUE_APP_WS_HOST=ws://localhost:5678
VUE_APP_USER=18888888888
VUE_APP_PASS=12345678
VUE_APP_ADMIN_USER=admin
VUE_APP_ADMIN_PASS=admin123
VUE_APP_KEY_PREFIX=GeekAI_DEV_
VUE_APP_TITLE="Geek-AI 创作系统"
VUE_APP_VERSION=v4.2.3
VUE_APP_DOCS_URL=https://docs.geekai.me
VUE_APP_GITHUB_URL=https://github.com/yangjian102621/geekai
VUE_APP_GITEE_URL=https://gitee.com/blackfox/geekai
VUE_APP_GITCODE_URL=https://gitcode.com/yangjian102621/geekai
VITE_API_HOST=http://localhost:5678
VITE_WS_HOST=ws://localhost:5678
VITE_USER=18888888888
VITE_PASS=12345678
VITE_ADMIN_USER=admin
VITE_ADMIN_PASS=admin123
VITE_KEY_PREFIX=GeekAI_DEV_
VITE_TITLE="Geek-AI 创作系统"
VITE_VERSION=v4.2.4
VITE_DOCS_URL=https://docs.geekai.me
VITE_GITHUB_URL=https://github.com/yangjian102621/geekai
VITE_GITEE_URL=https://gitee.com/blackfox/geekai
VITE_GITCODE_URL=https://gitcode.com/yangjian102621/geekai

16
web/.env.production
View File

@@ -1,8 +1,8 @@
VUE_APP_API_HOST=
VUE_APP_WS_HOST=
VUE_APP_KEY_PREFIX=GeekAI_
VUE_APP_VERSION=v4.2.3
VUE_APP_DOCS_URL=https://docs.geekai.me
VUE_APP_GITHUB_URL=https://github.com/yangjian102621/geekai
VUE_APP_GITEE_URL=https://gitee.com/blackfox/geekai
VUE_APP_GITCODE_URL=https://gitcode.com/yangjian102621/geekai
VITE_API_HOST=
VITE_WS_HOST=
VITE_KEY_PREFIX=GeekAI_
VITE_VERSION=v4.2.4
VITE_DOCS_URL=https://docs.geekai.me
VITE_GITHUB_URL=https://github.com/yangjian102621/geekai
VITE_GITEE_URL=https://gitee.com/blackfox/geekai
VITE_GITCODE_URL=https://gitcode.com/yangjian102621/geekai

5
web/package.json
View File

@@ -50,14 +50,11 @@
"@babel/eslint-parser": "^7.12.16",
"@vitejs/plugin-vue": "^5.2.4",
"autoprefixer": "^10.4.20",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"postcss": "^8.4.49",
"stylus": "^0.58.1",
"stylus-loader": "^7.0.0",
"tailwindcss": "^3.4.17",
"vite": "^6.3.5",
"webpack": "^5.90.3"
"vite": "^5.4.10"
},
"eslintConfig": {
"root": true,

117
web/src/App.vue
View File

@@ -5,93 +5,93 @@
</template>
<script setup>
import { ElConfigProvider } from "element-plus";
import { onMounted, ref, watch } from "vue";
import { checkSession, getClientId, getSystemInfo } from "@/store/cache";
import { isChrome, isMobile } from "@/utils/libs";
import { showMessageInfo } from "@/utils/dialog";
import { useSharedStore } from "@/store/sharedata";
import { getUserToken } from "@/store/session";
import { checkSession, getClientId, getSystemInfo } from '@/store/cache'
import { getUserToken } from '@/store/session'
import { useSharedStore } from '@/store/sharedata'
import { showMessageInfo } from '@/utils/dialog'
import { isChrome, isMobile } from '@/utils/libs'
import { ElConfigProvider } from 'element-plus'
import { onMounted, ref, watch } from 'vue'
const debounce = (fn, delay) => {
let timer;
let timer
return (...args) => {
if (timer) {
clearTimeout(timer);
clearTimeout(timer)
}
timer = setTimeout(() => {
fn(...args);
}, delay);
};
};
fn(...args)
}, delay)
}
}
const _ResizeObserver = window.ResizeObserver;
const _ResizeObserver = window.ResizeObserver
window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
constructor(callback) {
callback = debounce(callback, 200);
super(callback);
callback = debounce(callback, 200)
super(callback)
}
};
}
const store = useSharedStore();
const store = useSharedStore()
onMounted(() => {
// 获取系统参数
getSystemInfo().then((res) => {
const link = document.createElement("link");
link.rel = "shortcut icon";
link.href = res.data.logo;
document.head.appendChild(link);
});
const link = document.createElement('link')
link.rel = 'shortcut icon'
link.href = res.data.logo
document.head.appendChild(link)
})
if (!isChrome() && !isMobile()) {
showMessageInfo("建议使用 Chrome 浏览器以获得最佳体验。");
showMessageInfo('建议使用 Chrome 浏览器以获得最佳体验。')
}
checkSession()
.then(() => {
store.setIsLogin(true);
store.setIsLogin(true)
})
.catch(() => {});
.catch(() => {})
// 设置主题
document.documentElement.setAttribute("data-theme", store.theme);
});
document.documentElement.setAttribute('data-theme', store.theme)
})
watch(
() => store.isLogin,
(val) => {
if (val) {
connect();
connect()
}
}
);
)
const handler = ref(0);
const handler = ref(0)
// 初始化 websocket 连接
const connect = () => {
let host = process.env.VUE_APP_WS_HOST;
if (host === "") {
if (location.protocol === "https:") {
host = "wss://" + location.host;
let host = import.meta.env.VITE_WS_HOST
if (host === '') {
if (location.protocol === 'https:') {
host = 'wss://' + location.host
} else {
host = "ws://" + location.host;
host = 'ws://' + location.host
}
}
const clientId = getClientId();
const _socket = new WebSocket(host + `/api/ws?client_id=${clientId}`, ["token", getUserToken()]);
_socket.addEventListener("open", () => {
console.log("WebSocket 已连接");
const clientId = getClientId()
const _socket = new WebSocket(host + `/api/ws?client_id=${clientId}`, ['token', getUserToken()])
_socket.addEventListener('open', () => {
console.log('WebSocket 已连接')
handler.value = setInterval(() => {
if (_socket.readyState === WebSocket.OPEN) {
_socket.send(JSON.stringify({ type: "ping" }));
_socket.send(JSON.stringify({ type: 'ping' }))
}
}, 5000);
});
_socket.addEventListener("close", () => {
clearInterval(handler.value);
connect();
});
store.setSocket(_socket);
};
}, 5000)
})
_socket.addEventListener('close', () => {
clearInterval(handler.value)
connect()
})
store.setSocket(_socket)
}
// 打印 banner
const banner = `
@@ -104,20 +104,23 @@ const banner = `
'88. .88' 888 .o 888 .o 888 88b. .8' 888. 888
Y8bood8P' Y8bod8P' Y8bod8P' o888o o888o o88o o8888o o888o
`;
console.log("%c" + banner + "", "color: purple;font-size: 18px;");
`
console.log('%c' + banner + '', 'color: purple;font-size: 18px;')
console.log("%c感谢大家为 GeekAI 做出的卓越贡献！", "color: green;font-size: 40px;font-family: '微软雅黑';");
console.log(
"%c项目源码：https://github.com/yangjian102621/geekai %c 您的 star 对我们非常重要！",
'%c感谢大家为 GeekAI 做出的卓越贡献！',
"color: green;font-size: 40px;font-family: '微软雅黑';"
)
console.log(
'%c项目源码：https://github.com/yangjian102621/geekai %c 您的 star 对我们非常重要！',
"color: green;font-size: 20px;font-family: '微软雅黑';",
"color: red;font-size: 20px;font-family: '微软雅黑';"
);
console.log("%c 愿你出走半生，归来仍是少年！大奉武夫许七安，前来凿阵！", "color: #7c39ed;font-size: 18px;font-family: '微软雅黑';");
)
</script>
<style lang="stylus">
@import '@/assets/iconfont/iconfont.css'
html, body {
margin: 0;
padding: 0;
@@ -173,6 +176,4 @@ html, body {
background #D6FBCC
color #07C160
}
@import '@/assets/iconfont/iconfont.css'
</style>

44
web/src/components/FooterBar.vue
View File

@@ -17,45 +17,45 @@
</div>
</template>
<script setup>
import { ref } from "vue";
import { showMessageError } from "@/utils/dialog";
import { getLicenseInfo, getSystemInfo } from "@/store/cache";
import { getLicenseInfo, getSystemInfo } from '@/store/cache'
import { showMessageError } from '@/utils/dialog'
import { ref } from 'vue'
const title = ref("");
const version = ref(process.env.VUE_APP_VERSION);
const gitURL = ref(process.env.VUE_APP_GITHUB_URL);
const copyRight = ref("");
const icp = ref("");
const license = ref({});
const title = ref('')
const version = ref(import.meta.env.VITE_VERSION)
const gitURL = ref(import.meta.env.VITE_GITHUB_URL)
const copyRight = ref('')
const icp = ref('')
const license = ref({})
const props = defineProps({
textColor: {
type: String,
default: "#ffffff"
}
});
default: '#ffffff',
},
})
// 获取系统配置
getSystemInfo()
.then((res) => {
title.value = res.data.title ?? process.env.VUE_APP_TITLE;
title.value = res.data.title ?? import.meta.env.VITE_TITLE
copyRight.value =
(res.data.copyright ? res.data.copyright : "极客学长") +
" © 2023 - " +
(res.data.copyright ? res.data.copyright : '极客学长') +
' © 2023 - ' +
new Date().getFullYear() +
" All rights reserved";
icp.value = res.data.icp;
' All rights reserved'
icp.value = res.data.icp
})
.catch((e) => {
showMessageError("获取系统配置失败：" + e.message);
});
showMessageError('获取系统配置失败：' + e.message)
})
getLicenseInfo()
.then((res) => {
license.value = res.data;
license.value = res.data
})
.catch((e) => {
showMessageError("获取 License 失败：" + e.message);
});
showMessageError('获取 License 失败：' + e.message)
})
</script>
<style scoped lang="stylus">

311
web/src/components/LoginDialog.vue
View File

@@ -13,7 +13,14 @@
</div>
<div class="block">
<el-input placeholder="请输入密码(8-16位)" maxlength="16" size="large" v-model="data.password" show-password autocomplete="off">
<el-input
placeholder="请输入密码(8-16位)"
maxlength="16"
size="large"
v-model="data.password"
show-password
autocomplete="off"
>
<template #prefix>
<el-icon>
<Lock />
@@ -24,7 +31,9 @@
<el-row class="btn-row" :gutter="20">
<el-col :span="24">
<el-button class="login-btn" type="primary" size="large" @click="submitLogin">登 录</el-button>
<el-button class="login-btn" type="primary" size="large" @click="submitLogin"
>登 录</el-button
>
</el-col>
</el-row>
@@ -33,7 +42,9 @@
还没有账号？
<el-button size="small" @click="login = false">注册</el-button>
<el-button type="info" class="forget" size="small" @click="showResetPass = true">忘记密码？</el-button>
<el-button type="info" class="forget" size="small" @click="showResetPass = true"
>忘记密码？</el-button
>
</div>
<div v-if="wechatLoginURL !== ''">
<el-divider>
@@ -42,7 +53,11 @@
<div class="c-login flex justify-center">
<div class="p-2 w-full">
<a :href="wechatLoginURL">
<el-button type="success" class="w-full" size="large" @click="setRoute(router.currentRoute.value.path)"
<el-button
type="success"
class="w-full"
size="large"
@click="setRoute(router.currentRoute.value.path)"
><i class="iconfont icon-wechat mr-2"></i> 微信登录
</el-button>
</a>
@@ -58,7 +73,13 @@
<el-tabs v-model="activeName" class="demo-tabs">
<el-tab-pane label="手机注册" name="mobile" v-if="enableMobile">
<div class="block">
<el-input placeholder="手机号码" size="large" v-model="data.mobile" maxlength="11" autocomplete="off">
<el-input
placeholder="手机号码"
size="large"
v-model="data.mobile"
maxlength="11"
autocomplete="off"
>
<template #prefix>
<el-icon>
<Iphone />
@@ -69,7 +90,13 @@
<div class="block">
<el-row :gutter="10">
<el-col :span="12">
<el-input placeholder="验证码" size="large" maxlength="30" v-model="data.code" autocomplete="off">
<el-input
placeholder="验证码"
size="large"
maxlength="30"
v-model="data.code"
autocomplete="off"
>
<template #prefix>
<el-icon>
<Checked />
@@ -96,7 +123,13 @@
<div class="block">
<el-row :gutter="10">
<el-col :span="12">
<el-input placeholder="验证码" size="large" maxlength="30" v-model="data.code" autocomplete="off">
<el-input
placeholder="验证码"
size="large"
maxlength="30"
v-model="data.code"
autocomplete="off"
>
<template #prefix>
<el-icon>
<Checked />
@@ -112,7 +145,12 @@
</el-tab-pane>
<el-tab-pane label="用户名注册" name="username" v-if="enableUser">
<div class="block">
<el-input placeholder="用户名" size="large" v-model="data.username" autocomplete="off">
<el-input
placeholder="用户名"
size="large"
v-model="data.username"
autocomplete="off"
>
<template #prefix>
<el-icon>
<Iphone />
@@ -124,7 +162,14 @@
</el-tabs>
<div class="block">
<el-input placeholder="请输入密码(8-16位)" maxlength="16" size="large" v-model="data.password" show-password autocomplete="off">
<el-input
placeholder="请输入密码(8-16位)"
maxlength="16"
size="large"
v-model="data.password"
show-password
autocomplete="off"
>
<template #prefix>
<el-icon>
<Lock />
@@ -134,7 +179,14 @@
</div>
<div class="block">
<el-input placeholder="重复密码(8-16位)" size="large" maxlength="16" v-model="data.repass" show-password autocomplete="off">
<el-input
placeholder="重复密码(8-16位)"
size="large"
maxlength="16"
v-model="data.repass"
show-password
autocomplete="off"
>
<template #prefix>
<el-icon>
<Lock />
@@ -144,7 +196,12 @@
</div>
<div class="block">
<el-input placeholder="邀请码(可选)" size="large" v-model="data.invite_code" autocomplete="off">
<el-input
placeholder="邀请码(可选)"
size="large"
v-model="data.invite_code"
autocomplete="off"
>
<template #prefix>
<el-icon>
<Message />
@@ -154,7 +211,9 @@
</div>
<div class="w-full">
<el-button class="login-btn w-full" type="primary" size="large" @click="submitRegister">注 册</el-button>
<el-button class="login-btn w-full" type="primary" size="large" @click="submitRegister"
>注 册</el-button
>
</div>
<div class="text text-sm flex justify-center items-center w-full pt-3">
@@ -188,193 +247,193 @@
</template>
<script setup>
import { onMounted, ref, watch } from "vue";
import { httpGet, httpPost } from "@/utils/http";
import { ElMessage } from "element-plus";
import { setUserToken } from "@/store/session";
import { validateEmail, validateMobile } from "@/utils/validate";
import { Checked, Close, Iphone, Lock, Message } from "@element-plus/icons-vue";
import SendMsg from "@/components/SendMsg.vue";
import { arrayContains } from "@/utils/libs";
import { getSystemInfo } from "@/store/cache";
import Captcha from "@/components/Captcha.vue";
import ResetPass from "@/components/ResetPass.vue";
import { setRoute } from "@/store/system";
import { useRouter } from "vue-router";
import { useSharedStore } from "@/store/sharedata";
import Captcha from '@/components/Captcha.vue'
import ResetPass from '@/components/ResetPass.vue'
import SendMsg from '@/components/SendMsg.vue'
import { getSystemInfo } from '@/store/cache'
import { setUserToken } from '@/store/session'
import { useSharedStore } from '@/store/sharedata'
import { setRoute } from '@/store/system'
import { httpGet, httpPost } from '@/utils/http'
import { arrayContains } from '@/utils/libs'
import { validateEmail, validateMobile } from '@/utils/validate'
import { Checked, Iphone, Lock, Message } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { onMounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
// eslint-disable-next-line no-undef
const props = defineProps({
show: Boolean,
});
const showDialog = ref(false);
})
const showDialog = ref(false)
watch(
() => props.show,
(newValue) => {
showDialog.value = newValue;
showDialog.value = newValue
}
);
)
const login = ref(true);
const login = ref(true)
const data = ref({
username: process.env.VUE_APP_USER,
password: process.env.VUE_APP_PASS,
mobile: "",
email: "",
repass: "",
code: "",
invite_code: "",
});
const enableMobile = ref(false);
const enableEmail = ref(false);
const enableUser = ref(false);
const enableRegister = ref(true);
const wechatLoginURL = ref("");
const activeName = ref("");
const wxImg = ref("/images/wx.png");
const captchaRef = ref(null);
username: import.meta.env.VITE_USER,
password: import.meta.env.VITE_PASS,
mobile: '',
email: '',
repass: '',
code: '',
invite_code: '',
})
const enableMobile = ref(false)
const enableEmail = ref(false)
const enableUser = ref(false)
const enableRegister = ref(true)
const wechatLoginURL = ref('')
const activeName = ref('')
const wxImg = ref('/images/wx.png')
const captchaRef = ref(null)
// eslint-disable-next-line no-undef
const emits = defineEmits(["hide", "success"]);
const action = ref("login");
const enableVerify = ref(false);
const showResetPass = ref(false);
const router = useRouter();
const store = useSharedStore();
const emits = defineEmits(['hide', 'success'])
const action = ref('login')
const enableVerify = ref(false)
const showResetPass = ref(false)
const router = useRouter()
const store = useSharedStore()
onMounted(() => {
const returnURL = `${location.protocol}//${location.host}/login/callback?action=login`;
httpGet("/api/user/clogin?return_url=" + returnURL)
const returnURL = `${location.protocol}//${location.host}/login/callback?action=login`
httpGet('/api/user/clogin?return_url=' + returnURL)
.then((res) => {
wechatLoginURL.value = res.data.url;
wechatLoginURL.value = res.data.url
})
.catch((e) => {
console.log(e.message);
});
console.log(e.message)
})
getSystemInfo()
.then((res) => {
if (res.data) {
const registerWays = res.data["register_ways"];
if (arrayContains(registerWays, "username")) {
enableUser.value = true;
activeName.value = "username";
const registerWays = res.data['register_ways']
if (arrayContains(registerWays, 'username')) {
enableUser.value = true
activeName.value = 'username'
}
if (arrayContains(registerWays, "email")) {
enableEmail.value = true;
activeName.value = "email";
if (arrayContains(registerWays, 'email')) {
enableEmail.value = true
activeName.value = 'email'
}
if (arrayContains(registerWays, "mobile")) {
enableMobile.value = true;
activeName.value = "mobile";
if (arrayContains(registerWays, 'mobile')) {
enableMobile.value = true
activeName.value = 'mobile'
}
// 是否启用注册
enableRegister.value = res.data["enabled_register"];
enableRegister.value = res.data['enabled_register']
// 使用后台上传的客服微信二维码
if (res.data["wechat_card_url"] !== "") {
wxImg.value = res.data["wechat_card_url"];
if (res.data['wechat_card_url'] !== '') {
wxImg.value = res.data['wechat_card_url']
}
enableVerify.value = res.data["enabled_verify"];
enableVerify.value = res.data['enabled_verify']
}
})
.catch((e) => {
ElMessage.error("获取系统配置失败：" + e.message);
});
});
ElMessage.error('获取系统配置失败：' + e.message)
})
})
const submit = (verifyData) => {
if (action.value === "login") {
doLogin(verifyData);
} else if (action.value === "register") {
doRegister(verifyData);
if (action.value === 'login') {
doLogin(verifyData)
} else if (action.value === 'register') {
doRegister(verifyData)
}
};
}
// 登录操作
const submitLogin = () => {
if (!data.value.username) {
return ElMessage.error("请输入用户名");
return ElMessage.error('请输入用户名')
}
if (!data.value.password) {
return ElMessage.error("请输入密码");
return ElMessage.error('请输入密码')
}
if (enableVerify.value) {
captchaRef.value.loadCaptcha();
action.value = "login";
captchaRef.value.loadCaptcha()
action.value = 'login'
} else {
doLogin({});
doLogin({})
}
};
}
const doLogin = (verifyData) => {
data.value.key = verifyData.key;
data.value.dots = verifyData.dots;
data.value.x = verifyData.x;
httpPost("/api/user/login", data.value)
data.value.key = verifyData.key
data.value.dots = verifyData.dots
data.value.x = verifyData.x
httpPost('/api/user/login', data.value)
.then((res) => {
setUserToken(res.data.token);
store.setIsLogin(true);
ElMessage.success("登录成功！");
emits("hide");
emits("success");
setUserToken(res.data.token)
store.setIsLogin(true)
ElMessage.success('登录成功！')
emits('hide')
emits('success')
})
.catch((e) => {
ElMessage.error("登录失败，" + e.message);
});
};
ElMessage.error('登录失败，' + e.message)
})
}
// 注册操作
const submitRegister = () => {
if (activeName.value === "username" && data.value.username === "") {
return ElMessage.error("请输入用户名");
if (activeName.value === 'username' && data.value.username === '') {
return ElMessage.error('请输入用户名')
}
if (activeName.value === "mobile" && !validateMobile(data.value.mobile)) {
return ElMessage.error("请输入合法的手机号");
if (activeName.value === 'mobile' && !validateMobile(data.value.mobile)) {
return ElMessage.error('请输入合法的手机号')
}
if (activeName.value === "email" && !validateEmail(data.value.email)) {
return ElMessage.error("请输入合法的邮箱地址");
if (activeName.value === 'email' && !validateEmail(data.value.email)) {
return ElMessage.error('请输入合法的邮箱地址')
}
if (data.value.password.length < 8) {
return ElMessage.error("密码的长度为8-16个字符");
return ElMessage.error('密码的长度为8-16个字符')
}
if (data.value.repass !== data.value.password) {
return ElMessage.error("两次输入密码不一致");
return ElMessage.error('两次输入密码不一致')
}
if ((activeName.value === "mobile" || activeName.value === "email") && data.value.code === "") {
return ElMessage.error("请输入验证码");
if ((activeName.value === 'mobile' || activeName.value === 'email') && data.value.code === '') {
return ElMessage.error('请输入验证码')
}
if (enableVerify.value && activeName.value === "username") {
captchaRef.value.loadCaptcha();
action.value = "register";
if (enableVerify.value && activeName.value === 'username') {
captchaRef.value.loadCaptcha()
action.value = 'register'
} else {
doRegister({});
doRegister({})
}
};
}
const doRegister = (verifyData) => {
data.value.key = verifyData.key;
data.value.dots = verifyData.dots;
data.value.x = verifyData.x;
data.value.reg_way = activeName.value;
httpPost("/api/user/register", data.value)
data.value.key = verifyData.key
data.value.dots = verifyData.dots
data.value.x = verifyData.x
data.value.reg_way = activeName.value
httpPost('/api/user/register', data.value)
.then((res) => {
setUserToken(res.data.token);
setUserToken(res.data.token)
ElMessage.success({
message: "注册成功!",
message: '注册成功!',
onClose: () => {
emits("hide");
emits("success");
emits('hide')
emits('success')
},
duration: 1000,
});
})
})
.catch((e) => {
ElMessage.error("注册失败，" + e.message);
});
};
ElMessage.error('注册失败，' + e.message)
})
}
</script>
<style lang="stylus">

280
web/src/components/RealtimeConversation.vue
View File

@@ -38,11 +38,7 @@
<div class="call-controls">
<el-tooltip content="长按发送语音" placement="top">
<ripple-button>
<button
class="call-button answer"
@mousedown="startRecording"
@mouseup="stopRecording"
>
<button class="call-button answer" @mousedown="startRecording" @mouseup="stopRecording">
<i class="iconfont icon-mic-bold"></i>
</button>
</ripple-button>
@@ -58,159 +54,155 @@
</template>
<script setup>
import RippleButton from "@/components/ui/RippleButton.vue";
import { ref, onMounted, onUnmounted } from "vue";
import { RealtimeClient } from "@openai/realtime-api-beta";
import { WavRecorder, WavStreamPlayer } from "@/lib/wavtools/index.js";
import { instructions } from "@/utils/conversation_config.js";
import { WavRenderer } from "@/utils/wav_renderer";
import { showMessageError } from "@/utils/dialog";
import { getUserToken } from "@/store/session";
import RippleButton from '@/components/ui/RippleButton.vue'
import { WavRecorder, WavStreamPlayer } from '@/lib/wavtools/index.js'
import { getUserToken } from '@/store/session'
import { instructions } from '@/utils/conversation_config.js'
import { showMessageError } from '@/utils/dialog'
import { WavRenderer } from '@/utils/wav_renderer'
import { RealtimeClient } from '@openai/realtime-api-beta'
import { onMounted, onUnmounted, ref } from 'vue'
// eslint-disable-next-line no-unused-vars,no-undef
const props = defineProps({
height: {
type: String,
default: "100vh"
}
});
default: '100vh',
},
})
// eslint-disable-next-line no-undef
const emits = defineEmits(["close"]);
const emits = defineEmits(['close'])
/********************** connection animation code *************************/
const fullText = "正在接通中...";
const connectingText = ref("");
let index = 0;
const fullText = '正在接通中...'
const connectingText = ref('')
let index = 0
const typeText = () => {
if (index < fullText.length) {
connectingText.value += fullText[index];
index++;
setTimeout(typeText, 200); // 每300毫秒显示一个字
connectingText.value += fullText[index]
index++
setTimeout(typeText, 200) // 每300毫秒显示一个字
} else {
setTimeout(() => {
connectingText.value = "";
index = 0;
typeText();
}, 1000); // 等待1秒后重新开始
connectingText.value = ''
index = 0
typeText()
}, 1000) // 等待1秒后重新开始
}
};
}
/*************************** end of code ****************************************/
/********************** conversation process code ***************************/
const leftVoiceActive = ref(false);
const rightVoiceActive = ref(false);
const leftVoiceActive = ref(false)
const rightVoiceActive = ref(false)
const animateVoice = () => {
leftVoiceActive.value = Math.random() > 0.5;
rightVoiceActive.value = Math.random() > 0.5;
};
leftVoiceActive.value = Math.random() > 0.5
rightVoiceActive.value = Math.random() > 0.5
}
const wavRecorder = ref(new WavRecorder({ sampleRate: 24000 }));
const wavStreamPlayer = ref(new WavStreamPlayer({ sampleRate: 24000 }));
let host = process.env.VUE_APP_WS_HOST;
if (host === "") {
if (location.protocol === "https:") {
host = "wss://" + location.host;
const wavRecorder = ref(new WavRecorder({ sampleRate: 24000 }))
const wavStreamPlayer = ref(new WavStreamPlayer({ sampleRate: 24000 }))
let host = import.meta.env.VITE_WS_HOST
if (host === '') {
if (location.protocol === 'https:') {
host = 'wss://' + location.host
} else {
host = "ws://" + location.host;
host = 'ws://' + location.host
}
}
const client = ref(
new RealtimeClient({
url: `${host}/api/realtime`,
apiKey: getUserToken(),
dangerouslyAllowAPIKeyInBrowser: true
dangerouslyAllowAPIKeyInBrowser: true,
})
);
)
// // Set up client instructions and transcription
client.value.updateSession({
instructions: instructions,
turn_detection: null,
input_audio_transcription: { model: "whisper-1" },
voice: "alloy"
});
input_audio_transcription: { model: 'whisper-1' },
voice: 'alloy',
})
// set voice wave canvas
const clientCanvasRef = ref(null);
const serverCanvasRef = ref(null);
const isConnected = ref(false);
const isRecording = ref(false);
const backgroundAudio = ref(null);
const hangUpAudio = ref(null);
const clientCanvasRef = ref(null)
const serverCanvasRef = ref(null)
const isConnected = ref(false)
const isRecording = ref(false)
const backgroundAudio = ref(null)
const hangUpAudio = ref(null)
function sleep(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
return new Promise((resolve) => setTimeout(resolve, ms))
}
const connect = async () => {
if (isConnected.value) {
return;
return
}
// 播放背景音乐
if (backgroundAudio.value) {
backgroundAudio.value.play().catch((error) => {
console.error("播放失败，可能是浏览器的自动播放策略导致的:", error);
});
console.error('播放失败，可能是浏览器的自动播放策略导致的:', error)
})
}
// 模拟拨号延时
await sleep(3000);
await sleep(3000)
try {
await client.value.connect();
await wavRecorder.value.begin();
await wavStreamPlayer.value.connect();
console.log("对话连接成功！");
await client.value.connect()
await wavRecorder.value.begin()
await wavStreamPlayer.value.connect()
console.log('对话连接成功！')
if (!client.value.isConnected()) {
return;
return
}
isConnected.value = true;
backgroundAudio.value?.pause();
backgroundAudio.value.currentTime = 0;
isConnected.value = true
backgroundAudio.value?.pause()
backgroundAudio.value.currentTime = 0
client.value.sendUserMessageContent([
{
type: "input_text",
text: "你好，我是极客学长!"
}
]);
if (client.value.getTurnDetectionType() === "server_vad") {
await wavRecorder.value.record((data) =>
client.value.appendInputAudio(data.mono)
);
type: 'input_text',
text: '你好，我是极客学长!',
},
])
if (client.value.getTurnDetectionType() === 'server_vad') {
await wavRecorder.value.record((data) => client.value.appendInputAudio(data.mono))
}
} catch (e) {
console.error(e);
console.error(e)
}
};
}
// 开始语音输入
const startRecording = async () => {
if (isRecording.value) {
return;
return
}
isRecording.value = true;
isRecording.value = true
try {
const trackSampleOffset = await wavStreamPlayer.value.interrupt();
const trackSampleOffset = await wavStreamPlayer.value.interrupt()
if (trackSampleOffset?.trackId) {
const { trackId, offset } = trackSampleOffset;
client.value.cancelResponse(trackId, offset);
const { trackId, offset } = trackSampleOffset
client.value.cancelResponse(trackId, offset)
}
await wavRecorder.value.record((data) =>
client.value.appendInputAudio(data.mono)
);
await wavRecorder.value.record((data) => client.value.appendInputAudio(data.mono))
} catch (e) {
console.error(e);
console.error(e)
}
};
}
// 结束语音输入
const stopRecording = async () => {
try {
isRecording.value = false;
await wavRecorder.value.pause();
client.value.createResponse();
isRecording.value = false
await wavRecorder.value.pause()
client.value.createResponse()
} catch (e) {
console.error(e);
console.error(e)
}
};
}
// const changeTurnEndType = async (value) => {
// if (value === 'none' && wavRecorder.value.getStatus() === 'recording') {
@@ -228,108 +220,108 @@ const stopRecording = async () => {
// 初始化 WaveRecorder 组件和 RealtimeClient 事件处理
const initialize = async () => {
// Set up render loops for the visualization canvas
let isLoaded = true;
let isLoaded = true
const render = () => {
if (isLoaded) {
if (clientCanvasRef.value) {
const canvas = clientCanvasRef.value;
const canvas = clientCanvasRef.value
if (!canvas.width || !canvas.height) {
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
canvas.width = canvas.offsetWidth
canvas.height = canvas.offsetHeight
}
const ctx = canvas.getContext("2d");
const ctx = canvas.getContext('2d')
if (ctx) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.clearRect(0, 0, canvas.width, canvas.height)
const result = wavRecorder.value.recording
? wavRecorder.value.getFrequencies("voice")
: { values: new Float32Array([0]) };
WavRenderer.drawBars(canvas, ctx, result.values, "#0099ff", 10, 0, 8);
? wavRecorder.value.getFrequencies('voice')
: { values: new Float32Array([0]) }
WavRenderer.drawBars(canvas, ctx, result.values, '#0099ff', 10, 0, 8)
}
}
if (serverCanvasRef.value) {
const canvas = serverCanvasRef.value;
const canvas = serverCanvasRef.value
if (!canvas.width || !canvas.height) {
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
canvas.width = canvas.offsetWidth
canvas.height = canvas.offsetHeight
}
const ctx = canvas.getContext("2d");
const ctx = canvas.getContext('2d')
if (ctx) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.clearRect(0, 0, canvas.width, canvas.height)
const result = wavStreamPlayer.value.analyser
? wavStreamPlayer.value.getFrequencies("voice")
: { values: new Float32Array([0]) };
WavRenderer.drawBars(canvas, ctx, result.values, "#009900", 10, 0, 8);
? wavStreamPlayer.value.getFrequencies('voice')
: { values: new Float32Array([0]) }
WavRenderer.drawBars(canvas, ctx, result.values, '#009900', 10, 0, 8)
}
}
requestAnimationFrame(render);
requestAnimationFrame(render)
}
};
render();
}
render()
client.value.on("error", (event) => {
showMessageError(event.error);
});
client.value.on('error', (event) => {
showMessageError(event.error)
})
client.value.on("realtime.event", (re) => {
if (re.event.type === "error") {
showMessageError(re.event.error);
client.value.on('realtime.event', (re) => {
if (re.event.type === 'error') {
showMessageError(re.event.error)
}
});
})
client.value.on("conversation.interrupted", async () => {
const trackSampleOffset = await wavStreamPlayer.value.interrupt();
client.value.on('conversation.interrupted', async () => {
const trackSampleOffset = await wavStreamPlayer.value.interrupt()
if (trackSampleOffset?.trackId) {
const { trackId, offset } = trackSampleOffset;
client.value.cancelResponse(trackId, offset);
const { trackId, offset } = trackSampleOffset
client.value.cancelResponse(trackId, offset)
}
});
})
client.value.on("conversation.updated", async ({ item, delta }) => {
client.value.on('conversation.updated', async ({ item, delta }) => {
// console.log('item updated', item, delta)
if (delta?.audio) {
wavStreamPlayer.value.add16BitPCM(delta.audio, item.id);
wavStreamPlayer.value.add16BitPCM(delta.audio, item.id)
}
});
};
})
}
const voiceInterval = ref(null);
const voiceInterval = ref(null)
onMounted(() => {
initialize();
initialize()
// 启动聊天进行中的动画
voiceInterval.value = setInterval(animateVoice, 200);
typeText();
});
voiceInterval.value = setInterval(animateVoice, 200)
typeText()
})
onUnmounted(() => {
clearInterval(voiceInterval.value);
client.value.reset();
});
clearInterval(voiceInterval.value)
client.value.reset()
})
// 挂断通话
const hangUp = async () => {
try {
isConnected.value = false;
isConnected.value = false
// 停止播放拨号音乐
if (backgroundAudio.value?.currentTime) {
backgroundAudio.value?.pause();
backgroundAudio.value.currentTime = 0;
backgroundAudio.value?.pause()
backgroundAudio.value.currentTime = 0
}
// 断开客户端的连接
client.value.reset();
client.value.reset()
// 中断语音输入和输出服务
await wavRecorder.value.end();
await wavStreamPlayer.value.interrupt();
await wavRecorder.value.end()
await wavStreamPlayer.value.interrupt()
} catch (e) {
console.error(e);
console.error(e)
} finally {
// 播放挂断音乐
hangUpAudio.value?.play();
emits("close");
hangUpAudio.value?.play()
emits('close')
}
};
}
// eslint-disable-next-line no-undef
defineExpose({ connect, hangUp });
defineExpose({ connect, hangUp })
</script>
<style scoped lang="stylus">

64
web/src/components/Welcome.vue
View File

@@ -58,63 +58,63 @@
</div>
</template>
<script setup>
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import {getSystemInfo} from "@/store/cache";
import { getSystemInfo } from '@/store/cache'
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'
const title = ref(process.env.VUE_APP_TITLE);
const version = ref(process.env.VUE_APP_VERSION);
const title = ref(import.meta.env.VITE_TITLE)
const version = ref(import.meta.env.VITE_VERSION)
const samples = ref([
"用小学生都能听懂的术语解释什么是量子纠缠",
"能给一位6岁男孩的生日会提供一些创造性的建议吗？",
"如何用 Go 语言实现支持代理 Http client 请求?"
]);
'用小学生都能听懂的术语解释什么是量子纠缠',
'能给一位6岁男孩的生日会提供一些创造性的建议吗？',
'如何用 Go 语言实现支持代理 Http client 请求?',
])
const plugins = ref([
{
value: "今日早报",
text: "今日早报：获取当天全球的热门新闻事件列表"
value: '今日早报',
text: '今日早报：获取当天全球的热门新闻事件列表',
},
{
value: "微博热搜",
text: "微博热搜：新浪微博热搜榜，微博当日热搜榜单"
value: '微博热搜',
text: '微博热搜：新浪微博热搜榜，微博当日热搜榜单',
},
{
value: "今日头条",
text: "今日头条：给用户推荐当天的头条新闻，周榜热文"
}
]);
value: '今日头条',
text: '今日头条：给用户推荐当天的头条新闻，周榜热文',
},
])
const capabilities = ref([
{
text: "轻松扮演翻译专家，程序员，AI 女友，文案高手...",
value: ""
text: '轻松扮演翻译专家，程序员，AI 女友，文案高手...',
value: '',
},
{
text: "国产大语言模型支持，百度文心，科大讯飞，ChatGLM...",
value: ""
text: '国产大语言模型支持，百度文心，科大讯飞，ChatGLM...',
value: '',
},
{
text: "绘画：马斯克开拖拉机，20世纪，中国农村。3:2",
value: "绘画：马斯克开拖拉机，20世纪，中国农村。3:2"
}
]);
text: '绘画：马斯克开拖拉机，20世纪，中国农村。3:2',
value: '绘画：马斯克开拖拉机，20世纪，中国农村。3:2',
},
])
onMounted(() => {
getSystemInfo()
.then((res) => {
title.value = res.data.title;
title.value = res.data.title
})
.catch((e) => {
ElMessage.error("获取系统配置失败：" + e.message);
});
});
ElMessage.error('获取系统配置失败：' + e.message)
})
})
const emits = defineEmits(["send"]);
const emits = defineEmits(['send'])
const send = (text) => {
emits("send", text);
};
emits('send', text)
}
</script>
<style scoped lang="stylus">
.welcome {

114
web/src/components/admin/AdminHeader.vue
View File

@@ -12,14 +12,22 @@
<div class="breadcrumb">
<el-breadcrumb :separator-icon="ArrowRight">
<el-breadcrumb-item v-for="item in breadcrumb" :key="item.title">{{ item.title }}</el-breadcrumb-item>
<el-breadcrumb-item v-for="item in breadcrumb" :key="item.title">{{
item.title
}}</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="header-right">
<div class="header-user-con">
<!-- 切换主题 -->
<el-switch style="margin-right: 10px" v-model="dark" inline-prompt :active-action-icon="Moon"
:inactive-action-icon="Sunny" @change="changeTheme"/>
<el-switch
style="margin-right: 10px"
v-model="dark"
inline-prompt
:active-action-icon="Moon"
:inactive-action-icon="Sunny"
@change="changeTheme"
/>
<!-- 用户名下拉菜单 -->
<el-dropdown class="user-name" :hide-on-click="true" trigger="click">
<span class="el-dropdown-link">
@@ -30,7 +38,9 @@
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item><i class="iconfont icon-version"></i> 当前版本：{{ version }}</el-dropdown-item>
<el-dropdown-item
><i class="iconfont icon-version"></i> 当前版本：{{ version }}</el-dropdown-item
>
<el-dropdown-item divided @click="logout">
<i class="iconfont icon-logout"></i>
<span>退出登录</span>
@@ -43,103 +53,103 @@
</div>
</template>
<script setup>
import {onMounted, ref, watch} from "vue";
import {getMenuItems, useSidebarStore} from "@/store/sidebar";
import {useRouter} from "vue-router";
import {ArrowDown, ArrowRight, Expand, Fold, Moon, Sunny} from "@element-plus/icons-vue";
import {httpGet} from "@/utils/http";
import {ElMessage} from "element-plus";
import {removeAdminToken} from "@/store/session";
import {useSharedStore} from "@/store/sharedata";
import { removeAdminToken } from '@/store/session'
import { useSharedStore } from '@/store/sharedata'
import { getMenuItems, useSidebarStore } from '@/store/sidebar'
import { httpGet } from '@/utils/http'
import { ArrowDown, ArrowRight, Expand, Fold, Moon, Sunny } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { onMounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
const version = ref(process.env.VUE_APP_VERSION);
const avatar = ref("/images/user-info.jpg");
const sidebar = useSidebarStore();
const router = useRouter();
const breadcrumb = ref([]);
const version = ref(import.meta.env.VITE_VERSION)
const avatar = ref('/images/user-info.jpg')
const sidebar = useSidebarStore()
const router = useRouter()
const breadcrumb = ref([])
const store = useSharedStore();
const dark = ref(store.theme === "dark");
const theme = ref(store.theme);
const store = useSharedStore()
const dark = ref(store.theme === 'dark')
const theme = ref(store.theme)
watch(
() => store.theme,
() => store.theme,
(val) => {
theme.value = val;
theme.value = val
}
);
)
const changeTheme = () => {
store.setTheme(dark.value ? "dark" : "light");
};
store.setTheme(dark.value ? 'dark' : 'light')
}
router.afterEach((to) => {
initBreadCrumb(to.path);
});
initBreadCrumb(to.path)
})
onMounted(() => {
initBreadCrumb(router.currentRoute.value.path);
});
initBreadCrumb(router.currentRoute.value.path)
})
// 初始化面包屑导航
const initBreadCrumb = (path) => {
breadcrumb.value = [{ title: "首页" }];
const items = getMenuItems();
breadcrumb.value = [{ title: '首页' }]
const items = getMenuItems()
if (items) {
let bk = false;
let bk = false
for (let i = 0; i < items.length; i++) {
if (items[i].index === path) {
breadcrumb.value.push({
title: items[i].title,
path: items[i].index,
});
break;
})
break
}
if (bk) {
break;
break
}
if (items[i]["subs"]) {
const subs = items[i]["subs"];
if (items[i]['subs']) {
const subs = items[i]['subs']
for (let j = 0; j < subs.length; j++) {
if (subs[j].index === path) {
breadcrumb.value.push({
title: items[i].title,
path: items[i].index,
});
})
breadcrumb.value.push({
title: subs[j].title,
path: subs[j].index,
});
bk = true;
break;
})
bk = true
break
}
}
}
}
}
};
}
// 侧边栏折叠
const collapseChange = () => {
sidebar.handleCollapse();
};
sidebar.handleCollapse()
}
onMounted(() => {
if (document.body.clientWidth < 1024) {
collapseChange();
collapseChange()
}
});
})
const logout = function () {
httpGet("/api/admin/logout")
httpGet('/api/admin/logout')
.then(() => {
removeAdminToken();
router.replace("/admin/login");
removeAdminToken()
router.replace('/admin/login')
})
.catch((e) => {
ElMessage.error("注销失败: " + e.message);
});
};
ElMessage.error('注销失败: ' + e.message)
})
}
</script>
<style scoped lang="stylus">
.admin-header {

28
web/src/store/session.js
View File

@@ -1,39 +1,39 @@
import {randString} from "@/utils/libs";
import Storage from "good-storage";
import {removeAdminInfo} from "@/store/cache";
import { removeAdminInfo } from '@/store/cache'
import { randString } from '@/utils/libs'
import Storage from 'good-storage'
/**
* storage handler
*/
const UserTokenKey = process.env.VUE_APP_KEY_PREFIX + "Authorization";
const AdminTokenKey = process.env.VUE_APP_KEY_PREFIX + "Admin-Authorization"
const UserTokenKey = import.meta.env.VITE_KEY_PREFIX + 'Authorization'
const AdminTokenKey = import.meta.env.VITE_KEY_PREFIX + 'Admin-Authorization'
export function getSessionId() {
return randString(42)
return randString(42)
}
export function getUserToken() {
return Storage.get(UserTokenKey) ?? ""
return Storage.get(UserTokenKey) ?? ''
}
export function setUserToken(token) {
// 刷新 session 缓存
Storage.set(UserTokenKey, token)
// 刷新 session 缓存
Storage.set(UserTokenKey, token)
}
export function removeUserToken() {
Storage.remove(UserTokenKey)
Storage.remove(UserTokenKey)
}
export function getAdminToken() {
return Storage.get(AdminTokenKey) ?? ""
return Storage.get(AdminTokenKey) ?? ''
}
export function setAdminToken(token) {
Storage.set(AdminTokenKey, token)
Storage.set(AdminTokenKey, token)
}
export function removeAdminToken() {
Storage.remove(AdminTokenKey)
removeAdminInfo()
Storage.remove(AdminTokenKey)
removeAdminInfo()
}

60
web/src/store/system.js
View File

@@ -5,50 +5,50 @@
// * @Author yangjian102621@163.com
// * +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
import Storage from "good-storage";
import Storage from 'good-storage'
export function GetFileIcon(ext) {
const files = {
".docx": "doc.png",
".doc": "doc.png",
".xls": "xls.png",
".xlsx": "xls.png",
".csv": "xls.png",
".ppt": "ppt.png",
".pptx": "ppt.png",
".md": "md.png",
".pdf": "pdf.png",
".sql": "sql.png",
".mp3": "mp3.png",
".wav": "mp3.png",
".mp4": "mp4.png",
".avi": "mp4.png",
}
if (files[ext]) {
return '/images/ext/' + files[ext]
}
const files = {
'.docx': 'doc.png',
'.doc': 'doc.png',
'.xls': 'xls.png',
'.xlsx': 'xls.png',
'.csv': 'xls.png',
'.ppt': 'ppt.png',
'.pptx': 'ppt.png',
'.md': 'md.png',
'.pdf': 'pdf.png',
'.sql': 'sql.png',
'.mp3': 'mp3.png',
'.wav': 'mp3.png',
'.mp4': 'mp4.png',
'.avi': 'mp4.png',
}
if (files[ext]) {
return '/images/ext/' + files[ext]
}
return '/images/ext/file.png'
return '/images/ext/file.png'
}
// 获取文件类型
export function GetFileType (ext) {
return ext.replace(".", "").toUpperCase()
export function GetFileType(ext) {
return ext.replace('.', '').toUpperCase()
}
// 将文件大小转成字符
export function FormatFileSize(bytes) {
if (bytes === 0) return '0 Bytes';
const k = 1024;
const sizes = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
if (bytes === 0) return '0 Bytes'
const k = 1024
const sizes = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB']
const i = Math.floor(Math.log(bytes) / Math.log(k))
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}
export function setRoute(path) {
Storage.set(process.env.VUE_APP_KEY_PREFIX + 'ROUTE_',path)
Storage.set(import.meta.env.VITE_KEY_PREFIX + 'ROUTE_', path)
}
export function getRoute() {
return Storage.get(process.env.VUE_APP_KEY_PREFIX + 'ROUTE_')
return Storage.get(import.meta.env.VITE_KEY_PREFIX + 'ROUTE_')
}

2
web/src/views/Home.vue
View File

@@ -168,7 +168,7 @@ const routerViewKey = ref(0)
const showConfigDialog = ref(false)
const license = ref({ de_copy: true })
const showLoginDialog = ref(false)
const githubURL = ref(process.env.VUE_APP_GITHUB_URL)
const githubURL = ref(import.meta.env.VITE_GITHUB_URL)
/**
* 从路径名中提取第一个路径段

6
web/src/views/Index.vue
View File

@@ -102,9 +102,9 @@ const slogan = ref('')
const license = ref({ de_copy: true })
const isLogin = ref(false)
const docsURL = ref(process.env.VUE_APP_DOCS_URL)
const githubURL = ref(process.env.VUE_APP_GITHUB_URL)
const giteeURL = ref(process.env.VUE_APP_GITEE_URL)
const docsURL = ref(import.meta.env.VITE_DOCS_URL)
const githubURL = ref(import.meta.env.VITE_GITHUB_URL)
const giteeURL = ref(import.meta.env.VITE_GITEE_URL)
const navs = ref([])
const iconMap = ref({

4
web/src/views/Login.vue
View File

@@ -92,8 +92,8 @@ const enableVerify = ref(false)
const captchaRef = ref(null)
const ruleFormRef = ref(null)
const ruleForm = reactive({
username: process.env.VUE_APP_USER,
password: process.env.VUE_APP_PASS,
username: import.meta.env.VITE_USER,
password: import.meta.env.VITE_PASS,
agreement: false,
})
const rules = {

320
web/src/views/Luma.vue
View File

@@ -15,11 +15,25 @@
<div class="prompt-container">
<div class="input-container">
<div class="upload-icon" v-if="images.length < 2">
<el-upload class="avatar-uploader" :auto-upload="true" :show-file-list="false" :http-request="upload" accept=".jpg,.png,.jpeg">
<el-upload
class="avatar-uploader"
:auto-upload="true"
:show-file-list="false"
:http-request="upload"
accept=".jpg,.png,.jpeg"
>
<i class="iconfont icon-image"></i>
</el-upload>
</div>
<textarea class="prompt-input" :rows="row" v-model="formData.prompt" maxlength="2000" placeholder="请输入提示词或者上传图片" autofocus> </textarea>
<textarea
class="prompt-input"
:rows="row"
v-model="formData.prompt"
maxlength="2000"
placeholder="请输入提示词或者上传图片"
autofocus
>
</textarea>
<div class="send-icon" @click="create">
<i class="iconfont icon-send"></i>
</div>
@@ -44,7 +58,11 @@
</div>
</div>
<el-container class="video-container" v-loading="loading" element-loading-background="rgba(100,100,100,0.3)">
<el-container
class="video-container"
v-loading="loading"
element-loading-background="rgba(100,100,100,0.3)"
>
<h2 class="h-title text-2xl mb-5 mt-2">你的作品</h2>
<div class="list-box" v-if="!noData">
@@ -53,7 +71,15 @@
<div class="left">
<div class="container">
<div v-if="item.progress === 100">
<video class="video" :src="replaceImg(item.video_url)" preload="auto" loop="loop" muted="muted">您的浏览器不支持视频播放</video>
<video
class="video"
:src="replaceImg(item.video_url)"
preload="auto"
loop="loop"
muted="muted"
>
您的浏览器不支持视频播放
</video>
<button class="play flex justify-center items-center" @click="play(item)">
<img src="/images/play.svg" alt="" />
</button>
@@ -63,7 +89,9 @@
</div>
</div>
<div class="center">
<div class="failed" v-if="item.progress === 101">任务执行失败：{{ item.err_msg }}，任务提示词：{{ item.prompt }}</div>
<div class="failed" v-if="item.progress === 101">
任务执行失败：{{ item.err_msg }}，任务提示词：{{ item.prompt }}
</div>
<div class="prompt" v-else>{{ item.prompt }}</div>
</div>
<div class="right" v-if="item.progress === 100">
@@ -100,7 +128,12 @@
</div>
</div>
</div>
<el-empty :image-size="100" :image="nodata" description="没有任何作品，赶紧去创作吧！" v-else />
<el-empty
:image-size="100"
:image="nodata"
description="没有任何作品，赶紧去创作吧！"
v-else
/>
<div class="pagination">
<el-pagination
@@ -116,8 +149,22 @@
/>
</div>
</el-container>
<black-dialog v-model:show="showDialog" title="预览视频" hide-footer @cancal="showDialog = false" width="auto">
<video style="max-width: 90vw; max-height: 90vh" :src="currentVideoUrl" preload="auto" :autoplay="true" loop="loop" muted="muted" v-show="showDialog">
<black-dialog
v-model:show="showDialog"
title="预览视频"
hide-footer
@cancal="showDialog = false"
width="auto"
>
<video
style="max-width: 90vw; max-height: 90vh"
:src="currentVideoUrl"
preload="auto"
:autoplay="true"
loop="loop"
muted="muted"
v-show="showDialog"
>
您的浏览器不支持视频播放
</video>
</black-dialog>
@@ -125,215 +172,214 @@
</template>
<script setup>
import nodata from "@/assets/img/no-data.png";
import nodata from '@/assets/img/no-data.png'
import { onMounted, onUnmounted, reactive, ref } from "vue";
import { CircleCloseFilled } from "@element-plus/icons-vue";
import { httpDownload, httpPost, httpGet } from "@/utils/http";
import { checkSession } from "@/store/cache";
import { closeLoading, showLoading, showMessageError, showMessageOK } from "@/utils/dialog";
import { replaceImg } from "@/utils/libs";
import { ElMessage, ElMessageBox } from "element-plus";
import BlackSwitch from "@/components/ui/BlackSwitch.vue";
import Generating from "@/components/ui/Generating.vue";
import BlackDialog from "@/components/ui/BlackDialog.vue";
import Clipboard from "clipboard";
const showDialog = ref(false);
const currentVideoUrl = ref("");
const row = ref(1);
const images = ref([]);
import BlackDialog from '@/components/ui/BlackDialog.vue'
import Generating from '@/components/ui/Generating.vue'
import { checkSession } from '@/store/cache'
import { closeLoading, showLoading, showMessageError, showMessageOK } from '@/utils/dialog'
import { httpDownload, httpGet, httpPost } from '@/utils/http'
import { replaceImg } from '@/utils/libs'
import { CircleCloseFilled } from '@element-plus/icons-vue'
import Clipboard from 'clipboard'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, onUnmounted, reactive, ref } from 'vue'
const showDialog = ref(false)
const currentVideoUrl = ref('')
const row = ref(1)
const images = ref([])
const formData = reactive({
prompt: "",
prompt: '',
expand_prompt: false,
loop: false,
first_frame_img: "",
end_frame_img: "",
});
first_frame_img: '',
end_frame_img: '',
})
const loading = ref(false);
const list = ref([]);
const noData = ref(true);
const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
const taskPulling = ref(true);
const clipboard = ref(null);
const pullHandler = ref(null);
const loading = ref(false)
const list = ref([])
const noData = ref(true)
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
const taskPulling = ref(true)
const clipboard = ref(null)
const pullHandler = ref(null)
onMounted(() => {
checkSession().then(() => {
fetchData(1);
fetchData(1)
// 设置轮询
pullHandler.value = setInterval(() => {
if (taskPulling.value) {
fetchData(1);
fetchData(1)
}
}, 5000);
});
}, 5000)
})
clipboard.value = new Clipboard(".copy-prompt");
clipboard.value.on("success", () => {
ElMessage.success("复制成功！");
});
});
clipboard.value = new Clipboard('.copy-prompt')
clipboard.value.on('success', () => {
ElMessage.success('复制成功！')
})
})
onUnmounted(() => {
clipboard.value.destroy();
clipboard.value.destroy()
if (pullHandler.value) {
clearInterval(pullHandler.value);
clearInterval(pullHandler.value)
}
});
})
const download = (item) => {
const url = replaceImg(item.video_url);
const downloadURL = `${process.env.VUE_APP_API_HOST}/api/download?url=${url}`;
const urlObj = new URL(url);
const fileName = urlObj.pathname.split("/").pop();
item.downloading = true;
const url = replaceImg(item.video_url)
const downloadURL = `${import.meta.env.VITE_API_HOST}/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;
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;
});
};
showMessageError('下载失败')
item.downloading = false
})
}
const play = (item) => {
currentVideoUrl.value = replaceImg(item.video_url);
showDialog.value = true;
};
currentVideoUrl.value = replaceImg(item.video_url)
showDialog.value = true
}
const removeJob = (item) => {
ElMessageBox.confirm("此操作将会删除任务相关文件，继续操作码?", "删除提示", {
confirmButtonText: "确认",
cancelButtonText: "取消",
type: "warning",
ElMessageBox.confirm('此操作将会删除任务相关文件，继续操作码?', '删除提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
httpGet("/api/video/remove", { id: item.id })
httpGet('/api/video/remove', { id: item.id })
.then(() => {
ElMessage.success("任务删除成功");
fetchData();
ElMessage.success('任务删除成功')
fetchData()
})
.catch((e) => {
ElMessage.error("任务删除失败：" + e.message);
});
ElMessage.error('任务删除失败：' + e.message)
})
})
.catch(() => {});
};
.catch(() => {})
}
const publishJob = (item) => {
httpGet("/api/video/publish", { id: item.id, publish: item.publish })
httpGet('/api/video/publish', { id: item.id, publish: item.publish })
.then(() => {
ElMessage.success("操作成功");
ElMessage.success('操作成功')
})
.catch((e) => {
ElMessage.error("操作失败：" + e.message);
});
};
ElMessage.error('操作失败：' + e.message)
})
}
const upload = (file) => {
const formData = new FormData();
formData.append("file", file.file, file.name);
showLoading("正在上传文件...");
httpPost("/api/upload", formData)
const formData = new FormData()
formData.append('file', file.file, file.name)
showLoading('正在上传文件...')
httpPost('/api/upload', formData)
.then((res) => {
images.value.push(res.data.url);
ElMessage.success({ message: "上传成功", duration: 500 });
closeLoading();
images.value.push(res.data.url)
ElMessage.success({ message: '上传成功', duration: 500 })
closeLoading()
})
.catch((e) => {
ElMessage.error("图片上传失败:" + e.message);
closeLoading();
});
};
ElMessage.error('图片上传失败:' + e.message)
closeLoading()
})
}
const remove = (img) => {
images.value = images.value.filter((item) => item !== img);
};
images.value = images.value.filter((item) => item !== img)
}
const switchReverse = () => {
images.value = images.value.reverse();
};
images.value = images.value.reverse()
}
const fetchData = (_page) => {
if (_page) {
page.value = _page;
page.value = _page
}
httpGet("/api/video/list", {
httpGet('/api/video/list', {
page: page.value,
page_size: pageSize.value,
type: "luma",
type: 'luma',
})
.then((res) => {
total.value = res.data.total;
let needPull = false;
const items = [];
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;
needPull = true
}
items.push(v);
items.push(v)
}
loading.value = false;
taskPulling.value = needPull;
loading.value = false
taskPulling.value = needPull
if (JSON.stringify(list.value) !== JSON.stringify(items)) {
list.value = items;
list.value = items
}
noData.value = list.value.length === 0;
noData.value = list.value.length === 0
})
.catch(() => {
loading.value = false;
noData.value = true;
});
};
loading.value = false
noData.value = true
})
}
const create = () => {
const len = images.value.length;
const len = images.value.length
if (len) {
formData.first_frame_img = replaceImg(images.value[0]);
formData.first_frame_img = replaceImg(images.value[0])
if (len === 2) {
formData.end_frame_img = replaceImg(images.value[1]);
formData.end_frame_img = replaceImg(images.value[1])
}
}
httpPost("/api/video/luma/create", formData)
httpPost('/api/video/luma/create', formData)
.then(() => {
fetchData(1);
taskPulling.value = true;
showMessageOK("创建任务成功");
fetchData(1)
taskPulling.value = true
showMessageOK('创建任务成功')
})
.catch((e) => {
showMessageError("创建任务失败：" + e.message);
});
};
showMessageError('创建任务失败：' + e.message)
})
}
const generatePrompt = () => {
if (formData.prompt === "") {
return showMessageError("请输入原始提示词");
if (formData.prompt === '') {
return showMessageError('请输入原始提示词')
}
showLoading("正在生成视频脚本...");
httpPost("/api/prompt/video", { prompt: formData.prompt })
showLoading('正在生成视频脚本...')
httpPost('/api/prompt/video', { prompt: formData.prompt })
.then((res) => {
formData.prompt = res.data;
closeLoading();
formData.prompt = res.data
closeLoading()
})
.catch((e) => {
showMessageError("生成提示词失败：" + e.message);
closeLoading();
});
};
showMessageError('生成提示词失败：' + e.message)
closeLoading()
})
}
</script>
<style lang="stylus" scoped>

221
web/src/views/Member.vue
View File

@@ -1,6 +1,11 @@
<template>
<div>
<div class="member custom-scroll" v-loading="loading" element-loading-background="rgba(255,255,255,.3)" :element-loading-text="loadingText">
<div
class="member custom-scroll"
v-loading="loading"
element-loading-background="rgba(255,255,255,.3)"
:element-loading-text="loadingText"
>
<div class="inner">
<div class="user-profile">
<user-profile :key="profileKey" />
@@ -26,7 +31,9 @@
<div class="product-box">
<div class="info" v-if="orderPayInfoText !== ''">
<el-alert type="success" show-icon :closable="false" effect="dark"> <strong>说明:</strong> {{ vipInfoText }} </el-alert>
<el-alert type="success" show-icon :closable="false" effect="dark">
<strong>说明:</strong> {{ vipInfoText }}
</el-alert>
</div>
<el-row v-if="list.length > 0" :gutter="20" class="list-box">
@@ -61,7 +68,12 @@
</div>
<div class="pay-way">
<span type="primary" v-for="payWay in payWays" @click="pay(item, payWay)" :key="payWay">
<span
type="primary"
v-for="payWay in payWays"
@click="pay(item, payWay)"
:key="payWay"
>
<el-button v-if="payWay.pay_type === 'alipay'" color="#15A6E8" circle>
<i class="iconfont icon-alipay"></i>
</el-button>
@@ -97,14 +109,33 @@
</div>
</div>
<password-dialog v-if="isLogin" :show="showPasswordDialog" @hide="showPasswordDialog = false" />
<bind-mobile v-if="isLogin" :show="showBindMobileDialog" @hide="showBindMobileDialog = false" />
<password-dialog
v-if="isLogin"
:show="showPasswordDialog"
@hide="showPasswordDialog = false"
/>
<bind-mobile
v-if="isLogin"
:show="showBindMobileDialog"
@hide="showBindMobileDialog = false"
/>
<bind-email v-if="isLogin" :show="showBindEmailDialog" @hide="showBindEmailDialog = false" />
<third-login v-if="isLogin" :show="showThirdLoginDialog" @hide="showThirdLoginDialog = false" />
<third-login
v-if="isLogin"
:show="showThirdLoginDialog"
@hide="showThirdLoginDialog = false"
/>
<redeem-verify v-if="isLogin" :show="showRedeemVerifyDialog" @hide="redeemCallback" />
</div>
<el-dialog v-model="showDialog" :show-close="false" :close-on-click-modal="false" hide-footer width="auto" class="pay-dialog">
<el-dialog
v-model="showDialog"
:show-close="false"
:close-on-click-modal="false"
hide-footer
width="auto"
class="pay-dialog"
>
<div v-if="qrImg !== ''">
<div class="product-info">
请使用微信扫码支付：<span class="price">￥{{ price }}</span>
@@ -120,145 +151,145 @@
</template>
<script setup>
import nodata from "@/assets/img/no-data.png";
import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
import { httpGet, httpPost } from "@/utils/http";
import { checkSession, getSystemInfo } from "@/store/cache";
import UserProfile from "@/components/UserProfile.vue";
import PasswordDialog from "@/components/PasswordDialog.vue";
import BindMobile from "@/components/BindMobile.vue";
import RedeemVerify from "@/components/RedeemVerify.vue";
import UserOrder from "@/components/UserOrder.vue";
import { useSharedStore } from "@/store/sharedata";
import BindEmail from "@/components/BindEmail.vue";
import ThirdLogin from "@/components/ThirdLogin.vue";
import QRCode from "qrcode";
import nodata from '@/assets/img/no-data.png'
import BindEmail from '@/components/BindEmail.vue'
import BindMobile from '@/components/BindMobile.vue'
import PasswordDialog from '@/components/PasswordDialog.vue'
import RedeemVerify from '@/components/RedeemVerify.vue'
import ThirdLogin from '@/components/ThirdLogin.vue'
import UserOrder from '@/components/UserOrder.vue'
import UserProfile from '@/components/UserProfile.vue'
import { checkSession, getSystemInfo } from '@/store/cache'
import { useSharedStore } from '@/store/sharedata'
import { httpGet, httpPost } from '@/utils/http'
import { ElMessage } from 'element-plus'
import QRCode from 'qrcode'
import { onMounted, ref } from 'vue'
const list = ref([]);
const vipImg = ref("/images/menu/member.png");
const enableReward = ref(false); // 是否启用众筹功能
const rewardImg = ref("/images/reward.png");
const showPasswordDialog = ref(false);
const showBindMobileDialog = ref(false);
const showBindEmailDialog = ref(false);
const showRedeemVerifyDialog = ref(false);
const showThirdLoginDialog = ref(false);
const user = ref(null);
const isLogin = ref(false);
const orderTimeout = ref(1800);
const loading = ref(true);
const loadingText = ref("加载中...");
const orderPayInfoText = ref("");
const list = ref([])
const vipImg = ref('/images/menu/member.png')
const enableReward = ref(false) // 是否启用众筹功能
const rewardImg = ref('/images/reward.png')
const showPasswordDialog = ref(false)
const showBindMobileDialog = ref(false)
const showBindEmailDialog = ref(false)
const showRedeemVerifyDialog = ref(false)
const showThirdLoginDialog = ref(false)
const user = ref(null)
const isLogin = ref(false)
const orderTimeout = ref(1800)
const loading = ref(true)
const loadingText = ref('加载中...')
const orderPayInfoText = ref('')
const payWays = ref([]);
const vipInfoText = ref("");
const store = useSharedStore();
const profileKey = ref(0);
const userOrderKey = ref(0);
const showDialog = ref(false);
const qrImg = ref("");
const price = ref(0);
const payWays = ref([])
const vipInfoText = ref('')
const store = useSharedStore()
const profileKey = ref(0)
const userOrderKey = ref(0)
const showDialog = ref(false)
const qrImg = ref('')
const price = ref(0)
onMounted(() => {
checkSession()
.then((_user) => {
user.value = _user;
isLogin.value = true;
user.value = _user
isLogin.value = true
})
.catch(() => {
store.setShowLoginDialog(true);
});
store.setShowLoginDialog(true)
})
httpGet("/api/product/list")
httpGet('/api/product/list')
.then((res) => {
list.value = res.data;
loading.value = false;
list.value = res.data
loading.value = false
})
.catch((e) => {
ElMessage.error("获取产品套餐失败：" + e.message);
});
ElMessage.error('获取产品套餐失败：' + e.message)
})
getSystemInfo()
.then((res) => {
rewardImg.value = res.data["reward_img"];
enableReward.value = res.data["enabled_reward"];
orderPayInfoText.value = res.data["order_pay_info_text"];
if (res.data["order_pay_timeout"] > 0) {
orderTimeout.value = res.data["order_pay_timeout"];
rewardImg.value = res.data['reward_img']
enableReward.value = res.data['enabled_reward']
orderPayInfoText.value = res.data['order_pay_info_text']
if (res.data['order_pay_timeout'] > 0) {
orderTimeout.value = res.data['order_pay_timeout']
}
vipInfoText.value = res.data["vip_info_text"];
vipInfoText.value = res.data['vip_info_text']
})
.catch((e) => {
ElMessage.error("获取系统配置失败：" + e.message);
});
ElMessage.error('获取系统配置失败：' + e.message)
})
httpGet("/api/payment/payWays")
httpGet('/api/payment/payWays')
.then((res) => {
payWays.value = res.data;
payWays.value = res.data
})
.catch((e) => {
ElMessage.error("获取支付方式失败：" + e.message);
});
});
ElMessage.error('获取支付方式失败：' + e.message)
})
})
const pay = (product, payWay) => {
if (!isLogin.value) {
store.setShowLoginDialog(true);
return;
store.setShowLoginDialog(true)
return
}
loading.value = true;
loadingText.value = "正在生成支付订单...";
let host = process.env.VUE_APP_API_HOST;
if (host === "") {
host = `${location.protocol}//${location.host}`;
loading.value = true
loadingText.value = '正在生成支付订单...'
let host = import.meta.env.VITE_API_HOST
if (host === '') {
host = `${location.protocol}//${location.host}`
}
httpPost(`${process.env.VUE_APP_API_HOST}/api/payment/doPay`, {
httpPost(`${import.meta.env.VITE_API_HOST}/api/payment/doPay`, {
product_id: product.id,
pay_way: payWay.pay_way,
pay_type: payWay.pay_type,
user_id: user.value.id,
host: host,
device: "jump",
device: 'jump',
})
.then((res) => {
showDialog.value = true;
loading.value = false;
if (payWay.pay_way === "wechat") {
price.value = Number(product.discount);
showDialog.value = true
loading.value = false
if (payWay.pay_way === 'wechat') {
price.value = Number(product.discount)
QRCode.toDataURL(res.data, { width: 300, height: 300, margin: 2 }, (error, url) => {
if (error) {
console.error(error);
console.error(error)
} else {
qrImg.value = url;
qrImg.value = url
}
});
})
} else {
window.open(res.data, "_blank");
window.open(res.data, '_blank')
}
})
.catch((e) => {
setTimeout(() => {
ElMessage.error("生成支付订单失败：" + e.message);
loading.value = false;
}, 500);
});
};
ElMessage.error('生成支付订单失败：' + e.message)
loading.value = false
}, 500)
})
}
const redeemCallback = (success) => {
showRedeemVerifyDialog.value = false;
showRedeemVerifyDialog.value = false
if (success) {
profileKey.value += 1;
profileKey.value += 1
}
};
}
const payCallback = (success) => {
showDialog.value = false;
showDialog.value = false
if (success) {
profileKey.value += 1;
userOrderKey.value += 1;
profileKey.value += 1
userOrderKey.value += 1
}
};
}
</script>
<style lang="stylus">

30
web/src/views/Suno.vue
View File

@@ -46,7 +46,7 @@
placement="right"
:width="200"
trigger="hover"
content="描述您想要的音乐风格（例如“原声流行音乐”）。Sunos 模特无法识别艺术家的名字，但能够理解音乐流派和氛围。"
content="描述您想要的音乐风格（例如"原声流行音乐"）。Sunos 模特无法识别艺术家的名字，但能够理解音乐流派和氛围。"
>
<template #reference>
<el-icon>
@@ -270,23 +270,23 @@
<script setup>
import nodata from "@/assets/img/no-data.png";
import { nextTick, onMounted, onUnmounted, ref, watch } from "vue";
import { Delete, InfoFilled } from "@element-plus/icons-vue";
import MusicPlayer from "@/components/MusicPlayer.vue";
import BlackDialog from "@/components/ui/BlackDialog.vue";
import BlackInput from "@/components/ui/BlackInput.vue";
import BlackSelect from "@/components/ui/BlackSelect.vue";
import BlackSwitch from "@/components/ui/BlackSwitch.vue";
import BlackInput from "@/components/ui/BlackInput.vue";
import MusicPlayer from "@/components/MusicPlayer.vue";
import { compact } from "lodash";
import { httpDownload, httpGet, httpPost } from "@/utils/http";
import { closeLoading, showLoading, showMessageError, showMessageOK } from "@/utils/dialog";
import { checkSession } from "@/store/cache";
import { ElMessage, ElMessageBox } from "element-plus";
import { formatTime, replaceImg } from "@/utils/libs";
import Clipboard from "clipboard";
import BlackDialog from "@/components/ui/BlackDialog.vue";
import Compressor from "compressorjs";
import Generating from "@/components/ui/Generating.vue";
import { checkSession } from "@/store/cache";
import { useSharedStore } from "@/store/sharedata";
import { closeLoading, showLoading, showMessageError, showMessageOK } from "@/utils/dialog";
import { httpDownload, httpGet, httpPost } from "@/utils/http";
import { formatTime, replaceImg } from "@/utils/libs";
import { Delete, InfoFilled } from "@element-plus/icons-vue";
import Clipboard from "clipboard";
import Compressor from "compressorjs";
import { ElMessage, ElMessageBox } from "element-plus";
import { compact } from "lodash";
import { nextTick, onMounted, onUnmounted, ref, watch } from "vue";
const custom = ref(false);
const models = ref([
@@ -455,7 +455,7 @@ const merge = (item) => {
// 下载歌曲
const download = (item) => {
const url = replaceImg(item.audio_url);
const downloadURL = `${process.env.VUE_APP_API_HOST}/api/download?url=${url}`;
const downloadURL = `${import.meta.env.VITE_API_HOST}/api/download?url=${url}`;
// parse filename
const urlObj = new URL(url);
const fileName = urlObj.pathname.split("/").pop();

4
web/src/views/admin/Login.vue
View File

@@ -68,8 +68,8 @@ import { useRouter } from 'vue-router'
const router = useRouter()
const title = ref('Geek-AI Console')
const username = ref(process.env.VUE_APP_ADMIN_USER)
const password = ref(process.env.VUE_APP_ADMIN_PASS)
const username = ref(import.meta.env.VITE_ADMIN_USER)
const password = ref(import.meta.env.VITE_ADMIN_PASS)
const logo = ref('')
const enableVerify = ref(false)
const captchaRef = ref(null)

2
web/src/views/mobile/Index.vue
View File

@@ -93,7 +93,7 @@ import { showNotify } from 'vant'
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
const title = ref(process.env.VUE_APP_TITLE)
const title = ref(import.meta.env.VITE_TITLE)
const router = useRouter()
const isLogin = ref(false)
const apps = ref([])

65
web/vite.config.js
View File

@@ -1,27 +1,46 @@
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { defineConfig, loadEnv } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
server: {
port: 8888,
proxy: {
'/api': {
target: process.env.VUE_APP_API_HOST || 'http://localhost:8080', // Fallback if env var is not set
changeOrigin: true,
ws: true,
},
'/static/upload/': {
target: process.env.VUE_APP_API_HOST || 'http://localhost:8080', // Fallback if env var is not set
changeOrigin: true,
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd())
const apiHost = env.VITE_API_HOST || 'http://localhost:5678'
return {
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
},
});
css: {
preprocessorOptions: {
stylus: {
additionalData: `@import "@/assets/css/index.styl";`,
},
},
},
optimizeDeps: {
include: ['stylus'],
},
server: {
port: 8888,
...(process.env.NODE_ENV === 'development'
? {
proxy: {
'/api': {
target: apiHost,
changeOrigin: true,
ws: true,
},
'/static/upload/': {
target: apiHost,
changeOrigin: true,
},
},
}
: {}),
},
}
})