xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2025-09-17 16:56:38 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fine-tune page styles, use iframe to load external page in navigation bar

Browse Source
This commit is contained in:
RockYang 2024-12-25 11:10:23 +08:00
parent 989b4a64d6
commit cbf06eea24
18 changed files with 959 additions and 1090 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/assets/css/luma.styl
View File

@ -277,7 +277,7 @@
} }
.pagination { .pagination {
padding 10px 20px margin-top 20px
display flex display flex
justify-content center justify-content center
} }

3
web/src/assets/css/main.styl
View File

@ -58,7 +58,8 @@ body {
.container { .container {
padding: 15px 20px 30px 20px; padding: 15px 20px 30px 20px;
background: #ffffff; background: #ffffff;
margin-bottom 80px margin-bottom 20px
max-width 100%
} }
.crumbs { .crumbs {

2
web/src/assets/css/suno.styl
View File

@ -382,7 +382,7 @@
} }
.pagination { .pagination {
padding 10px 20px margin-top 20px
display flex display flex
justify-content center justify-content center
} }

29
web/src/views/ExternalPage.vue
View File

@ -1,32 +1,37 @@
<template> <template>
<div class="page-iframe" v-loading="loading" <div
class="page-iframe"
v-loading="loading"
style="--el-color-primary: #47fff1" style="--el-color-primary: #47fff1"
element-loading-text="页面正在加载中..." element-loading-text="页面正在加载中..."
element-loading-background="rgba(122, 122, 122, 0.8)"> element-loading-background="rgba(122, 122, 122, 0.8)"
>
<iframe :src="externalUrl" class="iframe" @load="onIframeLoad"></iframe> <iframe :src="externalUrl" class="iframe" @load="onIframeLoad"></iframe>
</div> </div>
</template> </template>
<script setup> <script setup>
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import {computed, ref} from "vue"; import { computed, ref, onMounted } from "vue";
const loading = ref(true) const loading = ref(true);
const router = useRouter() const router = useRouter();
const externalUrl = computed(() => { const externalUrl = computed(() => {
loading.value = true loading.value = true;
return router.currentRoute.value.query.url || 'about:blank' return router.currentRoute.value.query.url || "about:blank";
}) });
// 设置标题
document.title = router.currentRoute.value.query.title;
const onIframeLoad = () => { const onIframeLoad = () => {
loading.value = false loading.value = false;
} };
</script> </script>
<style scoped lang="stylus"> <style scoped lang="stylus">
.page-iframe { .page-iframe {
width 100% width 100%
height 100% height 100vh
overflow hidden overflow hidden
.iframe { .iframe {

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

@ -61,7 +61,7 @@
}" }"
> >
<a @click="changeNav(item)"> <a @click="changeNav(item)">
<span v-if="item.icon.startsWith('icon')"> <span v-if="item.icon.startsWith('icon')" class="mr-2">
<i class="iconfont" :class="item.icon"></i> <i class="iconfont" :class="item.icon"></i>
</span> </span>
<el-image :src="item.icon" style="width: 20px; height: 20px" v-else /> <el-image :src="item.icon" style="width: 20px; height: 20px" v-else />
@ -216,9 +216,10 @@ if (curPath.value === "/external") {
} }
const changeNav = (item) => { const changeNav = (item) => {
curPath.value = item.url; curPath.value = item.url;
console.log(item.url);
if (item.url.indexOf("http") !== -1) { if (item.url.indexOf("http") !== -1) {
// 外部链接 // 外部链接
window.open(item.url, "_blank"); router.push({ path: "/external", query: { url: item.url, title: item.name } });
} else { } else {
// 路由切换，确保路径变化 // 路由切换，确保路径变化
if (router.currentRoute.value.path !== item.url) { if (router.currentRoute.value.path !== item.url) {

23
web/src/views/Invitation.vue
View File

@ -2,13 +2,12 @@
<div class="custom-scroll"> <div class="custom-scroll">
<div class="page-invitation"> <div class="page-invitation">
<div class="inner"> <div class="inner">
<h2>会员推广计划</h2> <h2 class="text-2xl p-4 font-bold">会员推广计划</h2>
<div class="share-box"> <div class="share-box">
<div class="info"> <div class="info">
我们非常欢迎您把此应用分享给您身边的朋友，分享成功注册后您和被邀请人都将获得 我们非常欢迎您把此应用分享给您身边的朋友，分享成功注册后您和被邀请人都将获得
<strong>{{ invitePower }}</strong> <strong>{{ invitePower }}</strong>
算力额度作为奖励。 算力额度作为奖励。 你可以保存下面的二维码或者直接复制分享您的专属推广链接发送给微信好友。
你可以保存下面的二维码或者直接复制分享您的专属推广链接发送给微信好友。
</div> </div>
<div class="invite-qrcode"> <div class="invite-qrcode">
@ -17,13 +16,7 @@
<div class="invite-url"> <div class="invite-url">
<span>{{ inviteURL }}</span> <span>{{ inviteURL }}</span>
<el-button <el-button type="primary" plain class="copy-link" :data-clipboard-text="inviteURL">复制链接</el-button>
type="primary"
plain
class="copy-link"
:data-clipboard-text="inviteURL"
>复制链接</el-button
>
</div> </div>
</div> </div>
@ -83,7 +76,7 @@
</el-row> </el-row>
</div> </div>
<div class="box-card"> <div class="box-card">
<h2>您推荐的用户</h2> <h2 class="text-xl pb-4">您推荐的用户</h2>
<div class="invite-logs"> <div class="invite-logs">
<invite-list v-if="isLogin" /> <invite-list v-if="isLogin" />
@ -139,17 +132,13 @@ const initData = () => {
if (hits.value > 0) { if (hits.value > 0) {
rate.value = ((regNum.value / hits.value) * 100).toFixed(2); rate.value = ((regNum.value / hits.value) * 100).toFixed(2);
} }
QRCode.toDataURL( QRCode.toDataURL(text, { width: 400, height: 400, margin: 2 }, (error, url) => {
text,
{ width: 400, height: 400, margin: 2 },
(error, url) => {
if (error) { if (error) {
console.error(error); console.error(error);
} else { } else {
qrImg.value = url; qrImg.value = url;
} }
} });
);
inviteURL.value = text; inviteURL.value = text;
}) })
.catch((e) => { .catch((e) => {

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

@ -54,7 +54,7 @@
<div class="container"> <div class="container">
<div v-if="item.progress === 100"> <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" @click="play(item)"> <button class="play flex justify-center items-center" @click="play(item)">
<img src="/images/play.svg" alt="" /> <img src="/images/play.svg" alt="" />
</button> </button>
</div> </div>

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

@ -158,7 +158,7 @@ const fetchData = () => {
display flex display flex
justify-content center justify-content center
width 100% width 100%
padding 20px margin-top 20px
} }
} }
} }

184
web/src/views/admin/ApiKey.vue
View File

@ -1,14 +1,8 @@
<template> <template>
<div class="container list" v-loading="loading"> <div class="container list" v-loading="loading">
<div class="handle-box"> <div class="handle-box">
<el-select v-model="query.type" placeholder="类型" class="handle-input"> <el-select v-model="query.type" placeholder="类型" class="handle-input">
<el-option <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value" />
v-for="item in types"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select> </el-select>
<el-button :icon="Search" @click="fetchData">搜索</el-button> <el-button :icon="Search" @click="fetchData">搜索</el-button>
@ -19,7 +13,7 @@
</div> </div>
<el-row> <el-row>
<el-table :data="items" :row-key="row => row.id" table-layout="auto"> <el-table :data="items" :row-key="(row) => row.id" table-layout="auto">
<el-table-column prop="name" label="名称" /> <el-table-column prop="name" label="名称" />
<el-table-column prop="value" label="API KEY"> <el-table-column prop="value" label="API KEY">
<template #default="scope"> <template #default="scope">
@ -46,7 +40,7 @@
<el-table-column label="最后使用时间"> <el-table-column label="最后使用时间">
<template #default="scope"> <template #default="scope">
<span v-if="scope.row['last_used_at']">{{ scope.row['last_used_at'] }}</span> <span v-if="scope.row['last_used_at']">{{ scope.row["last_used_at"] }}</span>
<el-tag v-else>未使用</el-tag> <el-tag v-else>未使用</el-tag>
</template> </template>
</el-table-column> </el-table-column>
@ -69,29 +63,21 @@
</el-table> </el-table>
</el-row> </el-row>
<el-dialog <el-dialog v-model="showDialog" :close-on-click-modal="false" :title="title">
v-model="showDialog"
:close-on-click-modal="false"
:title="title"
>
<el-form :model="item" label-width="120px" ref="formRef" :rules="rules"> <el-form :model="item" label-width="120px" ref="formRef" :rules="rules">
<el-form-item label="名称：" prop="name"> <el-form-item label="名称：" prop="name">
<el-input v-model="item.name" autocomplete="off" /> <el-input v-model="item.name" autocomplete="off" />
</el-form-item> </el-form-item>
<el-form-item label="类型：" prop="type"> <el-form-item label="类型：" prop="type">
<el-select v-model="item.type" placeholder="请选择类型" @change="changeType"> <el-select v-model="item.type" placeholder="请选择类型" @change="changeType">
<el-option v-for="item in types" :value="item.value" :label="item.label" :key="item.value">{{ <el-option v-for="item in types" :value="item.value" :label="item.label" :key="item.value">{{ item.label }} </el-option>
item.label
}}
</el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="API KEY：" prop="value"> <el-form-item label="API KEY：" prop="value">
<el-input v-model="item.value" autocomplete="off" /> <el-input v-model="item.value" autocomplete="off" />
</el-form-item> </el-form-item>
<el-form-item label="API URL：" prop="api_url"> <el-form-item label="API URL：" prop="api_url">
<el-input v-model="item.api_url" autocomplete="off" <el-input v-model="item.api_url" autocomplete="off" placeholder="只填 BASE URL 即可，如：https://api.openai.com 或者 wss://api.openai.com" />
placeholder="只填 BASE URL 即可，如：https://api.openai.com 或者 wss://api.openai.com"/>
</el-form-item> </el-form-item>
<!-- <el-form-item label="代理地址：" prop="proxy_url">--> <!-- <el-form-item label="代理地址：" prop="proxy_url">-->
@ -123,21 +109,22 @@ import {DocumentCopy, Plus, ShoppingCart, Search} from "@element-plus/icons-vue"
import ClipboardJS from "clipboard"; import ClipboardJS from "clipboard";
// 变量定义 // 变量定义
const items = ref([]) const items = ref([]);
const query = ref({type: ''}) const query = ref({ type: "" });
const item = ref({ const item = ref({
enabled: true, api_url: "" enabled: true,
}) api_url: "",
const showDialog = ref(false) });
const showDialog = ref(false);
const rules = reactive({ const rules = reactive({
name: [{required: true, message: '请输入名称', trigger: 'change',}], name: [{ required: true, message: "请输入名称", trigger: "change" }],
type: [{required: true, message: '请选择用途', trigger: 'change',}], type: [{ required: true, message: "请选择用途", trigger: "change" }],
value: [{required: true, message: '请输入 API KEY 值', trigger: 'change',}] value: [{ required: true, message: "请输入 API KEY 值", trigger: "change" }],
}) });
const loading = ref(true) const loading = ref(true);
const formRef = ref(null) const formRef = ref(null);
const title = ref("") const title = ref("");
const types = ref([ const types = ref([
{ label: "对话", value: "chat" }, { label: "对话", value: "chat" },
{ label: "Midjourney", value: "mj" }, { label: "Midjourney", value: "mj" },
@ -146,117 +133,124 @@ const types = ref([
{ label: "Suno文生歌", value: "suno" }, { label: "Suno文生歌", value: "suno" },
{ label: "Luma视频", value: "luma" }, { label: "Luma视频", value: "luma" },
{ label: "Realtime API", value: "realtime" }, { label: "Realtime API", value: "realtime" },
]) ]);
const isEdit = ref(false) const isEdit = ref(false);
const clipboard = ref(null) const clipboard = ref(null);
onMounted(() => { onMounted(() => {
clipboard.value = new ClipboardJS('.copy-key'); clipboard.value = new ClipboardJS(".copy-key");
clipboard.value.on('success', () => { clipboard.value.on("success", () => {
ElMessage.success('复制成功！'); ElMessage.success("复制成功！");
}) });
clipboard.value.on('error', () => { clipboard.value.on("error", () => {
ElMessage.error('复制失败！'); ElMessage.error("复制失败！");
}) });
fetchData() fetchData();
}) });
onUnmounted(() => { onUnmounted(() => {
clipboard.value.destroy() clipboard.value.destroy();
}) });
const changeType = (event) => { const changeType = (event) => {
if (isEdit.value) { if (isEdit.value) {
return return;
} }
if (event === 'realtime') { if (event === "realtime") {
item.value.api_url = "wss://api.geekai.pro" item.value.api_url = "wss://api.geekai.pro";
} else { } else {
item.value.api_url = "https://api.geekai.pro" item.value.api_url = "https://api.geekai.pro";
}
} }
};
const getTypeName = (type) => { const getTypeName = (type) => {
for (let v of types.value) { for (let v of types.value) {
if (v.value === type) { if (v.value === type) {
return v.label return v.label;
} }
} }
return "" return "";
} };
// 获取数据 // 获取数据
const fetchData = () => { const fetchData = () => {
httpGet('/api/admin/apikey/list', query.value).then((res) => { httpGet("/api/admin/apikey/list", query.value)
.then((res) => {
if (res.data) { if (res.data) {
// 初始化数据 // 初始化数据
const arr = res.data; const arr = res.data;
for (let i = 0; i < arr.length; i++) { for (let i = 0; i < arr.length; i++) {
arr[i].last_used_at = dateFormat(arr[i].last_used_at) arr[i].last_used_at = dateFormat(arr[i].last_used_at);
} }
items.value = arr items.value = arr;
} }
loading.value = false loading.value = false;
}).catch(() => {
ElMessage.error("获取数据失败");
}) })
} .catch(() => {
ElMessage.error("获取数据失败");
});
};
const add = function () { const add = function () {
showDialog.value = true showDialog.value = true;
title.value = "新增 API KEY" title.value = "新增 API KEY";
isEdit.value = false isEdit.value = false;
} };
const edit = function (row) { const edit = function (row) {
showDialog.value = true showDialog.value = true;
title.value = "修改 API KEY" title.value = "修改 API KEY";
item.value = row item.value = row;
isEdit.value = true isEdit.value = true;
} };
const save = function () { const save = function () {
formRef.value.validate((valid) => { formRef.value.validate((valid) => {
if (valid) { if (valid) {
showDialog.value = false showDialog.value = false;
httpPost('/api/admin/apikey/save', item.value).then((res) => { httpPost("/api/admin/apikey/save", item.value)
ElMessage.success('操作成功！') .then((res) => {
if (!item.value['id']) { ElMessage.success("操作成功！");
const newItem = res.data if (!item.value["id"]) {
newItem.last_used_at = dateFormat(newItem.last_used_at) const newItem = res.data;
items.value.push(newItem) newItem.last_used_at = dateFormat(newItem.last_used_at);
items.value.push(newItem);
} }
}).catch((e) => {
ElMessage.error('操作失败，' + e.message)
}) })
.catch((e) => {
ElMessage.error("操作失败，" + e.message);
});
} else { } else {
return false return false;
}
})
} }
});
};
const remove = function (row) { const remove = function (row) {
httpGet('/api/admin/apikey/remove?id=' + row.id).then(() => { httpGet("/api/admin/apikey/remove?id=" + row.id)
ElMessage.success("删除成功！") .then(() => {
ElMessage.success("删除成功！");
items.value = removeArrayItem(items.value, row, (v1, v2) => { items.value = removeArrayItem(items.value, row, (v1, v2) => {
return v1.id === v2.id return v1.id === v2.id;
});
}) })
}).catch((e) => { .catch((e) => {
ElMessage.error("删除失败：" + e.message) ElMessage.error("删除失败：" + e.message);
}) });
} };
const set = (filed, row) => { const set = (filed, row) => {
httpPost('/api/admin/apikey/set', {id: row.id, filed: filed, value: row[filed]}).then(() => { httpPost("/api/admin/apikey/set", { id: row.id, filed: filed, value: row[filed] })
ElMessage.success("操作成功！") .then(() => {
}).catch(e => { ElMessage.success("操作成功！");
ElMessage.error("操作失败：" + e.message)
}) })
} .catch((e) => {
ElMessage.error("操作失败：" + e.message);
});
};
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>

129
web/src/views/admin/ChatList.vue
View File

@ -3,18 +3,8 @@
<el-tabs v-model="activeName" @tab-change="handleChange"> <el-tabs v-model="activeName" @tab-change="handleChange">
<el-tab-pane label="对话列表" name="chat" v-loading="data.chat.loading"> <el-tab-pane label="对话列表" name="chat" v-loading="data.chat.loading">
<div class="handle-box"> <div class="handle-box">
<el-input <el-input v-model.number="data.chat.query.user_id" placeholder="账户ID" class="handle-input mr10" @keyup="searchChat($event)"></el-input>
v-model.number="data.chat.query.user_id" <el-input v-model="data.chat.query.title" placeholder="对话标题" class="handle-input mr10" @keyup="searchChat($event)"></el-input>
placeholder="账户ID"
class="handle-input mr10"
@keyup="searchChat($event)"
></el-input>
<el-input
v-model="data.chat.query.title"
placeholder="对话标题"
class="handle-input mr10"
@keyup="searchChat($event)"
></el-input>
<el-date-picker <el-date-picker
v-model="data.chat.query.created_at" v-model="data.chat.query.created_at"
type="daterange" type="daterange"
@ -22,24 +12,13 @@
end-placeholder="结束日期" end-placeholder="结束日期"
format="YYYY-MM-DD" format="YYYY-MM-DD"
value-format="YYYY-MM-DD" value-format="YYYY-MM-DD"
style=" style="margin-right: 10px; width: 200px; position: relative; top: 3px"
margin-right: 10px;
width: 200px;
position: relative;
top: 3px;
"
/> />
<el-button type="primary" :icon="Search" @click="fetchChatData" <el-button type="primary" :icon="Search" @click="fetchChatData">搜索</el-button>
>搜索</el-button
>
</div> </div>
<el-row> <el-row>
<el-table <el-table :data="data.chat.items" :row-key="(row) => row.id" table-layout="auto">
:data="data.chat.items"
:row-key="(row) => row.id"
table-layout="auto"
>
<el-table-column prop="user_id" label="账户ID" /> <el-table-column prop="user_id" label="账户ID" />
<el-table-column prop="username" label="账户" /> <el-table-column prop="username" label="账户" />
<el-table-column label="图标"> <el-table-column label="图标">
@ -65,16 +44,8 @@
<el-table-column label="操作" width="180"> <el-table-column label="操作" width="180">
<template #default="scope"> <template #default="scope">
<el-button <el-button size="small" type="primary" @click="showMessages(scope.row)">查看</el-button>
size="small" <el-popconfirm title="确定要删除当前记录吗?" @confirm="removeChat(scope.row)">
type="primary"
@click="showMessages(scope.row)"
>查看</el-button
>
<el-popconfirm
title="确定要删除当前记录吗?"
@confirm="removeChat(scope.row)"
>
<template #reference> <template #reference>
<el-button size="small" type="danger">删除</el-button> <el-button size="small" type="danger">删除</el-button>
</template> </template>
@ -99,24 +70,9 @@
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="消息记录" name="message"> <el-tab-pane label="消息记录" name="message">
<div class="handle-box"> <div class="handle-box">
<el-input <el-input v-model.number="data.message.query.user_id" placeholder="账户ID" class="handle-input mr10" @keyup="searchMessage($event)"></el-input>
v-model.number="data.message.query.user_id" <el-input v-model="data.message.query.content" placeholder="消息内容" class="handle-input mr10" @keyup="searchMessage($event)"></el-input>
placeholder="账户ID" <el-input v-model="data.message.query.model" placeholder="模型" class="handle-input mr10" @keyup="searchMessage($event)"></el-input>
class="handle-input mr10"
@keyup="searchMessage($event)"
></el-input>
<el-input
v-model="data.message.query.content"
placeholder="消息内容"
class="handle-input mr10"
@keyup="searchMessage($event)"
></el-input>
<el-input
v-model="data.message.query.model"
placeholder="模型"
class="handle-input mr10"
@keyup="searchMessage($event)"
></el-input>
<el-date-picker <el-date-picker
v-model="data.message.query.created_at" v-model="data.message.query.created_at"
type="daterange" type="daterange"
@ -124,24 +80,13 @@
end-placeholder="结束日期" end-placeholder="结束日期"
format="YYYY-MM-DD" format="YYYY-MM-DD"
value-format="YYYY-MM-DD" value-format="YYYY-MM-DD"
style=" style="margin-right: 10px; width: 200px; position: relative; top: 3px"
margin-right: 10px;
width: 200px;
position: relative;
top: 3px;
"
/> />
<el-button type="primary" :icon="Search" @click="fetchMessageData" <el-button type="primary" :icon="Search" @click="fetchMessageData">搜索</el-button>
>搜索</el-button
>
</div> </div>
<el-row> <el-row>
<el-table <el-table :data="data.message.items" :row-key="(row) => row.id" table-layout="auto">
:data="data.message.items"
:row-key="(row) => row.id"
table-layout="auto"
>
<el-table-column prop="user_id" label="账户ID" /> <el-table-column prop="user_id" label="账户ID" />
<el-table-column prop="username" label="账户" /> <el-table-column prop="username" label="账户" />
<el-table-column label="角色"> <el-table-column label="角色">
@ -153,11 +98,7 @@
<el-table-column label="消息内容"> <el-table-column label="消息内容">
<template #default="scope"> <template #default="scope">
<el-text <el-text style="width: 200px" truncated @click="showContent(scope.row.content)">
style="width: 200px"
truncated
@click="showContent(scope.row.content)"
>
{{ scope.row.content }} {{ scope.row.content }}
</el-text> </el-text>
</template> </template>
@ -173,16 +114,8 @@
<el-table-column label="操作" width="180"> <el-table-column label="操作" width="180">
<template #default="scope"> <template #default="scope">
<el-button <el-button size="small" type="primary" @click="showContent(scope.row.content)">查看</el-button>
size="small" <el-popconfirm title="确定要删除当前记录吗?" @confirm="removeMessage(scope.row)">
type="primary"
@click="showContent(scope.row.content)"
>查看</el-button
>
<el-popconfirm
title="确定要删除当前记录吗?"
@confirm="removeMessage(scope.row)"
>
<template #reference> <template #reference>
<el-button size="small" type="danger">删除</el-button> <el-button size="small" type="danger">删除</el-button>
</template> </template>
@ -207,31 +140,17 @@
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<el-dialog <el-dialog v-model="showContentDialog" title="消息详情" class="chat-dialog" style="--el-dialog-width: 60%">
v-model="showContentDialog"
title="消息详情"
class="chat-dialog"
style="--el-dialog-width: 60%"
>
<div class="chat-detail"> <div class="chat-detail">
<div class="chat-line" v-html="dialogContent"></div> <div class="chat-line" v-html="dialogContent"></div>
</div> </div>
</el-dialog> </el-dialog>
<el-dialog <el-dialog v-model="showChatItemDialog" title="对话详情" class="chat-dialog" style="--el-dialog-width: 60%">
v-model="showChatItemDialog"
title="对话详情"
class="chat-dialog"
style="--el-dialog-width: 60%"
>
<div class="chat-box chat-page"> <div class="chat-box chat-page">
<div v-for="item in messages" :key="item.id"> <div v-for="item in messages" :key="item.id">
<chat-prompt v-if="item.type === 'prompt'" :data="item" /> <chat-prompt v-if="item.type === 'prompt'" :data="item" />
<chat-reply <chat-reply v-else-if="item.type === 'reply'" :read-only="true" :data="item" />
v-else-if="item.type === 'reply'"
:read-only="true"
:data="item"
/>
</div> </div>
</div> </div>
<!-- end chat box --> <!-- end chat box -->
@ -258,7 +177,7 @@ const data = ref({
total: 0, total: 0,
page: 1, page: 1,
pageSize: 15, pageSize: 15,
loading: true loading: true,
}, },
message: { message: {
items: [], items: [],
@ -266,8 +185,8 @@ const data = ref({
total: 0, total: 0,
page: 1, page: 1,
pageSize: 15, pageSize: 15,
loading: true loading: true,
} },
}); });
const activeName = ref("chat"); const activeName = ref("chat");
@ -376,7 +295,7 @@ const md = require("markdown-it")({
const preCode = md.utils.escapeHtml(str); const preCode = md.utils.escapeHtml(str);
// 将代码包裹在 pre 中 // 将代码包裹在 pre 中
return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code></pre>`; return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code></pre>`;
} },
}); });
md.use(mathjaxPlugin); md.use(mathjaxPlugin);
@ -431,7 +350,7 @@ const showMessages = (row) => {
} }
.pagination { .pagination {
padding 20px 0 margin-top 20px
display flex display flex
justify-content right justify-content right
} }

252
web/src/views/admin/ImageList.vue
View File

@ -3,10 +3,8 @@
<el-tabs v-model="activeName" @tab-change="handleChange"> <el-tabs v-model="activeName" @tab-change="handleChange">
<el-tab-pane label="Midjourney" name="mj" v-loading="data.mj.loading"> <el-tab-pane label="Midjourney" name="mj" v-loading="data.mj.loading">
<div class="handle-box"> <div class="handle-box">
<el-input v-model="data.mj.query.username" placeholder="用户名" class="handle-input mr10" <el-input v-model="data.mj.query.username" placeholder="用户名" class="handle-input mr10" @keyup="search($event, 'mj')" clearable />
@keyup="search($event,'mj')" clearable /> <el-input v-model="data.mj.query.prompt" placeholder="提示词" class="handle-input mr10" @keyup="search($event, 'mj')" clearable />
<el-input v-model="data.mj.query.prompt" placeholder="提示词" class="handle-input mr10"
@keyup="search($event,'mj')" clearable />
<el-date-picker <el-date-picker
v-model="data.mj.query.created_at" v-model="data.mj.query.created_at"
type="daterange" type="daterange"
@ -14,14 +12,14 @@
end-placeholder="结束日期" end-placeholder="结束日期"
format="YYYY-MM-DD" format="YYYY-MM-DD"
value-format="YYYY-MM-DD" value-format="YYYY-MM-DD"
style="margin-right: 10px;width: 200px; position: relative;top:3px;" style="margin-right: 10px; width: 200px; position: relative; top: 3px"
/> />
<el-button type="primary" :icon="Search" @click="fetchMjData">搜索</el-button> <el-button type="primary" :icon="Search" @click="fetchMjData">搜索</el-button>
</div> </div>
<div v-if="data.mj.items.length > 0"> <div v-if="data.mj.items.length > 0">
<el-row> <el-row>
<el-table :data="data.mj.items" :row-key="row => row.id" table-layout="auto"> <el-table :data="data.mj.items" :row-key="(row) => row.id" table-layout="auto">
<el-table-column prop="user_id" label="用户ID" /> <el-table-column prop="user_id" label="用户ID" />
<el-table-column label="任务类型"> <el-table-column label="任务类型">
<template #default="scope"> <template #default="scope">
@ -42,13 +40,7 @@
</el-table-column> </el-table-column>
<el-table-column label="提示词"> <el-table-column label="提示词">
<template #default="scope"> <template #default="scope">
<el-popover <el-popover placement="top-start" title="绘画提示词" :width="300" trigger="hover" :content="scope.row.prompt">
placement="top-start"
title="绘画提示词"
:width="300"
trigger="hover"
:content="scope.row.prompt"
>
<template #reference> <template #reference>
<span>{{ substr(scope.row.prompt, 20) }}</span> <span>{{ substr(scope.row.prompt, 20) }}</span>
</template> </template>
@ -57,7 +49,7 @@
</el-table-column> </el-table-column>
<el-table-column label="创建时间"> <el-table-column label="创建时间">
<template #default="scope"> <template #default="scope">
<span>{{ dateFormat(scope.row['created_at']) }}</span> <span>{{ dateFormat(scope.row["created_at"]) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="失败原因"> <el-table-column label="失败原因">
@ -90,25 +82,24 @@
</el-row> </el-row>
<div class="pagination"> <div class="pagination">
<el-pagination v-if="data.mj.total > 0" background <el-pagination
v-if="data.mj.total > 0"
background
layout="total,prev, pager, next" layout="total,prev, pager, next"
:hide-on-single-page="true" :hide-on-single-page="true"
v-model:current-page="data.mj.page" v-model:current-page="data.mj.page"
v-model:page-size="data.mj.pageSize" v-model:page-size="data.mj.pageSize"
@current-change="fetchMjData()" @current-change="fetchMjData()"
:total="data.mj.total"/> :total="data.mj.total"
/>
</div> </div>
</div> </div>
<el-empty v-else /> <el-empty v-else />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="Stable-Diffusion" name="sd" v-loading="data.sd.loading"> <el-tab-pane label="Stable-Diffusion" name="sd" v-loading="data.sd.loading">
<div class="handle-box"> <div class="handle-box">
<el-input v-model="data.sd.query.username" placeholder="用户名" class="handle-input mr10" <el-input v-model="data.sd.query.username" placeholder="用户名" class="handle-input mr10" @keyup="search($event, 'sd')" clearable />
@keyup="search($event, 'sd')" clearable /> <el-input v-model="data.sd.query.prompt" placeholder="提示词" class="handle-input mr10" @keyup="search($event, 'sd')" clearable />
<el-input v-model="data.sd.query.prompt" placeholder="提示词" class="handle-input mr10"
@keyup="search($event, 'sd')" clearable />
<el-date-picker <el-date-picker
v-model="data.sd.query.created_at" v-model="data.sd.query.created_at"
type="daterange" type="daterange"
@ -116,14 +107,14 @@
end-placeholder="结束日期" end-placeholder="结束日期"
format="YYYY-MM-DD" format="YYYY-MM-DD"
value-format="YYYY-MM-DD" value-format="YYYY-MM-DD"
style="margin-right: 10px;width: 200px; position: relative;top:3px;" style="margin-right: 10px; width: 200px; position: relative; top: 3px"
/> />
<el-button type="primary" :icon="Search" @click="fetchSdData">搜索</el-button> <el-button type="primary" :icon="Search" @click="fetchSdData">搜索</el-button>
</div> </div>
<div v-if="data.sd.items.length > 0"> <div v-if="data.sd.items.length > 0">
<el-row> <el-row>
<el-table :data="data.sd.items" :row-key="row => row.id" table-layout="auto"> <el-table :data="data.sd.items" :row-key="(row) => row.id" table-layout="auto">
<el-table-column prop="user_id" label="用户ID" /> <el-table-column prop="user_id" label="用户ID" />
<el-table-column prop="progress" label="任务进度"> <el-table-column prop="progress" label="任务进度">
<template #default="scope"> <template #default="scope">
@ -139,13 +130,7 @@
</el-table-column> </el-table-column>
<el-table-column label="提示词"> <el-table-column label="提示词">
<template #default="scope"> <template #default="scope">
<el-popover <el-popover placement="top-start" title="绘画提示词" :width="300" trigger="hover" :content="scope.row.prompt">
placement="top-start"
title="绘画提示词"
:width="300"
trigger="hover"
:content="scope.row.prompt"
>
<template #reference> <template #reference>
<span>{{ substr(scope.row.prompt, 20) }}</span> <span>{{ substr(scope.row.prompt, 20) }}</span>
</template> </template>
@ -154,7 +139,7 @@
</el-table-column> </el-table-column>
<el-table-column label="创建时间"> <el-table-column label="创建时间">
<template #default="scope"> <template #default="scope">
<span>{{ dateFormat(scope.row['created_at']) }}</span> <span>{{ dateFormat(scope.row["created_at"]) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="失败原因"> <el-table-column label="失败原因">
@ -187,24 +172,24 @@
</el-row> </el-row>
<div class="pagination"> <div class="pagination">
<el-pagination v-if="data.sd.total > 0" background <el-pagination
v-if="data.sd.total > 0"
background
layout="total,prev, pager, next" layout="total,prev, pager, next"
:hide-on-single-page="true" :hide-on-single-page="true"
v-model:current-page="data.sd.page" v-model:current-page="data.sd.page"
v-model:page-size="data.sd.pageSize" v-model:page-size="data.sd.pageSize"
@current-change="fetchSdData()" @current-change="fetchSdData()"
:total="data.sd.total"/> :total="data.sd.total"
/>
</div> </div>
</div> </div>
<el-empty v-else /> <el-empty v-else />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="DALL-E" name="dall"> <el-tab-pane label="DALL-E" name="dall">
<div class="handle-box"> <div class="handle-box">
<el-input v-model="data.dall.query.username" placeholder="用户名" class="handle-input mr10" <el-input v-model="data.dall.query.username" placeholder="用户名" class="handle-input mr10" @keyup="search($event, 'dall')" clearable />
@keyup="search($event,'dall')" clearable /> <el-input v-model="data.dall.query.prompt" placeholder="提示词" class="handle-input mr10" @keyup="search($event, 'dall')" clearable />
<el-input v-model="data.dall.query.prompt" placeholder="提示词" class="handle-input mr10"
@keyup="search($event, 'dall')" clearable />
<el-date-picker <el-date-picker
v-model="data.dall.query.created_at" v-model="data.dall.query.created_at"
type="daterange" type="daterange"
@ -212,14 +197,14 @@
end-placeholder="结束日期" end-placeholder="结束日期"
format="YYYY-MM-DD" format="YYYY-MM-DD"
value-format="YYYY-MM-DD" value-format="YYYY-MM-DD"
style="margin-right: 10px;width: 200px; position: relative;top:3px;" style="margin-right: 10px; width: 200px; position: relative; top: 3px"
/> />
<el-button type="primary" :icon="Search" @click="fetchDallData">搜索</el-button> <el-button type="primary" :icon="Search" @click="fetchDallData">搜索</el-button>
</div> </div>
<div v-if="data.dall.items.length > 0"> <div v-if="data.dall.items.length > 0">
<el-row> <el-row>
<el-table :data="data.dall.items" :row-key="row => row.id" table-layout="auto"> <el-table :data="data.dall.items" :row-key="(row) => row.id" table-layout="auto">
<el-table-column prop="user_id" label="用户ID" /> <el-table-column prop="user_id" label="用户ID" />
<el-table-column prop="progress" label="任务进度"> <el-table-column prop="progress" label="任务进度">
<template #default="scope"> <template #default="scope">
@ -235,13 +220,7 @@
</el-table-column> </el-table-column>
<el-table-column label="提示词"> <el-table-column label="提示词">
<template #default="scope"> <template #default="scope">
<el-popover <el-popover placement="top-start" title="绘画提示词" :width="300" trigger="hover" :content="scope.row.prompt">
placement="top-start"
title="绘画提示词"
:width="300"
trigger="hover"
:content="scope.row.prompt"
>
<template #reference> <template #reference>
<span>{{ substr(scope.row.prompt, 20) }}</span> <span>{{ substr(scope.row.prompt, 20) }}</span>
</template> </template>
@ -250,7 +229,7 @@
</el-table-column> </el-table-column>
<el-table-column label="创建时间"> <el-table-column label="创建时间">
<template #default="scope"> <template #default="scope">
<span>{{ dateFormat(scope.row['created_at']) }}</span> <span>{{ dateFormat(scope.row["created_at"]) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="失败原因"> <el-table-column label="失败原因">
@ -283,36 +262,25 @@
</el-row> </el-row>
<div class="pagination"> <div class="pagination">
<el-pagination v-if="data.dall.total > 0" background <el-pagination
v-if="data.dall.total > 0"
background
layout="total,prev, pager, next" layout="total,prev, pager, next"
:hide-on-single-page="true" :hide-on-single-page="true"
v-model:current-page="data.dall.page" v-model:current-page="data.dall.page"
v-model:page-size="data.dall.pageSize" v-model:page-size="data.dall.pageSize"
@current-change="fetchDallData()" @current-change="fetchDallData()"
:total="data.dall.total"/> :total="data.dall.total"
/>
</div> </div>
</div> </div>
<el-empty v-else /> <el-empty v-else />
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<el-dialog v-model="showImageDialog" title="图片预览">
<el-dialog <el-image :src="imgURL" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="[imgURL]" :initial-index="0" fit="cover" />
v-model="showImageDialog"
title="图片预览"
>
<el-image
:src="imgURL"
:zoom-rate="1.2"
:max-scale="7"
:min-scale="0.2"
:preview-src-list="[imgURL]"
:initial-index="0"
fit="cover"
/>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
@ -325,132 +293,140 @@ import {Search} from "@element-plus/icons-vue";
// 变量定义 // 变量定义
const data = ref({ const data = ref({
"mj": { mj: {
items: [], items: [],
query: { prompt: "", username: "", created_at: [], page: 1, page_size: 15 }, query: { prompt: "", username: "", created_at: [], page: 1, page_size: 15 },
total: 0, total: 0,
page: 1, page: 1,
pageSize: 15, pageSize: 15,
loading: true loading: true,
}, },
"sd": { sd: {
items: [], items: [],
query: { prompt: "", username: "", created_at: [], page: 1, page_size: 15 }, query: { prompt: "", username: "", created_at: [], page: 1, page_size: 15 },
total: 0, total: 0,
page: 1, page: 1,
pageSize: 15, pageSize: 15,
loading: true loading: true,
}, },
"dall": { dall: {
items: [], items: [],
query: { prompt: "", username: "", created_at: [], page: 1, page_size: 15 }, query: { prompt: "", username: "", created_at: [], page: 1, page_size: 15 },
total: 0, total: 0,
page: 1, page: 1,
pageSize: 15, pageSize: 15,
loading: true loading: true,
} },
}) });
const activeName = ref("mj") const activeName = ref("mj");
const taskTypeTheme = { const taskTypeTheme = {
image: { text: "绘图", color: "#2185d0" }, image: { text: "绘图", color: "#2185d0" },
upscale: { text: "放大", color: "#f2711c" }, upscale: { text: "放大", color: "#f2711c" },
variation: { text: "变换", color: "#00b5ad" }, variation: { text: "变换", color: "#00b5ad" },
blend: { text: "融图", color: "#21ba45" }, blend: { text: "融图", color: "#21ba45" },
swapFace: {text: "换脸", color: "#a333c8"} swapFace: { text: "换脸", color: "#a333c8" },
} };
onMounted(() => { onMounted(() => {
fetchMjData() fetchMjData();
}) });
const handleChange = (tab) => { const handleChange = (tab) => {
switch (tab) { switch (tab) {
case "mj": case "mj":
fetchMjData() fetchMjData();
break break;
case "sd": case "sd":
fetchSdData() fetchSdData();
break break;
case "dall": case "dall":
fetchDallData() fetchDallData();
break break;
}
} }
};
// 搜索对话 // 搜索对话
const search = (evt, tab) => { const search = (evt, tab) => {
if (evt.keyCode === 13) { if (evt.keyCode === 13) {
handleChange(tab) handleChange(tab);
}
} }
};
// 获取数据 // 获取数据
const fetchMjData = () => { const fetchMjData = () => {
const d = data.value.mj const d = data.value.mj;
d.query.page = d.page d.query.page = d.page;
d.query.page_size = d.pageSize d.query.page_size = d.pageSize;
httpPost('/api/admin/image/list/mj', d.query).then((res) => { httpPost("/api/admin/image/list/mj", d.query)
.then((res) => {
if (res.data) { if (res.data) {
d.items = res.data.items d.items = res.data.items;
d.total = res.data.total d.total = res.data.total;
d.page = res.data.page d.page = res.data.page;
d.pageSize = res.data.page_size d.pageSize = res.data.page_size;
} }
d.loading = false d.loading = false;
}).catch(e => {
ElMessage.error("获取数据失败：" + e.message);
}) })
} .catch((e) => {
ElMessage.error("获取数据失败：" + e.message);
});
};
const fetchSdData = () => { const fetchSdData = () => {
const d = data.value.sd const d = data.value.sd;
d.query.page = d.page d.query.page = d.page;
d.query.page_size = d.pageSize d.query.page_size = d.pageSize;
httpPost('/api/admin/image/list/sd', d.query).then((res) => { httpPost("/api/admin/image/list/sd", d.query)
.then((res) => {
if (res.data) { if (res.data) {
d.items = res.data.items d.items = res.data.items;
d.total = res.data.total d.total = res.data.total;
d.page = res.data.page d.page = res.data.page;
d.pageSize = res.data.page_size d.pageSize = res.data.page_size;
} }
d.loading = false d.loading = false;
}).catch(e => {
ElMessage.error("获取数据失败：" + e.message);
}) })
} .catch((e) => {
ElMessage.error("获取数据失败：" + e.message);
});
};
const fetchDallData = () => { const fetchDallData = () => {
const d = data.value.dall const d = data.value.dall;
d.query.page = d.page d.query.page = d.page;
d.query.page_size = d.pageSize d.query.page_size = d.pageSize;
httpPost('/api/admin/image/list/dall', d.query).then((res) => { httpPost("/api/admin/image/list/dall", d.query)
.then((res) => {
if (res.data) { if (res.data) {
d.items = res.data.items d.items = res.data.items;
d.total = res.data.total d.total = res.data.total;
d.page = res.data.page d.page = res.data.page;
d.pageSize = res.data.page_size d.pageSize = res.data.page_size;
} }
d.loading = false d.loading = false;
}).catch(e => {
ElMessage.error("获取数据失败：" + e.message);
}) })
} .catch((e) => {
ElMessage.error("获取数据失败：" + e.message);
});
};
const remove = function (row, tab) { const remove = function (row, tab) {
httpGet(`/api/admin/image/remove?id=${row.id}&tab=${tab}`).then(() => { httpGet(`/api/admin/image/remove?id=${row.id}&tab=${tab}`)
ElMessage.success("删除成功！") .then(() => {
handleChange(tab) ElMessage.success("删除成功！");
}).catch((e) => { handleChange(tab);
ElMessage.error("删除失败：" + e.message)
}) })
} .catch((e) => {
ElMessage.error("删除失败：" + e.message);
});
};
const showImageDialog = ref(false) const showImageDialog = ref(false);
const imgURL = ref('') const imgURL = ref("");
const showImage = (url) => { const showImage = (url) => {
showImageDialog.value = true showImageDialog.value = true;
imgURL.value = url imgURL.value = url;
} };
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@ -478,9 +454,9 @@ const showImage = (url) => {
} }
.pagination { .pagination {
padding 20px 0 margin-top 20px
display flex display flex
justify-content right justify-content center
} }
} }
</style> </style>

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

@ -10,8 +10,7 @@
<h1 class="header">登录 {{ title }}</h1> <h1 class="header">登录 {{ title }}</h1>
<div class="content"> <div class="content">
<el-input v-model="username" placeholder="请输入用户名" size="large" <el-input v-model="username" placeholder="请输入用户名" size="large" autocomplete="off" autofocus @keyup.enter="login">
autocomplete="off" autofocus @keyup.enter="login">
<template #prefix> <template #prefix>
<el-icon> <el-icon>
<UserFilled /> <UserFilled />
@ -19,8 +18,7 @@
</template> </template>
</el-input> </el-input>
<el-input v-model="password" placeholder="请输入密码" size="large" <el-input v-model="password" placeholder="请输入密码" size="large" show-password autocomplete="off" @keyup.enter="login">
show-password autocomplete="off" @keyup.enter="login">
<template #prefix> <template #prefix>
<el-icon> <el-icon>
<Lock /> <Lock />
@ -42,7 +40,6 @@
</template> </template>
<script setup> <script setup>
import { ref } from "vue"; import { ref } from "vue";
import { Lock, UserFilled } from "@element-plus/icons-vue"; import { Lock, UserFilled } from "@element-plus/icons-vue";
import { httpPost } from "@/utils/http"; import { httpPost } from "@/utils/http";
@ -54,57 +51,60 @@ import {checkAdminSession, getSystemInfo} from "@/store/cache";
import Captcha from "@/components/Captcha.vue"; import Captcha from "@/components/Captcha.vue";
const router = useRouter(); const router = useRouter();
const title = ref('Geek-AI Console'); const title = ref("Geek-AI Console");
const username = ref(process.env.VUE_APP_ADMIN_USER); const username = ref(process.env.VUE_APP_ADMIN_USER);
const password = ref(process.env.VUE_APP_ADMIN_PASS); const password = ref(process.env.VUE_APP_ADMIN_PASS);
const logo = ref("") const logo = ref("");
const enableVerify = ref(false) const enableVerify = ref(false);
const captchaRef = ref(null) const captchaRef = ref(null);
checkAdminSession().then(() => { checkAdminSession()
router.push("/admin") .then(() => {
}).catch(() => { router.push("/admin");
}) })
.catch(() => {});
// 加载系统配置 // 加载系统配置
getSystemInfo().then(res => { getSystemInfo()
title.value = res.data.admin_title .then((res) => {
logo.value = res.data.logo title.value = res.data.admin_title;
enableVerify.value = res.data['enabled_verify'] logo.value = res.data.logo;
}).catch(e => { enableVerify.value = res.data["enabled_verify"];
ElMessage.error("加载系统配置失败: " + e.message)
}) })
.catch((e) => {
ElMessage.error("加载系统配置失败: " + e.message);
});
const login = function () { const login = function () {
if (username.value === '') { if (username.value === "") {
return ElMessage.error('请输入用户名'); return ElMessage.error("请输入用户名");
} }
if (password.value === '') { if (password.value === "") {
return ElMessage.error('请输入密码'); return ElMessage.error("请输入密码");
} }
if (enableVerify.value) { if (enableVerify.value) {
captchaRef.value.loadCaptcha() captchaRef.value.loadCaptcha();
} else { } else {
doLogin({}) doLogin({});
}
} }
};
const doLogin = function (verifyData) { const doLogin = function (verifyData) {
httpPost('/api/admin/login', { httpPost("/api/admin/login", {
username: username.value.trim(), username: username.value.trim(),
password: password.value.trim(), password: password.value.trim(),
key: verifyData.key, key: verifyData.key,
dots: verifyData.dots, dots: verifyData.dots,
x: verifyData.x x: verifyData.x,
}).then(res => {
setAdminToken(res.data.token)
router.push("/admin")
}).catch((e) => {
ElMessage.error('登录失败，' + e.message)
}) })
} .then((res) => {
setAdminToken(res.data.token);
router.push("/admin");
})
.catch((e) => {
ElMessage.error("登录失败，" + e.message);
});
};
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@ -204,15 +204,10 @@ const doLogin = function (verifyData) {
} }
} }
.foot-container {
.footer { background rgba(0, 0, 0, 0.3);
color #ffffff; --text-color: #ffffff;
.container {
padding 20px;
} }
} }
} }
}
</style> </style>

51
web/src/views/admin/LoginLog.vue
View File

@ -1,29 +1,30 @@
<template> <template>
<div class="container list" v-loading="loading"> <div class="container list" v-loading="loading">
<el-row> <el-row>
<el-table :data="items" border :row-key="row => row.id"> <el-table :data="items" border :row-key="(row) => row.id">
<el-table-column label="用户名" prop="username" /> <el-table-column label="用户名" prop="username" />
<el-table-column label="登录IP" prop="login_ip" /> <el-table-column label="登录IP" prop="login_ip" />
<el-table-column label="登录地址" prop="login_address" /> <el-table-column label="登录地址" prop="login_address" />
<el-table-column label="登录时间"> <el-table-column label="登录时间">
<template #default="scope"> <template #default="scope">
<span>{{ dateFormat(scope.row['created_at']) }}</span> <span>{{ dateFormat(scope.row["created_at"]) }}</span>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</el-row> </el-row>
<div class="pagination"> <div class="pagination">
<el-pagination v-if="total > 0" background <el-pagination
v-if="total > 0"
background
layout="total,prev, pager, next" layout="total,prev, pager, next"
:hide-on-single-page="true" :hide-on-single-page="true"
v-model:current-page="page" v-model:current-page="page"
v-model:page-size="pageSize" v-model:page-size="pageSize"
@current-change="fetchList(page, pageSize)" @current-change="fetchList(page, pageSize)"
:total="total"/> :total="total"
/>
</div> </div>
</div> </div>
</template> </template>
@ -34,30 +35,32 @@ import {ElMessage} from "element-plus";
import { dateFormat } from "@/utils/libs"; import { dateFormat } from "@/utils/libs";
// 用户登录日志 // 用户登录日志
const items = ref([]) const items = ref([]);
const loading = ref(true) const loading = ref(true);
const total = ref(0) const total = ref(0);
const page = ref(0) const page = ref(0);
const pageSize = ref(0) const pageSize = ref(0);
onMounted(() => { onMounted(() => {
fetchList(1, 15) fetchList(1, 15);
}) });
// 获取数据 // 获取数据
const fetchList = function (_page, _pageSize) { const fetchList = function (_page, _pageSize) {
httpGet(`/api/admin/user/loginLog?page=${_page}&page_size=${_pageSize}`).then((res) => { httpGet(`/api/admin/user/loginLog?page=${_page}&page_size=${_pageSize}`)
.then((res) => {
if (res.data) { if (res.data) {
items.value = res.data.items items.value = res.data.items;
total.value = res.data.total total.value = res.data.total;
page.value = res.data.page page.value = res.data.page;
pageSize.value = res.data.page_size pageSize.value = res.data.page_size;
} }
loading.value = false loading.value = false;
}).catch(() => {
ElMessage.error("获取数据失败");
}) })
} .catch(() => {
ElMessage.error("获取数据失败");
});
};
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@ -72,9 +75,9 @@ const fetchList = function (_page, _pageSize) {
} }
.pagination { .pagination {
padding 20px 0 margin-top 20px
display flex display flex
justify-content right justify-content center
} }
} }

206
web/src/views/admin/Medias.vue
View File

@ -3,10 +3,8 @@
<el-tabs v-model="activeName" @tab-change="handleChange"> <el-tabs v-model="activeName" @tab-change="handleChange">
<el-tab-pane label="Suno音乐" name="suno" v-loading="data.suno.loading"> <el-tab-pane label="Suno音乐" name="suno" v-loading="data.suno.loading">
<div class="handle-box"> <div class="handle-box">
<el-input v-model="data.suno.query.username" placeholder="用户名" class="handle-input mr10" <el-input v-model="data.suno.query.username" placeholder="用户名" class="handle-input mr10" @keyup="search($event, 'suno')" clearable />
@keyup="search($event,'suno')" clearable /> <el-input v-model="data.suno.query.prompt" placeholder="提示词" class="handle-input mr10" @keyup="search($event, 'suno')" clearable />
<el-input v-model="data.suno.query.prompt" placeholder="提示词" class="handle-input mr10"
@keyup="search($event,'suno')" clearable />
<el-date-picker <el-date-picker
v-model="data.suno.query.created_at" v-model="data.suno.query.created_at"
type="daterange" type="daterange"
@ -14,14 +12,14 @@
end-placeholder="结束日期" end-placeholder="结束日期"
format="YYYY-MM-DD" format="YYYY-MM-DD"
value-format="YYYY-MM-DD" value-format="YYYY-MM-DD"
style="margin-right: 10px;width: 200px; position: relative;top:3px;" style="margin-right: 10px; width: 200px; position: relative; top: 3px"
/> />
<el-button type="primary" :icon="Search" @click="fetchSunoData">搜索</el-button> <el-button type="primary" :icon="Search" @click="fetchSunoData">搜索</el-button>
</div> </div>
<div v-if="data.suno.items.length > 0"> <div v-if="data.suno.items.length > 0">
<el-row> <el-row>
<el-table :data="data.suno.items" :row-key="row => row.id" table-layout="auto"> <el-table :data="data.suno.items" :row-key="(row) => row.id" table-layout="auto">
<el-table-column prop="user_id" label="用户ID" /> <el-table-column prop="user_id" label="用户ID" />
<el-table-column label="歌曲预览"> <el-table-column label="歌曲预览">
<template #default="scope"> <template #default="scope">
@ -52,7 +50,7 @@
</el-table-column> </el-table-column>
<el-table-column label="创建时间"> <el-table-column label="创建时间">
<template #default="scope"> <template #default="scope">
<span>{{ dateFormat(scope.row['created_at']) }}</span> <span>{{ dateFormat(scope.row["created_at"]) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="失败原因"> <el-table-column label="失败原因">
@ -85,24 +83,24 @@
</el-row> </el-row>
<div class="pagination"> <div class="pagination">
<el-pagination v-if="data.suno.total > 0" background <el-pagination
v-if="data.suno.total > 0"
background
layout="total,prev, pager, next" layout="total,prev, pager, next"
:hide-on-single-page="true" :hide-on-single-page="true"
v-model:current-page="data.suno.page" v-model:current-page="data.suno.page"
v-model:page-size="data.suno.pageSize" v-model:page-size="data.suno.pageSize"
@current-change="fetchSunoData()" @current-change="fetchSunoData()"
:total="data.suno.total"/> :total="data.suno.total"
/>
</div> </div>
</div> </div>
<el-empty v-else /> <el-empty v-else />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="Luma视频" name="luma" v-loading="data.luma.loading"> <el-tab-pane label="Luma视频" name="luma" v-loading="data.luma.loading">
<div class="handle-box"> <div class="handle-box">
<el-input v-model="data.luma.query.username" placeholder="用户名" class="handle-input mr10" <el-input v-model="data.luma.query.username" placeholder="用户名" class="handle-input mr10" @keyup="search($event, 'sd')" clearable />
@keyup="search($event, 'sd')" clearable /> <el-input v-model="data.luma.query.prompt" placeholder="提示词" class="handle-input mr10" @keyup="search($event, 'sd')" clearable />
<el-input v-model="data.luma.query.prompt" placeholder="提示词" class="handle-input mr10"
@keyup="search($event, 'sd')" clearable />
<el-date-picker <el-date-picker
v-model="data.luma.query.created_at" v-model="data.luma.query.created_at"
type="daterange" type="daterange"
@ -110,29 +108,26 @@
end-placeholder="结束日期" end-placeholder="结束日期"
format="YYYY-MM-DD" format="YYYY-MM-DD"
value-format="YYYY-MM-DD" value-format="YYYY-MM-DD"
style="margin-right: 10px;width: 200px; position: relative;top:3px;" style="margin-right: 10px; width: 200px; position: relative; top: 3px"
/> />
<el-button type="primary" :icon="Search" @click="fetchLumaData">搜索</el-button> <el-button type="primary" :icon="Search" @click="fetchLumaData">搜索</el-button>
</div> </div>
<div v-if="data.luma.items.length > 0"> <div v-if="data.luma.items.length > 0">
<el-row> <el-row>
<el-table :data="data.luma.items" :row-key="row => row.id" table-layout="auto"> <el-table :data="data.luma.items" :row-key="(row) => row.id" table-layout="auto">
<el-table-column prop="user_id" label="用户ID" /> <el-table-column prop="user_id" label="用户ID" />
<el-table-column label="视频预览"> <el-table-column label="视频预览">
<template #default="scope"> <template #default="scope">
<div class="container"> <div class="container">
<div v-if="scope.row.progress === 100"> <div v-if="scope.row.progress === 100">
<video class="video" :src="replaceImg(scope.row.video_url)" preload="auto" loop="loop" muted="muted"> <video class="video" :src="replaceImg(scope.row.video_url)" preload="auto" loop="loop" muted="muted">您的浏览器不支持视频播放</video>
您的浏览器不支持视频播放
</video>
<button class="play" @click="playVideo(scope.row)"> <button class="play" @click="playVideo(scope.row)">
<img src="/images/play.svg" alt="" /> <img src="/images/play.svg" alt="" />
</button> </button>
</div> </div>
<el-image :src="scope.row.cover_url" fit="cover" v-else-if="scope.row.progress > 100" /> <el-image :src="scope.row.cover_url" fit="cover" v-else-if="scope.row.progress > 100" />
<generating message="正在生成视频" v-else /> <generating message="正在生成视频" v-else />
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
@ -145,13 +140,7 @@
<el-table-column prop="power" label="消耗算力" /> <el-table-column prop="power" label="消耗算力" />
<el-table-column label="提示词"> <el-table-column label="提示词">
<template #default="scope"> <template #default="scope">
<el-popover <el-popover placement="top-start" title="提示词" :width="300" trigger="hover" :content="scope.row.prompt">
placement="top-start"
title="提示词"
:width="300"
trigger="hover"
:content="scope.row.prompt"
>
<template #reference> <template #reference>
<span>{{ substr(scope.row.prompt, 20) }}</span> <span>{{ substr(scope.row.prompt, 20) }}</span>
</template> </template>
@ -160,7 +149,7 @@
</el-table-column> </el-table-column>
<el-table-column label="创建时间"> <el-table-column label="创建时间">
<template #default="scope"> <template #default="scope">
<span>{{ dateFormat(scope.row['created_at']) }}</span> <span>{{ dateFormat(scope.row["created_at"]) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="失败原因"> <el-table-column label="失败原因">
@ -193,26 +182,24 @@
</el-row> </el-row>
<div class="pagination"> <div class="pagination">
<el-pagination v-if="data.luma.total > 0" background <el-pagination
v-if="data.luma.total > 0"
background
layout="total,prev, pager, next" layout="total,prev, pager, next"
:hide-on-single-page="true" :hide-on-single-page="true"
v-model:current-page="data.luma.page" v-model:current-page="data.luma.page"
v-model:page-size="data.luma.pageSize" v-model:page-size="data.luma.pageSize"
@current-change="fetchLumaData()" @current-change="fetchLumaData()"
:total="data.luma.total"/> :total="data.luma.total"
/>
</div> </div>
</div> </div>
<el-empty v-else /> <el-empty v-else />
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<el-dialog v-model="showVideoDialog" title="视频预览">
<el-dialog <video style="width: 100%; max-height: 90vh" :src="currentVideoUrl" preload="auto" :autoplay="true" loop="loop" muted="muted">
v-model="showVideoDialog"
title="视频预览"
>
<video style="width: 100%; max-height: 90vh;" :src="currentVideoUrl" preload="auto" :autoplay="true" loop="loop" muted="muted">
您的浏览器不支持视频播放 您的浏览器不支持视频播放
</video> </video>
</el-dialog> </el-dialog>
@ -221,13 +208,9 @@
<music-player :songs="playList" ref="playerRef" :show-close="true" @close="showPlayer = false" /> <music-player :songs="playList" ref="playerRef" :show-close="true" @close="showPlayer = false" />
</div> </div>
<el-dialog <el-dialog v-model="showLyricDialog" title="歌词">
v-model="showLyricDialog"
title="歌词"
>
<div class="chat-line" v-html="lyrics"></div> <div class="chat-line" v-html="lyrics"></div>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
@ -242,120 +225,125 @@ import Generating from "@/components/ui/Generating.vue";
// 变量定义 // 变量定义
const data = ref({ const data = ref({
"suno": { suno: {
items: [], items: [],
query: { prompt: "", username: "", created_at: [], page: 1, page_size: 15 }, query: { prompt: "", username: "", created_at: [], page: 1, page_size: 15 },
total: 0, total: 0,
page: 1, page: 1,
pageSize: 10, pageSize: 10,
loading: true loading: true,
}, },
"luma": { luma: {
items: [], items: [],
query: { prompt: "", username: "", created_at: [], page: 1, page_size: 15 }, query: { prompt: "", username: "", created_at: [], page: 1, page_size: 15 },
total: 0, total: 0,
page: 1, page: 1,
pageSize: 10, pageSize: 10,
loading: true loading: true,
} },
}) });
const activeName = ref("suno") const activeName = ref("suno");
const playList = ref([]) const playList = ref([]);
const playerRef = ref(null) const playerRef = ref(null);
const showPlayer = ref(false) const showPlayer = ref(false);
const showLyricDialog = ref(false) const showLyricDialog = ref(false);
const lyrics = ref("") const lyrics = ref("");
const showVideoDialog = ref(false) const showVideoDialog = ref(false);
const currentVideoUrl = ref('') const currentVideoUrl = ref("");
onMounted(() => { onMounted(() => {
fetchSunoData() fetchSunoData();
}) });
const handleChange = (tab) => { const handleChange = (tab) => {
switch (tab) { switch (tab) {
case "suno": case "suno":
fetchSunoData() fetchSunoData();
break break;
case "luma": case "luma":
fetchLumaData() fetchLumaData();
break break;
}
} }
};
// 搜索对话 // 搜索对话
const search = (evt, tab) => { const search = (evt, tab) => {
if (evt.keyCode === 13) { if (evt.keyCode === 13) {
handleChange(tab) handleChange(tab);
}
} }
};
// 获取数据 // 获取数据
const fetchSunoData = () => { const fetchSunoData = () => {
const d = data.value.suno const d = data.value.suno;
d.query.page = d.page d.query.page = d.page;
d.query.page_size = d.pageSize d.query.page_size = d.pageSize;
httpPost('/api/admin/media/list/suno', d.query).then((res) => { httpPost("/api/admin/media/list/suno", d.query)
.then((res) => {
if (res.data) { if (res.data) {
d.items = res.data.items d.items = res.data.items;
d.total = res.data.total d.total = res.data.total;
d.page = res.data.page d.page = res.data.page;
d.pageSize = res.data.page_size d.pageSize = res.data.page_size;
} }
d.loading = false d.loading = false;
}).catch(e => {
ElMessage.error("获取数据失败：" + e.message);
}) })
} .catch((e) => {
ElMessage.error("获取数据失败：" + e.message);
});
};
const fetchLumaData = () => { const fetchLumaData = () => {
const d = data.value.luma const d = data.value.luma;
d.query.page = d.page d.query.page = d.page;
d.query.page_size = d.pageSize d.query.page_size = d.pageSize;
httpPost('/api/admin/media/list/luma', d.query).then((res) => { httpPost("/api/admin/media/list/luma", d.query)
.then((res) => {
if (res.data) { if (res.data) {
d.items = res.data.items d.items = res.data.items;
d.total = res.data.total d.total = res.data.total;
d.page = res.data.page d.page = res.data.page;
d.pageSize = res.data.page_size d.pageSize = res.data.page_size;
} }
d.loading = false d.loading = false;
}).catch(e => {
ElMessage.error("获取数据失败：" + e.message);
}) })
} .catch((e) => {
ElMessage.error("获取数据失败：" + e.message);
});
};
const remove = function (row, tab) { const remove = function (row, tab) {
httpGet(`/api/admin/media/remove?id=${row.id}&tab=${tab}`).then(() => { httpGet(`/api/admin/media/remove?id=${row.id}&tab=${tab}`)
ElMessage.success("删除成功！") .then(() => {
handleChange(tab) ElMessage.success("删除成功！");
}).catch((e) => { handleChange(tab);
ElMessage.error("删除失败：" + e.message)
}) })
} .catch((e) => {
ElMessage.error("删除失败：" + e.message);
});
};
const playMusic = (item) => { const playMusic = (item) => {
playList.value = [item] playList.value = [item];
showPlayer.value = true showPlayer.value = true;
nextTick(()=> playerRef.value.play()) nextTick(() => playerRef.value.play());
} };
const playVideo = (item) => { const playVideo = (item) => {
currentVideoUrl.value = replaceImg(item.video_url) currentVideoUrl.value = replaceImg(item.video_url);
showVideoDialog.value = true showVideoDialog.value = true;
} };
const md = require('markdown-it')({ const md = require("markdown-it")({
breaks: true, breaks: true,
html: true, html: true,
linkify: true, linkify: true,
}); });
const showLyric = (item) => { const showLyric = (item) => {
showLyricDialog.value = true showLyricDialog.value = true;
lyrics.value = md.render(item.prompt) lyrics.value = md.render(item.prompt);
} };
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@ -383,9 +371,9 @@ const showLyric = (item) => {
} }
.pagination { .pagination {
padding 20px 0 margin-top 20px
display flex display flex
justify-content right justify-content center
} }
.container { .container {

109
web/src/views/admin/Order.vue
View File

@ -3,12 +3,7 @@
<div class="handle-box"> <div class="handle-box">
<el-input v-model="query.order_no" placeholder="订单号" class="handle-input mr10"></el-input> <el-input v-model="query.order_no" placeholder="订单号" class="handle-input mr10"></el-input>
<el-select v-model="query.status" placeholder="订单状态" style="width: 100px"> <el-select v-model="query.status" placeholder="订单状态" style="width: 100px">
<el-option <el-option v-for="item in orderStatus" :key="item.value" :label="item.label" :value="item.value" />
v-for="item in orderStatus"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select> </el-select>
<el-date-picker <el-date-picker
v-model="query.pay_time" v-model="query.pay_time"
@ -17,14 +12,14 @@
end-placeholder="结束日期" end-placeholder="结束日期"
format="YYYY-MM-DD" format="YYYY-MM-DD"
value-format="YYYY-MM-DD" value-format="YYYY-MM-DD"
style="margin: 0 10px;width: 200px; position: relative;top:3px;" style="margin: 0 10px; width: 200px; position: relative; top: 3px"
/> />
<el-button type="primary" :icon="Search" @click="fetchData">搜索</el-button> <el-button type="primary" :icon="Search" @click="fetchData">搜索</el-button>
<el-button type="danger" :icon="Delete" @click="clearOrders">清空未支付订单</el-button> <el-button type="danger" :icon="Delete" @click="clearOrders">清空未支付订单</el-button>
</div> </div>
<el-row> <el-row>
<el-table :data="items" :row-key="row => row.id" table-layout="auto"> <el-table :data="items" :row-key="(row) => row.id" table-layout="auto">
<el-table-column prop="order_no" label="订单号" /> <el-table-column prop="order_no" label="订单号" />
<el-table-column prop="trade_no" label="交易号" /> <el-table-column prop="trade_no" label="交易号" />
<el-table-column prop="username" label="下单用户" /> <el-table-column prop="username" label="下单用户" />
@ -38,13 +33,13 @@
<el-table-column label="下单时间"> <el-table-column label="下单时间">
<template #default="scope"> <template #default="scope">
<span>{{ dateFormat(scope.row['created_at']) }}</span> <span>{{ dateFormat(scope.row["created_at"]) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="支付时间"> <el-table-column label="支付时间">
<template #default="scope"> <template #default="scope">
<span v-if="scope.row['pay_time']">{{ dateFormat(scope.row['pay_time']) }}</span> <span v-if="scope.row['pay_time']">{{ dateFormat(scope.row["pay_time"]) }}</span>
<el-tag v-else>未支付</el-tag> <el-tag v-else>未支付</el-tag>
</template> </template>
</el-table-column> </el-table-column>
@ -64,14 +59,16 @@
</el-row> </el-row>
<div class="pagination"> <div class="pagination">
<el-pagination v-if="total > 0" background <el-pagination
v-if="total > 0"
background
layout="total,prev, pager, next" layout="total,prev, pager, next"
:hide-on-single-page="true" :hide-on-single-page="true"
v-model:current-page="page" v-model:current-page="page"
v-model:page-size="pageSize" v-model:page-size="pageSize"
@current-change="fetchData()" @current-change="fetchData()"
:total="total"/> :total="total"
/>
</div> </div>
</div> </div>
</template> </template>
@ -84,66 +81,66 @@ import {dateFormat, removeArrayItem} from "@/utils/libs";
import { Delete, Search } from "@element-plus/icons-vue"; import { Delete, Search } from "@element-plus/icons-vue";
// 变量定义 // 变量定义
const items = ref([]) const items = ref([]);
const query = ref({order_no: "", pay_time: [], status: -1}) const query = ref({ order_no: "", pay_time: [], status: -1 });
const total = ref(0) const total = ref(0);
const page = ref(1) const page = ref(1);
const pageSize = ref(15) const pageSize = ref(15);
const loading = ref(true) const loading = ref(true);
const orderStatus = ref([ const orderStatus = ref([
{ value: -1, label: "全部" }, { value: -1, label: "全部" },
{ value: 0, label: "未支付" }, { value: 0, label: "未支付" },
{ value: 2, label: "已支付" }, { value: 2, label: "已支付" },
]) ]);
onMounted(() => { onMounted(() => {
fetchData() fetchData();
}) });
// 获取数据 // 获取数据
const fetchData = () => { const fetchData = () => {
query.value.page = page.value query.value.page = page.value;
query.value.page_size = pageSize.value query.value.page_size = pageSize.value;
httpPost('/api/admin/order/list', query.value).then((res) => { httpPost("/api/admin/order/list", query.value)
.then((res) => {
if (res.data) { if (res.data) {
items.value = res.data.items items.value = res.data.items;
total.value = res.data.total total.value = res.data.total;
page.value = res.data.page page.value = res.data.page;
pageSize.value = res.data.page_size pageSize.value = res.data.page_size;
} }
loading.value = false loading.value = false;
}).catch(e => {
ElMessage.error("获取数据失败：" + e.message);
}) })
} .catch((e) => {
ElMessage.error("获取数据失败：" + e.message);
});
};
const remove = function (row) { const remove = function (row) {
httpGet('/api/admin/order/remove?id=' + row.id).then(() => { httpGet("/api/admin/order/remove?id=" + row.id)
ElMessage.success("删除成功！") .then(() => {
ElMessage.success("删除成功！");
items.value = removeArrayItem(items.value, row, (v1, v2) => { items.value = removeArrayItem(items.value, row, (v1, v2) => {
return v1.id === v2.id return v1.id === v2.id;
});
}) })
}).catch((e) => { .catch((e) => {
ElMessage.error("删除失败：" + e.message) ElMessage.error("删除失败：" + e.message);
}) });
} };
const clearOrders = () => { const clearOrders = () => {
ElMessageBox.confirm( ElMessageBox.confirm("此操作将会删除所有未支付订单，继续操作吗?", "删除提示", {
'此操作将会删除所有未支付订单，继续操作吗?', confirmButtonText: "确认",
'删除提示', cancelButtonText: "取消",
{ type: "warning",
confirmButtonText: '确认', }).then(() => {
cancelButtonText: '取消',
type: 'warning',
}
).then(() => {
httpGet("/api/admin/order/clear").then(() => { httpGet("/api/admin/order/clear").then(() => {
ElMessage.success("订单删除成功") ElMessage.success("订单删除成功");
page.value = 0 page.value = 0;
fetchData() fetchData();
}) });
}) });
} };
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@ -172,7 +169,7 @@ const clearOrders = () => {
} }
.pagination { .pagination {
padding 20px 0 margin-top: 20px;
display flex display flex
justify-content right justify-content right
} }

96
web/src/views/admin/PowerLog.vue
View File

@ -17,7 +17,7 @@
end-placeholder="结束日期" end-placeholder="结束日期"
format="YYYY-MM-DD" format="YYYY-MM-DD"
value-format="YYYY-MM-DD" value-format="YYYY-MM-DD"
style="margin: 0 10px;width: 200px; position: relative;top:3px;" style="margin: 0 10px; width: 200px; position: relative; top: 3px"
/> />
<el-button type="primary" :icon="Search" @click="search">搜索</el-button> <el-button type="primary" :icon="Search" @click="search">搜索</el-button>
@ -25,7 +25,7 @@
</div> </div>
<el-row v-if="items.length > 0"> <el-row v-if="items.length > 0">
<el-table :data="items" :row-key="row => row.id" table-layout="auto" border> <el-table :data="items" :row-key="(row) => row.id" table-layout="auto" border>
<el-table-column prop="username" label="用户" /> <el-table-column prop="username" label="用户" />
<el-table-column prop="model" label="模型" /> <el-table-column prop="model" label="模型" />
<el-table-column prop="type" label="类型"> <el-table-column prop="type" label="类型">
@ -44,25 +44,26 @@
<el-table-column prop="balance" label="余额" /> <el-table-column prop="balance" label="余额" />
<el-table-column label="发生时间"> <el-table-column label="发生时间">
<template #default="scope"> <template #default="scope">
<span>{{ dateFormat(scope.row['created_at']) }}</span> <span>{{ dateFormat(scope.row["created_at"]) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="remark" label="备注" /> <el-table-column prop="remark" label="备注" />
</el-table> </el-table>
<div class="pagination"> <div class="pagination">
<el-pagination v-if="total > 0" background <el-pagination
v-if="total > 0"
background
layout="total,prev, pager, next" layout="total,prev, pager, next"
:hide-on-single-page="true" :hide-on-single-page="true"
v-model:current-page="page" v-model:current-page="page"
v-model:page-size="pageSize" v-model:page-size="pageSize"
@current-change="fetchData()" @current-change="fetchData()"
:total="total"/> :total="total"
/>
</div> </div>
</el-row> </el-row>
<el-empty :image-size="100" v-else /> <el-empty :image-size="100" v-else />
</div> </div>
</template> </template>
@ -74,62 +75,64 @@ import {dateFormat} from "@/utils/libs";
import { Search } from "@element-plus/icons-vue"; import { Search } from "@element-plus/icons-vue";
import Clipboard from "clipboard"; import Clipboard from "clipboard";
const items = ref([]) const items = ref([]);
const total = ref(0) const total = ref(0);
const page = ref(1) const page = ref(1);
const pageSize = ref(20) const pageSize = ref(20);
const loading = ref(false) const loading = ref(false);
const query = ref({ const query = ref({
model: "", model: "",
date: [], date: [],
type: 0 type: 0,
}) });
const totalPower = ref(0) const totalPower = ref(0);
const tagColors = ref(["", "success", "primary", "danger", "info", "warning"]) const tagColors = ref(["", "success", "primary", "danger", "info", "warning"]);
onMounted(() => { onMounted(() => {
fetchData() fetchData();
const clipboard = new Clipboard('.copy-order-no'); const clipboard = new Clipboard(".copy-order-no");
clipboard.on('success', () => { clipboard.on("success", () => {
ElMessage.success("复制成功！"); ElMessage.success("复制成功！");
}) });
clipboard.on('error', () => { clipboard.on("error", () => {
ElMessage.error('复制失败！'); ElMessage.error("复制失败！");
}) });
}) });
// 搜索 // 搜索
const search = () => { const search = () => {
page.value = 1 page.value = 1;
fetchData() fetchData();
} };
// 获取数据 // 获取数据
const fetchData = () => { const fetchData = () => {
loading.value = true loading.value = true;
httpPost('/api/admin/powerLog/list', { httpPost("/api/admin/powerLog/list", {
model: query.value.model, model: query.value.model,
date: query.value.date, date: query.value.date,
type: query.value.type, type: query.value.type,
page: page.value, page: page.value,
page_size: pageSize.value page_size: pageSize.value,
}).then((res) => {
const data = res.data.data
if (data) {
items.value = data.items
total.value = data.total
page.value = data.page
pageSize.value = data.page_size
}
totalPower.value = res.data.stat
loading.value = false
}).catch(e => {
loading.value = false
ElMessage.error("获取数据失败：" + e.message);
}) })
.then((res) => {
const data = res.data.data;
if (data) {
items.value = data.items;
total.value = data.total;
page.value = data.page;
pageSize.value = data.page_size;
} }
totalPower.value = res.data.stat;
loading.value = false;
})
.catch((e) => {
loading.value = false;
ElMessage.error("获取数据失败：" + e.message);
});
};
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@ -157,10 +160,9 @@ const fetchData = () => {
} }
.pagination { .pagination {
padding 20px 0 margin-top: 20px;
display flex display flex;
width 100% justify-content: right;
justify-content right
} }
} }

199
web/src/views/admin/Redeem.vue
View File

@ -3,22 +3,15 @@
<div class="handle-box"> <div class="handle-box">
<el-input v-model="query.code" placeholder="兑换码" class="handle-input mr10"></el-input> <el-input v-model="query.code" placeholder="兑换码" class="handle-input mr10"></el-input>
<el-select v-model="query.status" placeholder="核销状态" style="width: 100px" class="handle-input mr10"> <el-select v-model="query.status" placeholder="核销状态" style="width: 100px" class="handle-input mr10">
<el-option <el-option v-for="item in redeemStatus" :key="item.value" :label="item.label" :value="item.value" />
v-for="item in redeemStatus"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select> </el-select>
<el-button type="primary" :icon="Search" @click="fetchData">搜索</el-button> <el-button type="primary" :icon="Search" @click="fetchData">搜索</el-button>
<el-button type="success" :icon="Plus" @click="add">添加兑换码</el-button> <el-button type="success" :icon="Plus" @click="add">添加兑换码</el-button>
<el-button type="primary" @click="exportItems" :loading="exporting"><i class="iconfont icon-export mr-1"></i> 导出 <el-button type="primary" @click="exportItems" :loading="exporting"><i class="iconfont icon-export mr-1"></i> 导出 </el-button>
</el-button>
</div> </div>
<el-row> <el-row>
<el-table :data="items" :row-key="row => row.id" <el-table :data="items" :row-key="(row) => row.id" @selection-change="handleSelectionChange" table-layout="auto">
@selection-change="handleSelectionChange" table-layout="auto">
<el-table-column type="selection" width="38"></el-table-column> <el-table-column type="selection" width="38"></el-table-column>
<el-table-column prop="name" label="名称" /> <el-table-column prop="name" label="名称" />
<el-table-column prop="code" label="兑换码"> <el-table-column prop="code" label="兑换码">
@ -31,7 +24,7 @@
</el-table-column> </el-table-column>
<el-table-column label="兑换人"> <el-table-column label="兑换人">
<template #default="scope"> <template #default="scope">
<span v-if="scope.row['username'] !== ''">{{ scope.row['username'] }}</span> <span v-if="scope.row['username'] !== ''">{{ scope.row["username"] }}</span>
<el-tag v-else>未兑换</el-tag> <el-tag v-else>未兑换</el-tag>
</template> </template>
</el-table-column> </el-table-column>
@ -39,21 +32,20 @@
<el-table-column label="生成时间"> <el-table-column label="生成时间">
<template #default="scope"> <template #default="scope">
<span>{{ dateFormat(scope.row['created_at']) }}</span> <span>{{ dateFormat(scope.row["created_at"]) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="兑换时间"> <el-table-column label="兑换时间">
<template #default="scope"> <template #default="scope">
<span v-if="scope.row['redeemed_at'] > 0">{{ dateFormat(scope.row['redeemed_at']) }}</span> <span v-if="scope.row['redeemed_at'] > 0">{{ dateFormat(scope.row["redeemed_at"]) }}</span>
<el-tag v-else>未兑换</el-tag> <el-tag v-else>未兑换</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="enabled" label="启用状态"> <el-table-column prop="enabled" label="启用状态">
<template #default="scope"> <template #default="scope">
<el-switch v-model="scope.row['enabled']" @change="set('enabled',scope.row)" <el-switch v-model="scope.row['enabled']" @change="set('enabled', scope.row)" :disabled="scope.row['redeemed_at'] > 0" />
:disabled="scope.row['redeemed_at']>0"/>
</template> </template>
</el-table-column> </el-table-column>
@ -66,24 +58,23 @@
</el-popconfirm> </el-popconfirm>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</el-row> </el-row>
<div class="pagination"> <div class="pagination">
<el-pagination v-if="total > 0" background <el-pagination
v-if="total > 0"
background
layout="total,prev, pager, next" layout="total,prev, pager, next"
:hide-on-single-page="true" :hide-on-single-page="true"
v-model:current-page="page" v-model:current-page="page"
v-model:page-size="pageSize" v-model:page-size="pageSize"
@current-change="fetchData()" @current-change="fetchData()"
:total="total"/> :total="total"
/>
</div> </div>
<el-dialog <el-dialog v-model="showDialog" title="生成兑换码">
v-model="showDialog"
title="生成兑换码">
<template #default> <template #default>
<el-form :model="item" label-width="120px" v-loading="dialogLoading"> <el-form :model="item" label-width="120px" v-loading="dialogLoading">
<el-form-item label="名称：" prop="name"> <el-form-item label="名称：" prop="name">
@ -120,126 +111,134 @@ import {showMessageError} from "@/utils/dialog";
import ClipboardJS from "clipboard"; import ClipboardJS from "clipboard";
// 变量定义 // 变量定义
const items = ref([]) const items = ref([]);
const loading = ref(true) const loading = ref(true);
const query = ref({code: "", status: -1}) const query = ref({ code: "", status: -1 });
const redeemStatus = ref([ const redeemStatus = ref([
{ value: -1, label: "全部" }, { value: -1, label: "全部" },
{ value: 0, label: "未核销" }, { value: 0, label: "未核销" },
{ value: 1, label: "已核销" }, { value: 1, label: "已核销" },
]) ]);
const showDialog = ref(false) const showDialog = ref(false);
const dialogLoading = ref(false) const dialogLoading = ref(false);
const item = ref({name: "", power: 0, num: 1}) const item = ref({ name: "", power: 0, num: 1 });
const itemIds = ref([]) const itemIds = ref([]);
const exporting = ref(false) const exporting = ref(false);
const clipboard = ref(null) const clipboard = ref(null);
onMounted(() => { onMounted(() => {
clipboard.value = new ClipboardJS('.copy-code'); clipboard.value = new ClipboardJS(".copy-code");
clipboard.value.on('success', () => { clipboard.value.on("success", () => {
ElMessage.success('复制成功！'); ElMessage.success("复制成功！");
}) });
clipboard.value.on('error', () => { clipboard.value.on("error", () => {
ElMessage.error('复制失败！'); ElMessage.error("复制失败！");
}) });
fetchData() fetchData();
}) });
onUnmounted(() => { onUnmounted(() => {
clipboard.value.destroy() clipboard.value.destroy();
}) });
const add = () => { const add = () => {
item.value = {name: "100算力点卡", power: 100, num: 1} item.value = { name: "100算力点卡", power: 100, num: 1 };
showDialog.value = true showDialog.value = true;
dialogLoading.value = false dialogLoading.value = false;
} };
const save = () => { const save = () => {
if (item.value.name === "") { if (item.value.name === "") {
return showMessageError("请输入兑换码名称") return showMessageError("请输入兑换码名称");
} }
if (item.value.power === 0) { if (item.value.power === 0) {
return showMessageError("请输入算力额度") return showMessageError("请输入算力额度");
} }
if (item.value.num <= 0) { if (item.value.num <= 0) {
return showMessageError("请输入生成数量") return showMessageError("请输入生成数量");
} }
dialogLoading.value = true dialogLoading.value = true;
httpPost('/api/admin/redeem/create', item.value).then((res) => { httpPost("/api/admin/redeem/create", item.value)
ElMessage.success(`成功生成了${res.data.counter}个兑换码`) .then((res) => {
showDialog.value = false ElMessage.success(`成功生成了${res.data.counter}个兑换码`);
fetchData() showDialog.value = false;
}).catch((e) => { fetchData();
ElMessage.error("生成失败：" + e.message)
}) })
} .catch((e) => {
ElMessage.error("生成失败：" + e.message);
});
};
const set = (filed, row) => { const set = (filed, row) => {
httpPost('/api/admin/redeem/set', {id: row.id, filed: filed, value: row[filed]}).then(() => { httpPost("/api/admin/redeem/set", { id: row.id, filed: filed, value: row[filed] })
ElMessage.success("操作成功！") .then(() => {
}).catch(e => { ElMessage.success("操作成功！");
ElMessage.error("操作失败：" + e.message)
}) })
} .catch((e) => {
ElMessage.error("操作失败：" + e.message);
});
};
const page = ref(1);
const page = ref(1) const pageSize = ref(12);
const pageSize = ref(12) const total = ref(0);
const total = ref(0)
const fetchData = () => { const fetchData = () => {
query.value.page = page.value query.value.page = page.value;
query.value.page_size = pageSize.value query.value.page_size = pageSize.value;
httpGet('/api/admin/redeem/list', query.value).then((res) => { httpGet("/api/admin/redeem/list", query.value)
.then((res) => {
if (res.data) { if (res.data) {
items.value = res.data.items items.value = res.data.items;
total.value = res.data.total total.value = res.data.total;
page.value = res.data.page page.value = res.data.page;
pageSize.value = res.data.page_size pageSize.value = res.data.page_size;
} }
loading.value = false loading.value = false;
}).catch(e => {
ElMessage.error("获取数据失败：" + e.message);
}) })
} .catch((e) => {
ElMessage.error("获取数据失败：" + e.message);
});
};
const remove = function (row) { const remove = function (row) {
httpGet('/api/admin/redeem/remove?id=' + row.id).then(() => { httpGet("/api/admin/redeem/remove?id=" + row.id)
ElMessage.success("删除成功！") .then(() => {
fetchData() ElMessage.success("删除成功！");
}).catch((e) => { fetchData();
ElMessage.error("删除失败：" + e.message)
}) })
} .catch((e) => {
ElMessage.error("删除失败：" + e.message);
});
};
const handleSelectionChange = (items) => { const handleSelectionChange = (items) => {
itemIds.value = items.map(item => item.id) itemIds.value = items.map((item) => item.id);
} };
const exportItems = () => { const exportItems = () => {
query.value.ids = itemIds.value query.value.ids = itemIds.value;
exporting.value = true exporting.value = true;
httpPostDownload("/api/admin/redeem/export", query.value).then(response => { httpPostDownload("/api/admin/redeem/export", query.value)
.then((response) => {
const url = window.URL.createObjectURL(new Blob([response.data])); const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a'); const link = document.createElement("a");
link.href = url; link.href = url;
link.setAttribute('download', UUID() + ".csv"); // 设置下载文件的名称 link.setAttribute("download", UUID() + ".csv"); // 设置下载文件的名称
document.body.appendChild(link); document.body.appendChild(link);
link.click(); link.click();
// 移除 <a> 标签 // 移除 <a> 标签
document.body.removeChild(link); document.body.removeChild(link);
window.URL.revokeObjectURL(url); window.URL.revokeObjectURL(url);
exporting.value = false exporting.value = false;
}).catch(() => {
exporting.value = false
showMessageError("下载失败")
}) })
} .catch(() => {
exporting.value = false;
showMessageError("下载失败");
});
};
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@ -276,9 +275,9 @@ const exportItems = () => {
} }
.pagination { .pagination {
padding 20px 0 margin-top: 20px;
display flex display flex;
justify-content right justify-content: right;
} }
} }

2
web/src/views/admin/Users.vue
View File

@ -363,7 +363,7 @@ const doResetPass = () => {
} }
.pagination { .pagination {
padding 20px 0 margin-top: 20px;
display flex display flex
justify-content right justify-content right
width 100% width 100%