fix(ui): 交互修复调整

2025-11-09 10:43:44 +08:00 · 2024-03-15 11:07:41 +08:00
parent b7cc987132
commit 72b0e11543
16 changed files with 230 additions and 218 deletions
--- a/new-ui/projects/admin/.vscode/extensions.json
+++ b/new-ui/projects/admin/.vscode/extensions.json
@@ -1,7 +0,0 @@
-{
-  "recommendations": [
-    "Vue.volar",
-    "Vue.vscode-typescript-vue-plugin",
-    "dbaeumer.vscode-eslint"
-  ]
-}
--- a/new-ui/projects/admin/src/components/CustomUploader.vue
+++ b/new-ui/projects/admin/src/components/CustomUploader.vue
@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import { computed } from "vue";
+import { Message } from "@arco-design/web-vue";
+import type { UploadInstance, FileItem } from "@arco-design/web-vue";
+import { uploadUrl } from "@/http/config";
+
+defineProps({
+  modelValue: String,
+  placeholder: String,
+});
+
+const emits = defineEmits(["update:modelValue"]);
+
+const uploadProps = computed<UploadInstance["$props"]>(() => {
+  const TOKEN = JSON.parse(localStorage.getItem(__AUTH_KEY))?.token;
+  return {
+    accept: "image/*",
+    action: uploadUrl,
+    name: "file",
+    headers: { [__AUTH_KEY]: TOKEN },
+    showFileList: false,
+  };
+});
+
+const handleChange = (_, file: FileItem) => {
+  if (file?.response) {
+    emits("update:modelValue", file?.response?.data?.url);
+    Message.success("上传成功");
+  }
+};
+</script>
+<template>
+  <a-upload v-bind="uploadProps" style="width: 100%" @change="handleChange">
+    <template #upload-button>
+      <a-input-group style="width: 100%">
+        <a-input
+          :model-value="modelValue"
+          :placeholder="placeholder"
+          readonly
+          allow-clear
+          @clear.stop="emits('update:modelValue')"
+        />
+        <a-button type="primary" style="width: 100px">
+          <icon-cloud />
+        </a-button>
+      </a-input-group>
+    </template>
+  </a-upload>
+</template>
--- a/new-ui/projects/admin/src/components/SimpleTable/SimpleTable.vue
+++ b/new-ui/projects/admin/src/components/SimpleTable/SimpleTable.vue
@@ -1,18 +1,17 @@
 <script lang="ts" setup>
-import { computed, ref, onActivated } from "vue";
+import { computed, onActivated } from "vue";
 import useAsyncTable from "./useAsyncTable";
 import { useTableScroll } from "@/components/SearchTable/utils";
-import { Message } from "@arco-design/web-vue";
+import { Message, type TableColumnData } from "@arco-design/web-vue";
 import type { TableRequest, TableOriginalProps } from "./useAsyncTable";

 interface SimpleTable extends /* @vue-ignore */ TableOriginalProps {
  request: TableRequest<Record<string, unknown>>;
  params?: Record<string, unknown>;
-  columns?: TableOriginalProps["columns"];
+  columns?: TableColumnData[];
 }

 const props = defineProps<SimpleTable>();
-const tableContainerRef = ref<HTMLElement>();

 // 表格请求参数
 const [tableConfig, getList] = useAsyncTable(props.request, props.params);
@@ -45,7 +44,7 @@ onActivated(handleSearch);
          ...$attrs,
          ...tableConfig,
          ...props,
-          scroll: useTableScroll(_columns || [], tableContainerRef as HTMLElement),
+          scroll: useTableScroll(_columns || []),
          columns: _columns,
        }"
      >
--- a/new-ui/projects/admin/src/views/ApiKey/ApiKeyContainer.vue
+++ b/new-ui/projects/admin/src/views/ApiKey/ApiKeyContainer.vue
@@ -2,11 +2,11 @@
 import { getList, save, deleting, setStatus } from "./api";
 import ApiKeyForm from "./ApiKeyForm.vue";
 import useCustomFormPopup from "@/composables/useCustomFormPopup";
-import { Message } from "@arco-design/web-vue";
+import { Message, type TableColumnData } from "@arco-design/web-vue";
 import SimpleTable from "@/components/SimpleTable/SimpleTable.vue";
 import { dateFormat } from "@chatgpt-plus/packages/utils";
 // table 配置
-const columns = [
+const columns: TableColumnData[] = [
  {
    title: "所属平台",
    dataIndex: "platform",
@@ -20,6 +20,11 @@ const columns = [
    dataIndex: "value",
    slotName: "value",
  },
+  {
+    title: "API URL",
+    dataIndex: "api_url",
+    slotName: "value",
+  },
  {
    title: "用途",
    dataIndex: "type",
@@ -85,17 +90,26 @@ const handleStatusChange = ({ filed, value, record, reload }) => {
 </script>
 <template>
  <SimpleTable :columns="columns" :request="getList">
+    <template #header="{ reload }">
+      <a-space>
+        <a-button @click="popup({ reload })" size="small" type="primary"
+          ><template #icon> <icon-plus /> </template>新增
+        </a-button>
+        <a-button type="primary" status="success" href="https://gpt.bemore.lol" target="_blank">
+          <template #icon>
+            <icon-link />
+          </template>
+          购买API-KEY
+        </a-button>
+      </a-space>
+    </template>
    <template #action="{ record, reload }">
      <a-link @click="popup({ record, reload })">编辑</a-link>
      <a-popconfirm content="确定删除？" @ok="handleDelete(record, reload)">
        <a-link status="danger">删除</a-link>
      </a-popconfirm>
    </template>
-    <template #header="{ reload }">
-      <a-button @click="popup({ reload })" size="small" type="primary"
-        ><template #icon> <icon-plus /> </template>新增
-      </a-button>
-    </template>
+
    <template #value="{ record, column }">
      <a-typography-text copyable ellipsis style="margin: 0">
        {{ record[column.dataIndex] }}
--- a/new-ui/projects/admin/src/views/ApiKey/ApiKeyForm.vue
+++ b/new-ui/projects/admin/src/views/ApiKey/ApiKeyForm.vue
@@ -1,9 +1,8 @@
 <template>
  <a-alert type="warning">
    <div class="warning">
-      {{
-        `注意：如果是百度文心一言平台，API-KEY 为 APIKey|SecretKey，中间用竖线（|）连接\n注意：如果是讯飞星火大模型，API-KEY 为 AppId|APIKey|APISecret，中间用竖线（|）连接`
-      }}
+      <div>注意：如果是百度文心一言平台，API-KEY 为 APIKey|SecretKey，中间用竖线（|）连接</div>
+      <div>注意：如果是讯飞星火大模型，API-KEY 为 AppId|APIKey|APISecret，中间用竖线（|）连接</div>
    </div>
  </a-alert>
  <a-form
@@ -18,7 +17,12 @@
      :rules="[{ required: true, message: '请输入所属平台' }]"
      :validate-trigger="['change', 'input']"
    >
-      <a-input v-model="form.platform" placeholder="请输入所属平台" />
+      <a-select
+        v-model="form.platform"
+        placeholder="请输入所属平台"
+        :options="platformOptions"
+        @change="handlePlatformChange"
+      />
    </a-form-item>
    <a-form-item
      field="name"
@@ -35,7 +39,12 @@
      :rules="[{ required: true, message: '请输入用途' }]"
      :validate-trigger="['change', 'input']"
    >
-      <a-select v-model="form.type" placeholder="请输入用途" :options="typeOPtions"> </a-select>
+      <a-select
+        v-model="form.type"
+        placeholder="请输入用途"
+        :options="typeOptions"
+        @change="handlePlatformChange"
+      />
    </a-form-item>
    <a-form-item
      field="value"
@@ -55,13 +64,15 @@
    </a-form-item>

    <a-form-item field="use_proxy" label="使用代理">
-      <a-switch v-model="form.use_proxy" />
-      <a-tooltip
-        content="是否使用代理访问 API URL，OpenAI 官方API需要开启代理访问"
-        position="right"
-      >
-        <icon-info-circle-fill />
-      </a-tooltip>
+      <a-space>
+        <a-switch v-model="form.use_proxy" />
+        <a-tooltip
+          content="是否使用代理访问 API URL，OpenAI 官方API需要开启代理访问"
+          position="right"
+        >
+          <icon-info-circle-fill />
+        </a-tooltip>
+      </a-space>
    </a-form-item>
    <a-form-item field="enable" label="启用状态">
      <a-switch v-model="form.enable" />
@@ -86,7 +97,7 @@ defineExpose({
  form,
 });

-const typeOPtions = [
+const typeOptions = [
  {
    label: "聊天",
    value: "chart",
@@ -96,6 +107,48 @@ const typeOPtions = [
    value: "img",
  },
 ];
+
+const platformOptions = [
+  {
+    label: "【OpenAI】ChatGPT",
+    value: "OpenAI",
+    api_url: "https://gpt.bemore.lol/v1/chat/completions",
+    img_url: "https://gpt.bemore.lol/v1/images/generations",
+  },
+  {
+    label: "【讯飞】星火大模型",
+    value: "XunFei",
+    api_url: "wss://spark-api.xf-yun.com/{version}/chat",
+  },
+  {
+    label: "【清华智普】ChatGLM",
+    value: "ChatGLM",
+    api_url: "https://open.bigmodel.cn/api/paas/v3/model-api/{model}/sse-invoke",
+  },
+  {
+    label: "【百度】文心一言",
+    value: "Baidu",
+    api_url: "https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/{model}",
+  },
+  {
+    label: "【微软】Azure",
+    value: "Azure",
+    api_url:
+      "https://chat-bot-api.openai.azure.com/openai/deployments/{model}/chat/completions?api-version=2023-05-15",
+  },
+  {
+    label: "【阿里】千义通问",
+    value: "QWen",
+    api_url: "https://dashscope.aliyuncs.com/api/v1/services/aigc/text-generation/generation",
+  },
+];
+
+const handlePlatformChange = () => {
+  const obj = platformOptions.find((item) => item.value === form.value.platform);
+  if (obj) {
+    form.value.api_url = form.value.type === "img" ? obj.img_url : obj.api_url;
+  }
+};
 </script>
 <style lang="less" scoped>
 .content-title {
--- a/new-ui/projects/admin/src/views/ChatModel/ChatModelContainer.vue
+++ b/new-ui/projects/admin/src/views/ChatModel/ChatModelContainer.vue
@@ -1,13 +1,12 @@
 <script lang="ts" setup>
 import { getList, save, deleting, setStatus } from "./api";
-import { ref } from "vue";
 import ChatModelForm from "./ChatModelForm.vue";
 import useCustomFormPopup from "@/composables/useCustomFormPopup";
-import { Message } from "@arco-design/web-vue";
+import { Message, type TableColumnData } from "@arco-design/web-vue";
 import SimpleTable from "@/components/SimpleTable/SimpleTable.vue";
 import { dateFormat } from "@chatgpt-plus/packages/utils";
 // table 配置
-const columns = [
+const columns: TableColumnData[] = [
  {
    title: "所属平台",
    dataIndex: "platform",
@@ -49,20 +48,9 @@ const columns = [
  },
 ];

-// 数据
-const tableData = ref([]);
-const getData = () => {
-  getList().then(({ code, data }) => {
-    if (code === 0) {
-      tableData.value = data;
-    }
-  });
-};
-getData();
-
 //  新增编辑
 const popup = useCustomFormPopup(ChatModelForm, save, {
-  popupProps: (arg) => ({ title: arg[0].record ? "编辑ApiKey" : "新增ApiKey" }),
+  popupProps: (arg) => ({ title: arg[0].record ? "编辑模型" : "新增模型" }),
 });

 // 删除
--- a/new-ui/projects/admin/src/views/ChatModel/ChatModelForm.vue
+++ b/new-ui/projects/admin/src/views/ChatModel/ChatModelForm.vue
@@ -6,7 +6,7 @@
      :rules="[{ required: true, message: '请输入所属平台' }]"
      :validate-trigger="['change', 'input']"
    >
-      <a-input v-model="form.platform" placeholder="请输入所属平台" />
+      <a-select v-model="form.platform" placeholder="请输入所属平台" :options="platformOptions" />
    </a-form-item>
    <a-form-item
      field="name"
@@ -33,10 +33,12 @@
      :validate-trigger="['change', 'input']"
      showable
    >
-      <a-input-number v-model="form.weight" placeholder="请输入对话权重" />
-      <a-tooltip content="对话权重，每次对话扣减多少次对话额度" position="right">
-        <icon-info-circle-fill />
-      </a-tooltip>
+      <a-space>
+        <a-input-number v-model="form.weight" placeholder="请输入对话权重" />
+        <a-tooltip content="对话权重，每次对话扣减多少次对话额度" position="right">
+          <icon-info-circle-fill />
+        </a-tooltip>
+      </a-space>
    </a-form-item>

    <a-form-item field="open" label="开放状态代理">
@@ -65,15 +67,13 @@ defineExpose({
  form,
 });

-const typeOPtions = [
-  {
-    label: "聊天",
-    value: "chart",
-  },
-  {
-    label: "绘图",
-    value: "img",
-  },
+const platformOptions = [
+  { label: "【OpenAI】ChatGPT", value: "OpenAI" },
+  { label: "【讯飞】星火大模型", value: "XunFei" },
+  { label: "【清华智普】ChatGLM", value: "ChatGLM" },
+  { label: "【百度】文心一言", value: "Baidu" },
+  { label: "【微软】Azure", value: "Azure" },
+  { label: "【阿里】通义千问", value: "QWen" },
 ];
 </script>
 <style lang="less" scoped>
--- a/new-ui/projects/admin/src/views/Chats/ChatsContainer.vue
+++ b/new-ui/projects/admin/src/views/Chats/ChatsContainer.vue
@@ -8,7 +8,7 @@ import app from "@/main";
 import { getList, message, remove } from "./api";
 import ChatsLogs from "./ChatsLogs.vue";

-const columns: SearchTableColumns[] = [
+const chatColumns: SearchTableColumns[] = [
  {
    dataIndex: "user_id",
    title: "账户ID",
@@ -42,10 +42,48 @@ const columns: SearchTableColumns[] = [
    dataIndex: "token",
    title: "消耗算力",
  },
+  {
+    dataIndex: "created_at",
+    title: "创建时间",
+    search: {
+      valueType: "range",
+    },
+    render: ({ record }) => dateFormat(record.created_at),
+  },
+  {
+    title: "操作",
+    fixed: "right",
+    slotName: "actions",
+  },
+];
+
+const messageColumns: SearchTableColumns[] = [
+  {
+    dataIndex: "user_id",
+    title: "账户ID",
+    search: {
+      valueType: "input",
+    },
+  },
  {
    dataIndex: "username",
    title: "账户",
  },
+  {
+    dataIndex: "title",
+    title: "标题",
+    search: {
+      valueType: "input",
+    },
+  },
+  {
+    dataIndex: "msg_num",
+    title: "消息数量",
+  },
+  {
+    dataIndex: "token",
+    title: "消耗算力",
+  },
  {
    dataIndex: "created_at",
    title: "创建时间",
@@ -62,8 +100,8 @@ const columns: SearchTableColumns[] = [
 ];

 const tabsList = [
-  { key: "1", title: "对话列表", api: getList, columns },
-  { key: "2", title: "消息记录", api: message, columns },
+  { key: "1", title: "对话列表", api: getList, columns: chatColumns },
+  { key: "2", title: "消息记录", api: message, columns: messageColumns },
 ];

 const activeKey = ref(tabsList[0].key);
@@ -101,7 +139,7 @@ const handleCheck = (record) => {
            content="是否删除？"
            position="left"
            type="warning"
-            :on-before-ok="() => handleRemove(record.id, reload)"
+            :on-before-ok="() => handleRemove(record.chat_id, reload)"
          >
            <a-link status="danger">删除</a-link>
          </a-popconfirm>
--- a/new-ui/projects/admin/src/views/Order/api.ts
+++ b/new-ui/projects/admin/src/views/Order/api.ts
@@ -8,10 +8,10 @@ export const getList = (data?: Record<string, unknown>) => {
  })
 }

-export const remove = (data) => {
+export const remove = (params) => {
  return http({
    url: "/api/admin/order/remove",
-    method: "post",
-    data
+    method: "get",
+    params
  })
 }
--- a/new-ui/projects/admin/src/views/Product/ProductContainer.vue
+++ b/new-ui/projects/admin/src/views/Product/ProductContainer.vue
@@ -1,13 +1,12 @@
 <script lang="ts" setup>
 import { getList, save, deleting, setStatus } from "./api";
-import { ref } from "vue";
 import ProductForm from "./ProductForm.vue";
 import useCustomFormPopup from "@/composables/useCustomFormPopup";
-import { Message } from "@arco-design/web-vue";
+import { Message, type TableColumnData } from "@arco-design/web-vue";
 import SimpleTable from "@/components/SimpleTable/SimpleTable.vue";
 import { dateFormat } from "@chatgpt-plus/packages/utils";
 // table 配置
-const columns = [
+const columns: TableColumnData[] = [
  {
    title: "产品名称",
    dataIndex: "name",
@@ -59,17 +58,6 @@ const columns = [
  },
 ];

-// 数据
-const tableData = ref([]);
-const getData = () => {
-  getList().then(({ code, data }) => {
-    if (code === 0) {
-      tableData.value = data;
-    }
-  });
-};
-getData();
-
 //  新增编辑
 const popup = useCustomFormPopup(ProductForm, save, {
  popupProps: (arg) => ({ title: arg[0].record ? "编辑产品" : "新增产品" }),
--- a/new-ui/projects/admin/src/views/Role/RoleContainer.vue
+++ b/new-ui/projects/admin/src/views/Role/RoleContainer.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { getList, save, deleting, setStatus } from "./api";
-import { reactive, ref } from "vue";
+import { reactive } from "vue";
 import RoleForm from "./RoleForm.vue";
 import useCustomFormPopup from "@/composables/useCustomFormPopup";
 import { Message } from "@arco-design/web-vue";
@@ -40,17 +40,6 @@ const expandable = reactive({
  width: 50,
 });

-// 数据
-const tableData = ref([]);
-const getData = () => {
-  getList().then(({ code, data }) => {
-    if (code === 0) {
-      tableData.value = data;
-    }
-  });
-};
-getData();
-
 //展开行table
 const expandColumns = [
  {
--- a/new-ui/projects/admin/src/views/Role/RoleForm.vue
+++ b/new-ui/projects/admin/src/views/Role/RoleForm.vue
@@ -23,7 +23,7 @@
      :rules="[{ required: true, message: '请输入角色图标' }]"
      :validate-trigger="['change', 'input']"
    >
-      <a-input v-model="form.icon" placeholder="请输入角色图标" />
+      <CustomUploader v-model="form.icon" placeholder="请输入角色图标" />
    </a-form-item>
    <a-form-item
      field="hello_msg"
@@ -67,6 +67,7 @@

 <script setup>
 import { ref, defineExpose, defineProps } from "vue";
+import CustomUploader from "@/components/CustomUploader.vue";
 const props = defineProps({
  data: {},
 });
--- a/new-ui/projects/admin/src/views/System/SystemBaseConfig.vue
+++ b/new-ui/projects/admin/src/views/System/SystemBaseConfig.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { onMounted } from "vue";
 import { Message } from "@arco-design/web-vue";
+import CustomUploader from "@/components/CustomUploader.vue";
 import useSubmit from "@/composables/useSubmit";
 import useRequest from "@/composables/useRequest";
 import { getConfig, modelList, save } from "./api";
-import SystemUploader from "./SystemUploader.vue";

 const { formRef, formData: system, handleSubmit, submitting } = useSubmit({});

@@ -103,11 +103,11 @@ onMounted(async () => {
          <a-input v-model="system['img_call_price']" placeholder="众筹金额跟绘图次数的兑换比例" />
        </a-form-item>
        <a-form-item label="收款二维码" field="reward_img">
-          <SystemUploader v-model="system['reward_img']" placeholder="众筹收款二维码地址" />
+          <CustomUploader v-model="system['reward_img']" placeholder="众筹收款二维码地址" />
        </a-form-item>
      </template>
      <a-form-item label="微信客服二维码" field="wechat_card_url">
-        <SystemUploader v-model="system['wechat_card_url']" placeholder="微信客服二维码" />
+        <CustomUploader v-model="system['wechat_card_url']" placeholder="微信客服二维码" />
      </a-form-item>
      <a-form-item label="订单超时时间" field="order_pay_timeout">
        <a-space style="width: 100%">
--- a/new-ui/projects/admin/src/views/User/UserContainer.vue
+++ b/new-ui/projects/admin/src/views/User/UserContainer.vue
@@ -8,6 +8,11 @@ import { dateFormat } from "@chatgpt-plus/packages/utils";
 import UserPassword from "./UserPassword.vue";
 import useCustomFormPopup from "@/composables/useCustomFormPopup";
 const columns: SearchTableColumns[] = [
+  {
+    title: "用户头像",
+    dataIndex: "avatar",
+    slotName: "avatar",
+  },
  {
    title: "账号",
    dataIndex: "username",
@@ -16,17 +21,9 @@ const columns: SearchTableColumns[] = [
    },
  },
  {
-    title: "剩余对话次数",
+    title: "剩余算力",
    dataIndex: "calls",
  },
-  {
-    title: "剩余绘图次数",
-    dataIndex: "img_calls",
-  },
-  {
-    title: "累计消耗tokens",
-    dataIndex: "total_tokens",
-  },
  {
    title: "状态",
    dataIndex: "status",
@@ -38,9 +35,7 @@ const columns: SearchTableColumns[] = [
    title: "过期时间",
    dataIndex: "expired_time",
    width: 180,
-    render: ({ record }) => {
-      return dateFormat(record.expired_time);
-    },
+    slotName: "expired_time",
  },
  {
    title: "注册时间",
@@ -76,6 +71,15 @@ const handleDelete = async ({ id }: { id: string }, reload) => {
 </script>
 <template>
  <SearchTable :request="getList" :columns="columns">
+    <template #avatar="{ record }">
+      <a-avatar>
+        <a-image :src="record.avatar" style="border-radius: 50%" />
+      </a-avatar>
+    </template>
+    <template #expired_time="{ record }">
+      <a-tag v-if="record.expired_time === 0" color="blue">长期有效</a-tag>
+      <template v-else>{{ dateFormat(record.expired_time) }}</template>
+    </template>
    <template #actions="{ record, reload }">
      <a-link @click="editModal({ record, reload })">编辑</a-link>
      <a-popconfirm content="确定删除？" @ok="handleDelete(record, reload)">
--- a/new-ui/projects/admin/src/views/User/UserForm.vue
+++ b/new-ui/projects/admin/src/views/User/UserForm.vue
@@ -20,17 +20,10 @@
    </a-form-item>
    <a-form-item
      field="calls"
-      label="对话次数"
-      :rules="[{ required: true, message: '请输入对话次数' }]"
+      label="用户算力"
+      :rules="[{ required: true, message: '请输入用户算力' }]"
    >
-      <a-input-number v-model="form.calls" placeholder="请输入对话次数" />
-    </a-form-item>
-    <a-form-item
-      field="img_calls"
-      label="绘图次数"
-      :rules="[{ required: true, message: '请输入绘图次数' }]"
-    >
-      <a-input-number v-model="form.img_calls" placeholder="请输入绘图次数" />
+      <a-input-number v-model="form.calls" placeholder="请输入用户算力" />
    </a-form-item>
    <a-form-item field="expired_time" label="有效期">
      <a-date-picker v-model="form.expired_time" placeholder="请选择有效期" />