三页面重设计与移动端适配;接入 PWA 与构建分包

src/components/logs/AiCallLogPanel.vue

@@ -9,10 +9,14 @@ import PanelHeader from '@/components/PanelHeader.vue'
 import StatusBadge from '@/components/StatusBadge.vue'
 import { useAutoRefresh } from '@/composables/useAutoRefresh'
 import { fmtTime } from '@/composables/useFormat'
+import { useIsMobile } from '@/composables/useIsMobile'
+import { useMobileModal } from '@/composables/useMobileModal'
 import type { AiCallLog, AiContentLog } from '@/types/api'
 import { useToast } from '@/composables/useToast'
 
 const message = useToast()
+const isMobile = useIsMobile()
+const { modalStyle, modalClass } = useMobileModal(600)
 const rows = ref<AiCallLog[]>([])
 const loading = ref(false)
 
@@ -22,6 +26,10 @@ const pagination = reactive({
   itemCount: 0,
   showSizePicker: true,
   pageSizes: [20, 50, 100],
+  // 移动端页码槽位放不下会被裁切,切 simple 形态(‹ n/总页 ›)
+  get simple() {
+    return isMobile.value
+  },
   onUpdatePage: (p: number) => {
     pagination.page = p
     void load()
@@ -197,7 +205,7 @@ const footerText = computed(() => {
   <div class="panel">
     <PanelHeader
       title="AI 调用日志"
-      desc="仅元数据与 token 用量,不记录对话内容;保留 90 天 / 5 万行 · 每 5 秒自动刷新"
+      desc="仅元数据与 token 用量;保留 90 天 / 5 万行"
     />
     <NDataTable
       remote
@@ -207,10 +215,11 @@ const footerText = computed(() => {
       :pagination="pagination"
       :bordered="false"
       :row-props="rowProps"
+      :scroll-x="1230"
       size="small"
     />
 
-    <NModal v-model:show="showDetail" preset="card" closable :style="{ width: '600px', maxWidth: 'calc(100vw - 24px)' }">
+    <NModal v-model:show="showDetail" preset="card" closable :style="modalStyle" :class="modalClass">
       <template #header>
         <DetailHero
           v-if="detail"