feat: refactor user list page for new UI

2025-09-20 10:16:39 +08:00 · 2024-03-15 09:29:19 +08:00 · 2024-03-15 09:29:19 +08:00 · 9e2af9dbca
commit 9e2af9dbca
parent 960d294aa2
9 changed files with 187 additions and 159 deletions
--- a/api/core/types/config.go
+++ b/api/core/types/config.go
@ -157,6 +157,7 @@ type ModelAPIConfig struct {
 type SystemConfig struct {
 	Title      string `json:"title"`
 	AdminTitle string `json:"admin_title"`
+	Logo       string `json:"logo"`
 	InitPower  int    `json:"init_power"` // 新用户注册赠送算力值

 	RegisterWays    []string `json:"register_ways"`    // 注册方式：支持手机，邮箱注册
--- a/api/handler/admin/config_handler.go
+++ b/api/handler/admin/config_handler.go
@ -79,12 +79,12 @@ func (h *ConfigHandler) Get(c *gin.Context) {
 		return
 	}

-	var m map[string]interface{}
-	err := utils.JsonDecode(config.Config, &m)
+	var value map[string]interface{}
+	err := utils.JsonDecode(config.Config, &value)
 	if err != nil {
 		resp.ERROR(c, err.Error())
 		return
 	}

-	resp.SUCCESS(c, m)
+	resp.SUCCESS(c, value)
 }
--- a/api/store/vo/user.go
+++ b/api/store/vo/user.go
@ -8,7 +8,7 @@ type User struct {
 	Nickname    string               `json:"nickname"`
 	Avatar      string               `json:"avatar"`
 	Salt        string               `json:"salt"`          // 密码盐
-	Power       int                  `json:"calls"`         // 剩余算力
+	Power       int                  `json:"power"`         // 剩余算力
 	ChatConfig  types.UserChatConfig `json:"chat_config"`   // 聊天配置
 	ChatRoles   []string             `json:"chat_roles"`    // 聊天角色集合
 	ChatModels  []string             `json:"chat_models"`   // AI模型集合
--- a/gpt-vue/projects/vue-admin/.env.development
+++ b/gpt-vue/projects/vue-admin/.env.development
@ -1,2 +0,0 @@
-VITE_PROXY_BASE_URL="/api"
-VITE_TARGET_URL="http://172.22.11.2:5678"
--- a/new-ui/projects/vue-admin/index.html
+++ b/new-ui/projects/vue-admin/index.html
@ -4,7 +4,7 @@
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ChatPlus-Ai</title>
+    <title>极客AI助手-控制台</title>
 </head>
 <body>
 <div id="app"></div>
--- a/new-ui/projects/vue-admin/src/components/CustomLayout.vue
+++ b/new-ui/projects/vue-admin/src/components/CustomLayout.vue
@ -8,17 +8,28 @@ import donateImg from "/images/wechat-pay.png";

 import SystemMenu from "./SystemMenu.vue";
 import PageWrapper from "./PageWrapper.vue";
+import {getConfig} from "@/views/System/api";
+import {onMounted, ref} from "vue";

 const logoWidth = "200px";
 const authStore = useAuthStore();
 const [visible, setVisible] = useState(false);
+
+const system = ref({})
+const reload = async () => {
+  system.value = (await getConfig({key: "system"})).data;
+};
+
+onMounted(async () => {
+  reload();
+});
 </script>
 <template>
  <ALayout class="custom-layout">
    <ALayoutHeader class="custom-layout-header">
      <div class="logo">
        <img :src="Logo" alt="logo"/>
-        <span>ChatPlus 控制台</span>
+        <span>{{ system?.admin_title }}</span>
      </div>
      <div class="action">
        <ADropdown>
@ -38,7 +49,7 @@ const [visible, setVisible] = useState(false);
                <template #icon>
                  <icon-github/>
                </template>
-                <span>ChatPlus-AI 创作系统</span>
+                <span>{{ system?.title }}</span>
              </ADoption>
            </a>
            <ADoption value="2" @click="setVisible(true)">
@ -90,23 +101,27 @@ const [visible, setVisible] = useState(false);
  width: 100vw;
  height: 100vh;
  overflow: hidden;
+
  &-header {
    display: flex;
    width: 100%;
    height: 60px;
    align-items: center;
    border-bottom: 1px solid var(--color-neutral-2);
+
    .logo {
      display: flex;
      width: v-bind("logoWidth");
      align-items: center;
      justify-content: center;
      gap: 12px;
+
      img {
        width: 30px;
        height: 30px;
      }
    }
+
    .action {
      display: flex;
      padding: 0 12px;
@ -116,14 +131,17 @@ const [visible, setVisible] = useState(false);
    }
  }
 }
+
 .dropdown-link {
  text-decoration: none;
 }
+
 .donate-dialog {
  p {
    text-align: center;
  }
 }
+
 .logout-area {
  padding: 8px 0;
  display: flex;
--- a/new-ui/projects/vue-admin/src/views/System/SystemBaseConfig.vue
+++ b/new-ui/projects/vue-admin/src/views/System/SystemBaseConfig.vue
@ -46,32 +46,45 @@ onMounted(async () => {
      <a-form-item label="控制台标题" field="admin_title">
        <a-input v-model="system['admin_title']"/>
      </a-form-item>
-      <a-form-item label="注册赠送对话次数" field="user_init_calls">
-        <a-input v-model.number="system['init_chat_calls']" placeholder="新用户注册赠送对话次数" />
+      <a-form-item label="网站Logo" field="logo">
+        <SystemUploader v-model="system['logo']" placeholder="推荐图片宽高比为 1:1"/>
      </a-form-item>
-      <a-form-item label="注册赠送绘图次数" field="init_img_calls">
-        <a-input v-model.number="system['init_img_calls']" placeholder="新用户注册赠送绘图次数" />
+      <a-form-item label="注册赠送算力" field="init_power">
+        <a-input-number v-model="system['init_power']" placeholder="新用户注册赠送初始算力"/>
      </a-form-item>
-      <a-form-item label="邀请赠送对话次数" field="invite_chat_calls">
-        <a-input
-          v-model.number="system['invite_chat_calls']"
-          placeholder="邀请新用户注册赠送对话次数"
+      <a-form-item label="邀请用户赠送算力" field="invite_power">
+        <a-input-number
+            v-model="system['invite_power']"
+            placeholder="邀请新用户注册赠送算力"
        />
      </a-form-item>
-      <a-form-item label="邀请赠送绘图次数" field="invite_img_calls">
-        <a-input
-          v-model.number="system['invite_img_calls']"
-          placeholder="邀请新用户注册赠送绘图次数"
-        />
+
+      <a-form-item label="VIP每月赠送算力" field="vip_month_power">
+        <a-input-number v-model="system['vip_month_power']" placeholder="VIP用户每月赠送算力"/>
      </a-form-item>
-      <a-form-item label="VIP每月对话次数" field="vip_month_calls">
-        <a-input v-model.number="system['vip_month_calls']" placeholder="VIP用户每月赠送对话次数" />
+      <a-form-item label="MJ绘画价格" field="mj_power">
+        <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 label="VIP每月绘图次数" field="vip_month_img_calls">
-        <a-input
-          v-model.number="system['vip_month_img_calls']"
-          placeholder="VIP用户每月赠送绘图次数"
-        />
+      <a-form-item label="SD绘画价格" field="sd_power">
+        <a-space>
+          <a-input-number v-model="system['sd_power']" placeholder=""/>
+          <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 label="开放注册" field="enabled_register">
        <a-space>
@ -90,17 +103,14 @@ onMounted(async () => {
      <a-form-item label="启用众筹功能" field="enabled_reward">
        <a-space>
          <a-switch v-model="system['enabled_reward']"/>
-          <a-tooltip content="如果关闭次功能将不在用户菜单显示众筹二维码" position="right">
+          <a-tooltip content="开启众筹功能允许用户使用个人微信收款码进行收款" position="right">
            <icon-info-circle-fill size="18"/>
          </a-tooltip>
        </a-space>
      </a-form-item>
      <template v-if="system['enabled_reward']">
-        <a-form-item label="单次对话价格" field="chat_call_price">
-          <a-input v-model="system['chat_call_price']" placeholder="众筹金额跟对话次数的兑换比例" />
-        </a-form-item>
-        <a-form-item label="单次绘图价格" field="img_call_price">
-          <a-input v-model="system['img_call_price']" placeholder="众筹金额跟绘图次数的兑换比例" />
+        <a-form-item label="众筹算力单价" field="power_price">
+          <a-input-number v-model="system['power_price']" placeholder="单位算力价格，如1块10个单位算力，那便填写 0.1"/>
        </a-form-item>
        <a-form-item label="收款二维码" field="reward_img">
          <SystemUploader v-model="system['reward_img']" placeholder="众筹收款二维码地址"/>
@ -111,8 +121,8 @@ onMounted(async () => {
      </a-form-item>
      <a-form-item label="订单超时时间" field="order_pay_timeout">
        <a-space style="width: 100%">
-          <a-input
-            v-model.number="system['order_pay_timeout']"
+          <a-input-number
+              v-model="system['order_pay_timeout']"
              placeholder="单位：秒"
              style="width: 100%"
          />
--- a/new-ui/projects/vue-admin/src/views/User/UserContainer.vue
+++ b/new-ui/projects/vue-admin/src/views/User/UserContainer.vue
@ -7,6 +7,7 @@ import { Message } from "@arco-design/web-vue";
 import {dateFormat} from "@gpt-vue/packages/utils";
 import UserPassword from "./UserPassword.vue";
 import useCustomFormPopup from "@/composables/useCustomFormPopup";
+
 const columns: SearchTableColumns[] = [
  {
    title: "账号",
@ -16,16 +17,8 @@ const columns: SearchTableColumns[] = [
    },
  },
  {
-    title: "剩余对话次数",
-    dataIndex: "calls",
-  },
-  {
-    title: "剩余绘图次数",
-    dataIndex: "img_calls",
-  },
-  {
-    title: "累计消耗tokens",
-    dataIndex: "total_tokens",
+    title: "剩余算力",
+    dataIndex: "power",
  },
  {
    title: "状态",
@ -39,7 +32,11 @@ const columns: SearchTableColumns[] = [
    dataIndex: "expired_time",
    width: 180,
    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 #search-extra="{ reload }">
      <a-button @click="editModal({ reload })" size="small" type="primary">
-        <template #icon> <icon-plus /> </template>新增
+        <template #icon>
+          <icon-plus/>
+        </template>
+        新增
      </a-button>
    </template>
  </SearchTable>
--- a/new-ui/projects/vue-admin/src/views/User/UserForm.vue
+++ b/new-ui/projects/vue-admin/src/views/User/UserForm.vue
@ -69,6 +69,7 @@
 <script setup>
 import {ref, defineExpose, defineProps} from "vue";
 import {getModel, getRole} from "./api";
+
 const props = defineProps({
  data: {},
 });