commit

src/views/wechat/api_key/apiKey.data.ts

@@ -27,8 +27,11 @@ export const columns: BasicColumn[] = [
   // },
   {
     title: t('AI 角色'),
-    dataIndex: 'agent_info',
+    dataIndex: 'agent_info.name',
     width: 100,
+    customRender: ({ record }) => {
+      return record.agent_info.name == null ? '定制 AI 角色' : record.agent_info.name
+    },
   },
   // {
   //   title: t('wechat.apiKey.customAgentBase'),

src/views/wechat/api_key/index.vue

@@ -22,12 +22,20 @@
           <TableAction
             :actions="[
               {
-                icon: 'clarity:note-edit-line',
+                label: t('common.edit'),
                 onClick: handleEdit.bind(null, record),
               },
               {
-                icon: 'ant-design:delete-outlined',
-                color: 'error',
+                label: '选择 AI 角色',
+                onClick: handleEditMode.bind(null, record),
+              },
+              {
+                label: '令牌详情',
+                onClick: handleTokenList.bind(null, record),
+              },
+              {
+                label: t('common.delete'),
+                color: 'error' as 'error',
                 popConfirm: {
                   title: t('common.deleteConfirm'),
                   placement: 'left',
@@ -40,29 +48,101 @@
       </template>
     </BasicTable>
     <ApiKeyDrawer @register="registerDrawer" @success="handleSuccess" />
+    <Modal
+      width="70vw"
+      v-model:open="tokenVisible"
+      title="令牌详情"
+      @ok="tokenVisible = false"
+    >
+      <Table
+        :loading="tokenTableLoading"
+        :dataSource="tokenDataSource"
+        :columns="tokenColumns"
+        :pagination="tokenTablePagination"
+        :scroll="{ y: '50vh' }"
+      ></Table>
+    </Modal>
+    <SelectAIAgentModal @register="registerAIAgentModal" @ok="handleUpdateAgent" />
   </div>
 </template>
 <script lang="ts" setup>
-  import { createVNode, ref } from 'vue';
-  import { Modal } from 'ant-design-vue';
+  import { createVNode, ref, reactive } from 'vue';
+  import { Modal, Table } from 'ant-design-vue';
   import { ExclamationCircleOutlined } from '@ant-design/icons-vue/lib/icons';
   import { BasicTable, useTable, TableAction } from '@/components/Table';
   import { Button } from '@/components/Button';
-
+  import { useModal } from '/@/components/Modal';
   import { useDrawer } from '@/components/Drawer';
   import ApiKeyDrawer from './ApiKeyDrawer.vue';
   import { useI18n } from 'vue-i18n';
+  import SelectAIAgentModal from '@/views/components/SelectAIAgentModal.vue';
+  import { formatToDateTime } from "@/utils/dateUtil";
 
   import { columns, searchFormSchema } from './apiKey.data';
-  import { getApiKeyList, deleteApiKey } from '@/api/wechat/apiKey';
+  import { getApiKeyList, deleteApiKey, updateApiKey } from '@/api/wechat/apiKey';
+  import { getUsageDetailList } from '@/api/wechat/usageDetail';
+  import type { UsageDetailInfo } from '@/api/wechat/model/usageDetailModel';
 
   defineOptions({ name: 'ApiKeyManagement' });
 
   const { t } = useI18n();
   const selectedIds = ref<number[] | string[]>();
   const showDeleteButton = ref<boolean>(false);
+  const tokenVisible = ref(false);
+  const tokenTableLoading = ref(false);
+  const tokenDataSource = ref<UsageDetailInfo[]>([]);
+  const accountId = ref<number>();
+
+  const tokenTablePagination = reactive({
+    pageSize: 20,
+    total: 0,
+    hideOnSinglePage: true
+  });
+
+  const tokenColumns = [{
+    title: t('wechat.usageDetail.botId'),
+    dataIndex: 'botId',
+    key: 'botId'
+  }, {
+    title: t('wechat.usageDetail.receiverId'),
+    dataIndex: 'receiverId',
+    key: 'receiverId'
+  }, {
+    title: t('wechat.usageDetail.app'),
+    dataIndex: 'App',
+    key: 'App'
+  }, {
+    title: t('wechat.usageDetail.request'),
+    dataIndex: 'request',
+    key: 'request',
+    ellipsis: true,
+  }, {
+    title: t('wechat.usageDetail.response'),
+    dataIndex: 'response',
+    key: 'response',
+    ellipsis: true,
+  }, {
+    title: t('wechat.usageDetail.totalTokens'),
+    dataIndex: 'totalTokens',
+    key: 'totalTokens',
+  }, {
+    title: t('wechat.usageDetail.promptTokens'),
+    dataIndex: 'promptTokens',
+    key: 'promptTokens',
+  }, {
+    title: t('wechat.usageDetail.completionTokens'),
+    dataIndex: 'completionTokens',
+    key: 'completionTokens',
+  },{
+    title: t('wechat.usageDetail.createTime'),
+    dataIndex: 'createdAt',
+    customRender: ({ record }) => {
+      return formatToDateTime(record.createdAt);
+    }
+  },];
 
   const [registerDrawer, { openDrawer }] = useDrawer();
+  const [registerAIAgentModal, { openModal: openAIAgentModal, closeModal: closeAIAgentModal }] = useModal();
   const [registerTable, { reload }] = useTable({
     title: t('wechat.apiKey.apiKeyList'),
     api: getApiKeyList,
@@ -71,16 +151,16 @@
       labelWidth: 120,
       schemas: searchFormSchema,
     },
-    useSearchForm: true,
+    useSearchForm: false,
     showTableSetting: true,
-    bordered: true,
+    bordered: false,
     showIndexColumn: false,
     clickToRowSelect: false,
     actionColumn: {
-      width: 30,
+      width: 130,
       title: t('common.action'),
       dataIndex: 'action',
-      fixed: undefined,
+      fixed: 'right',
     },
     rowKey: 'id',
     rowSelection: {
@@ -133,4 +213,39 @@
   async function handleSuccess() {
     await reload();
   }
+
+  //编辑模式
+  function handleEditMode(record: Recordable) {
+    accountId.value = record.id;
+    const name = record.agentInfo?.name == null ? '定制 AI 角色' : record.agentInfo?.name;
+    const id = record.agentInfo?.id == null ? 0 : record.agentInfo?.id;
+    openAIAgentModal(true, {
+      accountId: record.id,
+      name,
+      id,
+      organizationId: record.organizationId
+    })
+  }
+
+  async function handleTokenList(record: Recordable) {
+    tokenVisible.value = true;
+    tokenTableLoading.value = true;
+    try {
+      const res = await getUsageDetailList({ botId: record.key, page: 1, pageSize: 1000 });
+      tokenDataSource.value = res.data.data;
+      tokenTablePagination.total = res.data.total;
+    } catch(e) {
+      console.error(e);
+    } finally {
+      tokenTableLoading.value = false;
+    }
+  }
+
+  async function handleUpdateAgent(params) {
+    params.agent_id = params.agentId;
+    delete params.agentId;
+    await updateApiKey(params);
+    closeAIAgentModal();
+    reload();
+  }
 </script>