update: 优化API日志显示

web/components.d.ts

@@ -15,6 +15,7 @@ declare module 'vue' {
     NButtonGroup: typeof import('naive-ui')['NButtonGroup']
     NCard: typeof import('naive-ui')['NCard']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
+    NCode: typeof import('naive-ui')['NCode']
     NCollapse: typeof import('naive-ui')['NCollapse']
     NCollapseItem: typeof import('naive-ui')['NCollapseItem']
     NDataTable: typeof import('naive-ui')['NDataTable']
@@ -52,6 +53,7 @@ declare module 'vue' {
     NText: typeof import('naive-ui')['NText']
     NThing: typeof import('naive-ui')['NThing']
     NTimePicker: typeof import('naive-ui')['NTimePicker']
+    NTooltip: typeof import('naive-ui')['NTooltip']
     NUpload: typeof import('naive-ui')['NUpload']
     NUploadDragger: typeof import('naive-ui')['NUploadDragger']
     NVirtualList: typeof import('naive-ui')['NVirtualList']

web/pages/admin/api-access-logs.vue

@@ -106,7 +106,7 @@
       </div>
 
       <!-- 日志列表 -->
-      <div v-else class="space-y-2">
+      <div v-else class="space-y-2 h-full overflow-y-auto">
         <div
           v-for="log in logs"
           :key="log.id"
@@ -140,8 +140,23 @@
                 </div>
               </div>
 
-              <div v-if="log.request_params" class="mt-2 text-xs text-gray-600 dark:text-gray-400">
+              <div v-if="log.request_params" class="mt-2 text-xs text-gray-600 dark:text-gray-400 flex items-center justify-between">
-                <strong>请求参数:</strong> {{ log.request_params }}
+                <div class="flex items-center flex-1 min-w-0">
+                  <strong class="mr-2 flex-0 whitespace-nowrap">请求参数:</strong>
+                  <span class="truncate">{{ log.request_params }}</span>
+                </div>
+                <div class="flex items-center space-x-1 ml-2">
+                  <n-button size="tiny" @click="copyParams(log.request_params)">
+                    <template #icon>
+                      <i class="fas fa-copy"></i>
+                    </template>
+                  </n-button>
+                  <n-button size="tiny" @click="viewParams(log.request_params)">
+                    <template #icon>
+                      <i class="fas fa-eye"></i>
+                    </template>
+                  </n-button>
+                </div>
               </div>
 
               <div v-if="log.error_message" class="mt-2 text-xs text-red-600 dark:text-red-400">
@@ -171,6 +186,17 @@
     </template>
   </AdminPageLayout>
 
+  <!-- 请求参数详情模态框 -->
+  <n-modal v-model:show="showModal" preset="card" title="请求参数详情" style="min-width: 600px;">
+    <n-code
+      :code="selectedParams"
+      language="json"
+      :folding="true"
+      :show-line-numbers="true"
+      class="bg-gray-100 dark:bg-gray-700 p-4 rounded max-h-96 overflow-auto"
+    />
+  </n-modal>
+
 </template>
 
 <script setup lang="ts">
@@ -226,6 +252,10 @@ const currentPage = ref(1)
 const pageSize = ref(20)
 const total = ref(0)
 
+// 模态框
+const showModal = ref(false)
+const selectedParams = ref('')
+
 
 // 获取日志数据
 const fetchData = async () => {
@@ -337,6 +367,31 @@ const formatDate = (dateString: string) => {
   })
 }
 
+// 复制参数
+const copyParams = (params: string) => {
+  navigator.clipboard.writeText(params).then(() => {
+    notification.success({
+      content: '已复制到剪贴板',
+      duration: 2000
+    })
+  }).catch(() => {
+    notification.error({
+      content: '复制失败',
+      duration: 2000
+    })
+  })
+}
+
+// 查看参数
+const viewParams = (params: string) => {
+  try {
+    selectedParams.value = JSON.stringify(JSON.parse(params), null, 2)
+  } catch {
+    selectedParams.value = params
+  }
+  showModal.value = true
+}
+
 
 // 清理旧日志
 const clearOldLogs = async () => {