mirror of
https://github.com/yangjian102621/geekai.git
synced 2025-09-18 01:06:39 +08:00
fine-tune page styles, use iframe to load external page in navigation bar
This commit is contained in:
RockYang
parent
989b4a64d6
commit
cbf06eea24
@ -277,7 +277,7 @@
|
||||
}
|
||||
|
||||
.pagination {
|
||||
padding 10px 20px
|
||||
margin-top 20px
|
||||
display flex
|
||||
justify-content center
|
||||
}
|
||||
|
||||
@ -58,7 +58,8 @@ body {
|
||||
.container {
|
||||
padding: 15px 20px 30px 20px;
|
||||
background: #ffffff;
|
||||
margin-bottom 80px
|
||||
margin-bottom 20px
|
||||
max-width 100%
|
||||
}
|
||||
|
||||
.crumbs {
|
||||
|
||||
@ -382,7 +382,7 @@
|
||||
}
|
||||
|
||||
.pagination {
|
||||
padding 10px 20px
|
||||
margin-top 20px
|
||||
display flex
|
||||
justify-content center
|
||||
}
|
||||
|
||||
@ -1,32 +1,37 @@
|
||||
<template>
|
||||
<div class="page-iframe" v-loading="loading"
|
||||
<div
|
||||
class="page-iframe"
|
||||
v-loading="loading"
|
||||
style="--el-color-primary: #47fff1"
|
||||
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>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { useRouter } from "vue-router";
|
||||
import {computed, ref} from "vue";
|
||||
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 {
|
||||
|
||||
@ -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 />
|
||||
@ -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) {
|
||||
|
||||
@ -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) => {
|
||||
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) => {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -158,7 +158,7 @@ const fetchData = () => {
|
||||
display flex
|
||||
justify-content center
|
||||
width 100%
|
||||
padding 20px
|
||||
margin-top 20px
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,7 +13,7 @@
|
||||
</div>
|
||||
|
||||
<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="value" label="API KEY">
|
||||
<template #default="scope">
|
||||
@ -46,7 +40,7 @@
|
||||
|
||||
<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>
|
||||
@ -69,29 +63,21 @@
|
||||
</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-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-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">-->
|
||||
@ -123,21 +109,22 @@ 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" },
|
||||
@ -146,117 +133,124 @@ const types = ref([
|
||||
{ label: "Suno文生歌", value: "suno" },
|
||||
{ label: "Luma视频", value: "luma" },
|
||||
{ label: "Realtime API", value: "realtime" },
|
||||
])
|
||||
const isEdit = ref(false)
|
||||
const clipboard = ref(null)
|
||||
]);
|
||||
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) => {
|
||||
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)
|
||||
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)
|
||||
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)
|
||||
})
|
||||
.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("删除成功！")
|
||||
httpGet("/api/admin/apikey/remove?id=" + row.id)
|
||||
.then(() => {
|
||||
ElMessage.success("删除成功！");
|
||||
items.value = removeArrayItem(items.value, row, (v1, v2) => {
|
||||
return v1.id === v2.id
|
||||
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>
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -3,10 +3,8 @@
|
||||
<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"
|
||||
@ -14,14 +12,14 @@
|
||||
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="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 :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">
|
||||
@ -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,7 +49,7 @@
|
||||
</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="失败原因">
|
||||
@ -90,25 +82,24 @@
|
||||
</el-row>
|
||||
|
||||
<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"
|
||||
: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"/>
|
||||
|
||||
: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"
|
||||
@ -116,14 +107,14 @@
|
||||
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="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 :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">
|
||||
@ -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,7 +139,7 @@
|
||||
</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="失败原因">
|
||||
@ -187,24 +172,24 @@
|
||||
</el-row>
|
||||
|
||||
<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"
|
||||
: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"/>
|
||||
|
||||
: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"
|
||||
@ -212,14 +197,14 @@
|
||||
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="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 :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">
|
||||
@ -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,7 +229,7 @@
|
||||
</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="失败原因">
|
||||
@ -283,36 +262,25 @@
|
||||
</el-row>
|
||||
|
||||
<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"
|
||||
: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"/>
|
||||
|
||||
: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>
|
||||
|
||||
@ -325,132 +293,140 @@ import {Search} from "@element-plus/icons-vue";
|
||||
|
||||
// 变量定义
|
||||
const data = ref({
|
||||
"mj": {
|
||||
mj: {
|
||||
items: [],
|
||||
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 },
|
||||
total: 0,
|
||||
page: 1,
|
||||
pageSize: 15,
|
||||
loading: true
|
||||
loading: true,
|
||||
},
|
||||
"dall": {
|
||||
dall: {
|
||||
items: [],
|
||||
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"}
|
||||
}
|
||||
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) => {
|
||||
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) => {
|
||||
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.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);
|
||||
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) => {
|
||||
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.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);
|
||||
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) => {
|
||||
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.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);
|
||||
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)
|
||||
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>
|
||||
@ -10,8 +10,7 @@
|
||||
|
||||
<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 />
|
||||
@ -19,8 +18,7 @@
|
||||
</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 />
|
||||
@ -42,7 +40,6 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import { ref } from "vue";
|
||||
import { Lock, UserFilled } from "@element-plus/icons-vue";
|
||||
import { httpPost } from "@/utils/http";
|
||||
@ -54,57 +51,60 @@ 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>
|
||||
@ -1,29 +1,30 @@
|
||||
<template>
|
||||
<div class="container list" v-loading="loading">
|
||||
<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="登录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
|
||||
<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"/>
|
||||
|
||||
:total="total"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -34,30 +35,32 @@ 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) => {
|
||||
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
|
||||
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("获取数据失败");
|
||||
loading.value = false;
|
||||
})
|
||||
}
|
||||
.catch(() => {
|
||||
ElMessage.error("获取数据失败");
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@ -72,9 +75,9 @@ const fetchList = function (_page, _pageSize) {
|
||||
}
|
||||
|
||||
.pagination {
|
||||
padding 20px 0
|
||||
margin-top 20px
|
||||
display flex
|
||||
justify-content right
|
||||
justify-content center
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -3,10 +3,8 @@
|
||||
<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"
|
||||
@ -14,14 +12,14 @@
|
||||
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="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 :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">
|
||||
@ -52,7 +50,7 @@
|
||||
</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="失败原因">
|
||||
@ -85,24 +83,24 @@
|
||||
</el-row>
|
||||
|
||||
<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"
|
||||
: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"/>
|
||||
|
||||
: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"
|
||||
@ -110,29 +108,26 @@
|
||||
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="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 :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="" />
|
||||
</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>
|
||||
@ -145,13 +140,7 @@
|
||||
<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,7 +149,7 @@
|
||||
</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="失败原因">
|
||||
@ -193,26 +182,24 @@
|
||||
</el-row>
|
||||
|
||||
<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"
|
||||
: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"/>
|
||||
|
||||
: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,13 +208,9 @@
|
||||
<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>
|
||||
|
||||
@ -242,120 +225,125 @@ import Generating from "@/components/ui/Generating.vue";
|
||||
|
||||
// 变量定义
|
||||
const data = ref({
|
||||
"suno": {
|
||||
suno: {
|
||||
items: [],
|
||||
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 },
|
||||
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) => {
|
||||
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) => {
|
||||
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.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);
|
||||
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) => {
|
||||
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.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);
|
||||
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)
|
||||
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 {
|
||||
|
||||
@ -3,12 +3,7 @@
|
||||
<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"
|
||||
@ -17,14 +12,14 @@
|
||||
end-placeholder="结束日期"
|
||||
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="danger" :icon="Delete" @click="clearOrders">清空未支付订单</el-button>
|
||||
</div>
|
||||
|
||||
<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="trade_no" label="交易号" />
|
||||
<el-table-column prop="username" label="下单用户" />
|
||||
@ -38,13 +33,13 @@
|
||||
|
||||
<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>
|
||||
@ -64,14 +59,16 @@
|
||||
</el-row>
|
||||
|
||||
<div class="pagination">
|
||||
<el-pagination v-if="total > 0" background
|
||||
<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"/>
|
||||
|
||||
:total="total"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -84,66 +81,66 @@ 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: "已支付" },
|
||||
])
|
||||
]);
|
||||
|
||||
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) => {
|
||||
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
|
||||
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);
|
||||
loading.value = false;
|
||||
})
|
||||
}
|
||||
.catch((e) => {
|
||||
ElMessage.error("获取数据失败：" + e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const remove = function (row) {
|
||||
httpGet('/api/admin/order/remove?id=' + row.id).then(() => {
|
||||
ElMessage.success("删除成功！")
|
||||
httpGet("/api/admin/order/remove?id=" + row.id)
|
||||
.then(() => {
|
||||
ElMessage.success("删除成功！");
|
||||
items.value = removeArrayItem(items.value, row, (v1, v2) => {
|
||||
return v1.id === v2.id
|
||||
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,7 +169,7 @@ const clearOrders = () => {
|
||||
}
|
||||
|
||||
.pagination {
|
||||
padding 20px 0
|
||||
margin-top: 20px;
|
||||
display flex
|
||||
justify-content right
|
||||
}
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
end-placeholder="结束日期"
|
||||
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>
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
</div>
|
||||
|
||||
<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="model" label="模型" />
|
||||
<el-table-column prop="type" label="类型">
|
||||
@ -44,25 +44,26 @@
|
||||
<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>
|
||||
|
||||
<div class="pagination">
|
||||
<el-pagination v-if="total > 0" background
|
||||
<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"/>
|
||||
|
||||
:total="total"
|
||||
/>
|
||||
</div>
|
||||
</el-row>
|
||||
<el-empty :image-size="100" v-else />
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -74,62 +75,64 @@ 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,10 +160,9 @@ const fetchData = () => {
|
||||
}
|
||||
|
||||
.pagination {
|
||||
padding 20px 0
|
||||
display flex
|
||||
width 100%
|
||||
justify-content right
|
||||
margin-top: 20px;
|
||||
display flex;
|
||||
justify-content: right;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -3,22 +3,15 @@
|
||||
<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="code" label="兑换码">
|
||||
@ -31,7 +24,7 @@
|
||||
</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>
|
||||
@ -39,21 +32,20 @@
|
||||
|
||||
<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,24 +58,23 @@
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
</el-row>
|
||||
|
||||
<div class="pagination">
|
||||
<el-pagination v-if="total > 0" background
|
||||
<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"/>
|
||||
|
||||
: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">
|
||||
@ -120,126 +111,134 @@ 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)
|
||||
]);
|
||||
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) => {
|
||||
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
|
||||
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);
|
||||
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 => {
|
||||
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');
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.setAttribute('download', UUID() + ".csv"); // 设置下载文件的名称
|
||||
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("下载失败")
|
||||
exporting.value = false;
|
||||
})
|
||||
}
|
||||
|
||||
.catch(() => {
|
||||
exporting.value = false;
|
||||
showMessageError("下载失败");
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@ -276,9 +275,9 @@ const exportItems = () => {
|
||||
}
|
||||
|
||||
.pagination {
|
||||
padding 20px 0
|
||||
display flex
|
||||
justify-content right
|
||||
margin-top: 20px;
|
||||
display flex;
|
||||
justify-content: right;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -363,7 +363,7 @@ const doResetPass = () => {
|
||||
}
|
||||
|
||||
.pagination {
|
||||
padding 20px 0
|
||||
margin-top: 20px;
|
||||
display flex
|
||||
justify-content right
|
||||
width 100%
|
||||
|
||||
Loading…
Reference in New Issue
Block a user