feat: refactor user list page for new UI

This commit is contained in:
RockYang 2024-03-15 09:29:19 +08:00
parent 960d294aa2
commit 9e2af9dbca
9 changed files with 187 additions and 159 deletions

View File

@ -157,6 +157,7 @@ type ModelAPIConfig struct {
type SystemConfig struct { type SystemConfig struct {
Title string `json:"title"` Title string `json:"title"`
AdminTitle string `json:"admin_title"` AdminTitle string `json:"admin_title"`
Logo string `json:"logo"`
InitPower int `json:"init_power"` // 新用户注册赠送算力值 InitPower int `json:"init_power"` // 新用户注册赠送算力值
RegisterWays []string `json:"register_ways"` // 注册方式:支持手机,邮箱注册 RegisterWays []string `json:"register_ways"` // 注册方式:支持手机,邮箱注册

View File

@ -79,12 +79,12 @@ func (h *ConfigHandler) Get(c *gin.Context) {
return return
} }
var m map[string]interface{} var value map[string]interface{}
err := utils.JsonDecode(config.Config, &m) err := utils.JsonDecode(config.Config, &value)
if err != nil { if err != nil {
resp.ERROR(c, err.Error()) resp.ERROR(c, err.Error())
return return
} }
resp.SUCCESS(c, m) resp.SUCCESS(c, value)
} }

View File

@ -8,7 +8,7 @@ type User struct {
Nickname string `json:"nickname"` Nickname string `json:"nickname"`
Avatar string `json:"avatar"` Avatar string `json:"avatar"`
Salt string `json:"salt"` // 密码盐 Salt string `json:"salt"` // 密码盐
Power int `json:"calls"` // 剩余算力 Power int `json:"power"` // 剩余算力
ChatConfig types.UserChatConfig `json:"chat_config"` // 聊天配置 ChatConfig types.UserChatConfig `json:"chat_config"` // 聊天配置
ChatRoles []string `json:"chat_roles"` // 聊天角色集合 ChatRoles []string `json:"chat_roles"` // 聊天角色集合
ChatModels []string `json:"chat_models"` // AI模型集合 ChatModels []string `json:"chat_models"` // AI模型集合

View File

@ -1,2 +0,0 @@
VITE_PROXY_BASE_URL="/api"
VITE_TARGET_URL="http://172.22.11.2:5678"

View File

@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ChatPlus-Ai</title> <title>极客AI助手-控制台</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

View File

@ -8,17 +8,28 @@ import donateImg from "/images/wechat-pay.png";
import SystemMenu from "./SystemMenu.vue"; import SystemMenu from "./SystemMenu.vue";
import PageWrapper from "./PageWrapper.vue"; import PageWrapper from "./PageWrapper.vue";
import {getConfig} from "@/views/System/api";
import {onMounted, ref} from "vue";
const logoWidth = "200px"; const logoWidth = "200px";
const authStore = useAuthStore(); const authStore = useAuthStore();
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
const system = ref({})
const reload = async () => {
system.value = (await getConfig({key: "system"})).data;
};
onMounted(async () => {
reload();
});
</script> </script>
<template> <template>
<ALayout class="custom-layout"> <ALayout class="custom-layout">
<ALayoutHeader class="custom-layout-header"> <ALayoutHeader class="custom-layout-header">
<div class="logo"> <div class="logo">
<img :src="Logo" alt="logo"/> <img :src="Logo" alt="logo"/>
<span>ChatPlus 控制台</span> <span>{{ system?.admin_title }}</span>
</div> </div>
<div class="action"> <div class="action">
<ADropdown> <ADropdown>
@ -38,7 +49,7 @@ const [visible, setVisible] = useState(false);
<template #icon> <template #icon>
<icon-github/> <icon-github/>
</template> </template>
<span>ChatPlus-AI 创作系统</span> <span>{{ system?.title }}</span>
</ADoption> </ADoption>
</a> </a>
<ADoption value="2" @click="setVisible(true)"> <ADoption value="2" @click="setVisible(true)">
@ -90,23 +101,27 @@ const [visible, setVisible] = useState(false);
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
&-header { &-header {
display: flex; display: flex;
width: 100%; width: 100%;
height: 60px; height: 60px;
align-items: center; align-items: center;
border-bottom: 1px solid var(--color-neutral-2); border-bottom: 1px solid var(--color-neutral-2);
.logo { .logo {
display: flex; display: flex;
width: v-bind("logoWidth"); width: v-bind("logoWidth");
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 12px; gap: 12px;
img { img {
width: 30px; width: 30px;
height: 30px; height: 30px;
} }
} }
.action { .action {
display: flex; display: flex;
padding: 0 12px; padding: 0 12px;
@ -116,14 +131,17 @@ const [visible, setVisible] = useState(false);
} }
} }
} }
.dropdown-link { .dropdown-link {
text-decoration: none; text-decoration: none;
} }
.donate-dialog { .donate-dialog {
p { p {
text-align: center; text-align: center;
} }
} }
.logout-area { .logout-area {
padding: 8px 0; padding: 8px 0;
display: flex; display: flex;

View File

@ -46,32 +46,45 @@ onMounted(async () => {
<a-form-item label="控制台标题" field="admin_title"> <a-form-item label="控制台标题" field="admin_title">
<a-input v-model="system['admin_title']"/> <a-input v-model="system['admin_title']"/>
</a-form-item> </a-form-item>
<a-form-item label="注册赠送对话次数" field="user_init_calls"> <a-form-item label="网站Logo" field="logo">
<a-input v-model.number="system['init_chat_calls']" placeholder="新用户注册赠送对话次数" /> <SystemUploader v-model="system['logo']" placeholder="推荐图片宽高比为 1:1"/>
</a-form-item> </a-form-item>
<a-form-item label="注册赠送绘图次数" field="init_img_calls"> <a-form-item label="注册赠送算力" field="init_power">
<a-input v-model.number="system['init_img_calls']" placeholder="新用户注册赠送绘图次数" /> <a-input-number v-model="system['init_power']" placeholder="新用户注册赠送初始算力"/>
</a-form-item> </a-form-item>
<a-form-item label="邀请赠送对话次数" field="invite_chat_calls"> <a-form-item label="邀请用户赠送算力" field="invite_power">
<a-input <a-input-number
v-model.number="system['invite_chat_calls']" v-model="system['invite_power']"
placeholder="邀请新用户注册赠送对话次数" placeholder="邀请新用户注册赠送算力"
/> />
</a-form-item> </a-form-item>
<a-form-item label="邀请赠送绘图次数" field="invite_img_calls">
<a-input <a-form-item label="VIP每月赠送算力" field="vip_month_power">
v-model.number="system['invite_img_calls']" <a-input-number v-model="system['vip_month_power']" placeholder="VIP用户每月赠送算力"/>
placeholder="邀请新用户注册赠送绘图次数"
/>
</a-form-item> </a-form-item>
<a-form-item label="VIP每月对话次数" field="vip_month_calls"> <a-form-item label="MJ绘画价格" field="mj_power">
<a-input v-model.number="system['vip_month_calls']" placeholder="VIP用户每月赠送对话次数" /> <a-space>
<a-input-number v-model="system['mj_power']" placeholder=""/>
<a-tooltip content="MidJourney 单次绘图消耗多少单位算力" position="right">
<icon-info-circle-fill size="18"/>
</a-tooltip>
</a-space>
</a-form-item> </a-form-item>
<a-form-item label="VIP每月绘图次数" field="vip_month_img_calls"> <a-form-item label="SD绘画价格" field="sd_power">
<a-input <a-space>
v-model.number="system['vip_month_img_calls']" <a-input-number v-model="system['sd_power']" placeholder=""/>
placeholder="VIP用户每月赠送绘图次数" <a-tooltip content="Stable-Diffusion 单次绘图消耗多少单位算力" position="right">
/> <icon-info-circle-fill size="18"/>
</a-tooltip>
</a-space>
</a-form-item>
<a-form-item label="DALL绘画价格" field="dall_power">
<a-space>
<a-input-number v-model="system['dall_power']" placeholder=""/>
<a-tooltip content="DALL-E-3 单次绘图消耗多少单位算力" position="right">
<icon-info-circle-fill size="18"/>
</a-tooltip>
</a-space>
</a-form-item> </a-form-item>
<a-form-item label="开放注册" field="enabled_register"> <a-form-item label="开放注册" field="enabled_register">
<a-space> <a-space>
@ -90,17 +103,14 @@ onMounted(async () => {
<a-form-item label="启用众筹功能" field="enabled_reward"> <a-form-item label="启用众筹功能" field="enabled_reward">
<a-space> <a-space>
<a-switch v-model="system['enabled_reward']"/> <a-switch v-model="system['enabled_reward']"/>
<a-tooltip content="如果关闭次功能将不在用户菜单显示众筹二维码" position="right"> <a-tooltip content="开启众筹功能允许用户使用个人微信收款码进行收款" position="right">
<icon-info-circle-fill size="18"/> <icon-info-circle-fill size="18"/>
</a-tooltip> </a-tooltip>
</a-space> </a-space>
</a-form-item> </a-form-item>
<template v-if="system['enabled_reward']"> <template v-if="system['enabled_reward']">
<a-form-item label="单次对话价格" field="chat_call_price"> <a-form-item label="众筹算力单价" field="power_price">
<a-input v-model="system['chat_call_price']" placeholder="众筹金额跟对话次数的兑换比例" /> <a-input-number v-model="system['power_price']" placeholder="单位算力价格如1块10个单位算力那便填写 0.1"/>
</a-form-item>
<a-form-item label="单次绘图价格" field="img_call_price">
<a-input v-model="system['img_call_price']" placeholder="众筹金额跟绘图次数的兑换比例" />
</a-form-item> </a-form-item>
<a-form-item label="收款二维码" field="reward_img"> <a-form-item label="收款二维码" field="reward_img">
<SystemUploader v-model="system['reward_img']" placeholder="众筹收款二维码地址"/> <SystemUploader v-model="system['reward_img']" placeholder="众筹收款二维码地址"/>
@ -111,8 +121,8 @@ onMounted(async () => {
</a-form-item> </a-form-item>
<a-form-item label="订单超时时间" field="order_pay_timeout"> <a-form-item label="订单超时时间" field="order_pay_timeout">
<a-space style="width: 100%"> <a-space style="width: 100%">
<a-input <a-input-number
v-model.number="system['order_pay_timeout']" v-model="system['order_pay_timeout']"
placeholder="单位:秒" placeholder="单位:秒"
style="width: 100%" style="width: 100%"
/> />

View File

@ -7,6 +7,7 @@ import { Message } from "@arco-design/web-vue";
import {dateFormat} from "@gpt-vue/packages/utils"; import {dateFormat} from "@gpt-vue/packages/utils";
import UserPassword from "./UserPassword.vue"; import UserPassword from "./UserPassword.vue";
import useCustomFormPopup from "@/composables/useCustomFormPopup"; import useCustomFormPopup from "@/composables/useCustomFormPopup";
const columns: SearchTableColumns[] = [ const columns: SearchTableColumns[] = [
{ {
title: "账号", title: "账号",
@ -16,16 +17,8 @@ const columns: SearchTableColumns[] = [
}, },
}, },
{ {
title: "剩余对话次数", title: "剩余算力",
dataIndex: "calls", dataIndex: "power",
},
{
title: "剩余绘图次数",
dataIndex: "img_calls",
},
{
title: "累计消耗tokens",
dataIndex: "total_tokens",
}, },
{ {
title: "状态", title: "状态",
@ -39,7 +32,11 @@ const columns: SearchTableColumns[] = [
dataIndex: "expired_time", dataIndex: "expired_time",
width: 180, width: 180,
render: ({record}) => { render: ({record}) => {
return dateFormat(record.expired_time); if (record.expired_time > 0) {
return dateFormat(record.expired_time)
} else {
return '长期有效'
}
}, },
}, },
{ {
@ -85,7 +82,10 @@ const handleDelete = async ({ id }: { id: string }, reload) => {
</template> </template>
<template #search-extra="{ reload }"> <template #search-extra="{ reload }">
<a-button @click="editModal({ reload })" size="small" type="primary"> <a-button @click="editModal({ reload })" size="small" type="primary">
<template #icon> <icon-plus /> </template>新增 <template #icon>
<icon-plus/>
</template>
新增
</a-button> </a-button>
</template> </template>
</SearchTable> </SearchTable>

View File

@ -69,6 +69,7 @@
<script setup> <script setup>
import {ref, defineExpose, defineProps} from "vue"; import {ref, defineExpose, defineProps} from "vue";
import {getModel, getRole} from "./api"; import {getModel, getRole} from "./api";
const props = defineProps({ const props = defineProps({
data: {}, data: {},
}); });