xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2025-11-04 08:13:43 +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
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 {
padding 10px 20px
margin-top 20px
display flex
justify-content center
}

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

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

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

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

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

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

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

@@ -61,7 +61,7 @@
}"
>
<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>
</span>
<el-image :src="item.icon" style="width: 20px; height: 20px" v-else />
@@ -143,18 +143,18 @@
</template>
<script setup>
import {CirclePlus, Setting, UserFilled} from "@element-plus/icons-vue";
import { CirclePlus, Setting, UserFilled } from "@element-plus/icons-vue";
import ThemeChange from "@/components/ThemeChange.vue";
import avatarImg from "@/assets/img/avatar.jpg";
import {useRouter} from "vue-router";
import {onMounted, ref, watch} from "vue";
import {httpGet} from "@/utils/http";
import {ElMessage} from "element-plus";
import {checkSession, getLicenseInfo, getSystemInfo} from "@/store/cache";
import {removeUserToken} from "@/store/session";
import {useSharedStore} from "@/store/sharedata";
import { useRouter } from "vue-router";
import { onMounted, ref, watch } from "vue";
import { httpGet } from "@/utils/http";
import { ElMessage } from "element-plus";
import { checkSession, getLicenseInfo, getSystemInfo } from "@/store/cache";
import { removeUserToken } from "@/store/session";
import { useSharedStore } from "@/store/sharedata";
import ConfigDialog from "@/components/UserInfoDialog.vue";
import {showMessageError} from "@/utils/dialog";
import { showMessageError } from "@/utils/dialog";
const isCollapse = ref(true);
const router = useRouter();
@@ -216,9 +216,10 @@ if (curPath.value === "/external") {
}
const changeNav = (item) => {
curPath.value = item.url;
console.log(item.url);
if (item.url.indexOf("http") !== -1) {
// 外部链接
window.open(item.url, "_blank");
router.push({ path: "/external", query: { url: item.url, title: item.name } });
} else {
// 路由切换，确保路径变化
if (router.currentRoute.value.path !== item.url) {

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

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

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

@@ -54,7 +54,7 @@
<div class="container">
<div v-if="item.progress === 100">
<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="" />
</button>
</div>

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

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

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

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

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

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

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

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

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

@@ -5,25 +5,23 @@
<div class="main">
<div class="contain">
<div class="logo" @click="router.push('/')">
<el-image :src="logo" fit="cover"/>
<el-image :src="logo" fit="cover" />
</div>
<h1 class="header">登录 {{ title }}</h1>
<div class="content">
<el-input v-model="username" placeholder="请输入用户名" size="large"
autocomplete="off" autofocus @keyup.enter="login">
<el-input v-model="username" placeholder="请输入用户名" size="large" autocomplete="off" autofocus @keyup.enter="login">
<template #prefix>
<el-icon>
<UserFilled/>
<UserFilled />
</el-icon>
</template>
</el-input>
<el-input v-model="password" placeholder="请输入密码" size="large"
show-password autocomplete="off" @keyup.enter="login">
<el-input v-model="password" placeholder="请输入密码" size="large" show-password autocomplete="off" @keyup.enter="login">
<template #prefix>
<el-icon>
<Lock/>
<Lock />
</el-icon>
</template>
</el-input>
@@ -34,77 +32,79 @@
</div>
</div>
<captcha v-if="enableVerify" @success="doLogin" ref="captchaRef"/>
<footer-bar class="footer"/>
<captcha v-if="enableVerify" @success="doLogin" ref="captchaRef" />
<footer-bar class="footer" />
</div>
</div>
</div>
</template>
<script setup>
import {ref} from "vue";
import {Lock, UserFilled} from "@element-plus/icons-vue";
import {httpPost} from "@/utils/http";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
import { ref } from "vue";
import { Lock, UserFilled } from "@element-plus/icons-vue";
import { httpPost } from "@/utils/http";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import FooterBar from "@/components/FooterBar.vue";
import {setAdminToken} from "@/store/session";
import {checkAdminSession, getSystemInfo} from "@/store/cache";
import { setAdminToken } from "@/store/session";
import { checkAdminSession, getSystemInfo } from "@/store/cache";
import Captcha from "@/components/Captcha.vue";
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 password = ref(process.env.VUE_APP_ADMIN_PASS);
const logo = ref("")
const enableVerify = ref(false)
const captchaRef = ref(null)
const logo = ref("");
const enableVerify = ref(false);
const captchaRef = ref(null);
checkAdminSession().then(() => {
router.push("/admin")
}).catch(() => {
})
checkAdminSession()
.then(() => {
router.push("/admin");
})
.catch(() => {});
// 加载系统配置
getSystemInfo().then(res => {
title.value = res.data.admin_title
logo.value = res.data.logo
enableVerify.value = res.data['enabled_verify']
}).catch(e => {
ElMessage.error("加载系统配置失败: " + e.message)
})
getSystemInfo()
.then((res) => {
title.value = res.data.admin_title;
logo.value = res.data.logo;
enableVerify.value = res.data["enabled_verify"];
})
.catch((e) => {
ElMessage.error("加载系统配置失败: " + e.message);
});
const login = function () {
if (username.value === '') {
return ElMessage.error('请输入用户名');
if (username.value === "") {
return ElMessage.error("请输入用户名");
}
if (password.value === '') {
return ElMessage.error('请输入密码');
if (password.value === "") {
return ElMessage.error("请输入密码");
}
if (enableVerify.value) {
captchaRef.value.loadCaptcha()
captchaRef.value.loadCaptcha();
} else {
doLogin({})
doLogin({});
}
}
};
const doLogin = function (verifyData) {
httpPost('/api/admin/login', {
httpPost("/api/admin/login", {
username: username.value.trim(),
password: password.value.trim(),
key: verifyData.key,
dots: verifyData.dots,
x: verifyData.x
}).then(res => {
setAdminToken(res.data.token)
router.push("/admin")
}).catch((e) => {
ElMessage.error('登录失败，' + e.message)
x: verifyData.x,
})
}
.then((res) => {
setAdminToken(res.data.token);
router.push("/admin");
})
.catch((e) => {
ElMessage.error("登录失败，" + e.message);
});
};
</script>
<style lang="stylus" scoped>
@@ -204,15 +204,10 @@ const doLogin = function (verifyData) {
}
}
.footer {
color #ffffff;
.container {
padding 20px;
}
.foot-container {
background rgba(0, 0, 0, 0.3);
--text-color: #ffffff;
}
}
}
</style>
</style>

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

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

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

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

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

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

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

@@ -3,21 +3,21 @@
<div class="handle-box">
<el-input v-model="query.model" placeholder="模型" class="handle-input mr10" clearable></el-input>
<el-select v-model="query.type" placeholder="类别" style="width: 100px">
<el-option label="全部" :value="0"/>
<el-option label="充值" :value="1"/>
<el-option label="消费" :value="2"/>
<el-option label="退款" :value="3"/>
<el-option label="奖励" :value="4"/>
<el-option label="众筹" :value="5"/>
<el-option label="全部" :value="0" />
<el-option label="充值" :value="1" />
<el-option label="消费" :value="2" />
<el-option label="退款" :value="3" />
<el-option label="奖励" :value="4" />
<el-option label="众筹" :value="5" />
</el-select>
<el-date-picker
v-model="query.date"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
style="margin: 0 10px;width: 200px; position: relative;top:3px;"
v-model="query.date"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
style="margin: 0 10px; width: 200px; position: relative; top: 3px"
/>
<el-button type="primary" :icon="Search" @click="search">搜索</el-button>
@@ -25,9 +25,9 @@
</div>
<el-row v-if="items.length > 0">
<el-table :data="items" :row-key="row => row.id" table-layout="auto" border>
<el-table-column prop="username" label="用户"/>
<el-table-column prop="model" label="模型"/>
<el-table :data="items" :row-key="(row) => row.id" table-layout="auto" border>
<el-table-column prop="username" label="用户" />
<el-table-column prop="model" label="模型" />
<el-table-column prop="type" label="类型">
<template #default="scope">
<el-tag size="small" :type="tagColors[scope.row.type]">{{ scope.row.type_str }}</el-tag>
@@ -41,95 +41,98 @@
</div>
</template>
</el-table-column>
<el-table-column prop="balance" label="余额"/>
<el-table-column prop="balance" label="余额" />
<el-table-column label="发生时间">
<template #default="scope">
<span>{{ dateFormat(scope.row['created_at']) }}</span>
<span>{{ dateFormat(scope.row["created_at"]) }}</span>
</template>
</el-table-column>
<el-table-column prop="remark" label="备注"/>
<el-table-column prop="remark" label="备注" />
</el-table>
<div class="pagination">
<el-pagination v-if="total > 0" background
layout="total,prev, pager, next"
:hide-on-single-page="true"
v-model:current-page="page"
v-model:page-size="pageSize"
@current-change="fetchData()"
:total="total"/>
<el-pagination
v-if="total > 0"
background
layout="total,prev, pager, next"
:hide-on-single-page="true"
v-model:current-page="page"
v-model:page-size="pageSize"
@current-change="fetchData()"
:total="total"
/>
</div>
</el-row>
<el-empty :image-size="100" v-else/>
<el-empty :image-size="100" v-else />
</div>
</template>
<script setup>
import {onMounted, ref} from "vue";
import {httpPost} from "@/utils/http";
import {ElMessage} from "element-plus";
import {dateFormat} from "@/utils/libs";
import {Search} from "@element-plus/icons-vue";
import { onMounted, ref } from "vue";
import { httpPost } from "@/utils/http";
import { ElMessage } from "element-plus";
import { dateFormat } from "@/utils/libs";
import { Search } from "@element-plus/icons-vue";
import Clipboard from "clipboard";
const items = ref([])
const total = ref(0)
const page = ref(1)
const pageSize = ref(20)
const loading = ref(false)
const items = ref([]);
const total = ref(0);
const page = ref(1);
const pageSize = ref(20);
const loading = ref(false);
const query = ref({
model: "",
date: [],
type: 0
})
const totalPower = ref(0)
type: 0,
});
const totalPower = ref(0);
const tagColors = ref(["", "success", "primary", "danger", "info", "warning"])
const tagColors = ref(["", "success", "primary", "danger", "info", "warning"]);
onMounted(() => {
fetchData()
const clipboard = new Clipboard('.copy-order-no');
clipboard.on('success', () => {
fetchData();
const clipboard = new Clipboard(".copy-order-no");
clipboard.on("success", () => {
ElMessage.success("复制成功！");
})
});
clipboard.on('error', () => {
ElMessage.error('复制失败！');
})
})
clipboard.on("error", () => {
ElMessage.error("复制失败！");
});
});
// 搜索
const search = () => {
page.value = 1
fetchData()
}
page.value = 1;
fetchData();
};
// 获取数据
const fetchData = () => {
loading.value = true
httpPost('/api/admin/powerLog/list', {
loading.value = true;
httpPost("/api/admin/powerLog/list", {
model: query.value.model,
date: query.value.date,
type: query.value.type,
page: page.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);
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);
});
};
</script>
<style lang="stylus" scoped>
@@ -157,11 +160,10 @@ const fetchData = () => {
}
.pagination {
padding 20px 0
display flex
width 100%
justify-content right
margin-top: 20px;
display flex;
justify-content: right;
}
}
</style>
</style>

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

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

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

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