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

src/components/logs/SystemLogPanel.vue

@@ -6,13 +6,18 @@ import { listSystemLogs } from '@/api/settings'
 import DetailFieldList, { type DetailRow } from '@/components/DetailFieldList.vue'
 import DetailHero, { type HeroChip } from '@/components/DetailHero.vue'
 import JsonBlock from '@/components/JsonBlock.vue'
+import PanelHeader from '@/components/PanelHeader.vue'
 import StatusBadge from '@/components/StatusBadge.vue'
 import { actionLabel } from '@/composables/useActionLabel'
 import { useAutoRefresh } from '@/composables/useAutoRefresh'
 import { fmtTime } from '@/composables/useFormat'
+import { useIsMobile } from '@/composables/useIsMobile'
+import { useMobileModal } from '@/composables/useMobileModal'
 import type { SystemLog } from '@/types/api'
 import { useToast } from '@/composables/useToast'
 
+const isMobile = useIsMobile()
+const { modalStyle, modalClass } = useMobileModal(640)
 const message = useToast()
 
 const rows = ref<SystemLog[]>([])
@@ -28,6 +33,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()
@@ -160,19 +169,25 @@ useAutoRefresh(() => load(true))
 
 <template>
   <div class="panel">
-    <div
-      class="flex flex-wrap items-center justify-between gap-3 border-b border-line-soft px-4.5 py-3.5"
-    >
-      <div class="min-w-0">
-        <div class="text-sm font-semibold">系统日志</div>
-        <div class="mt-0.5 text-xs text-ink-3">面板写操作与登录成败留痕，用于审计与排障</div>
-      </div>
+    <PanelHeader title="系统日志" desc="面板写操作与登录成败留痕，用于审计与排障">
+      <NInput
+        v-if="!isMobile"
+        v-model:value="keyword"
+        size="small"
+        clearable
+        placeholder="搜索路径 / 用户名"
+        class="!w-64"
+        @keyup.enter="search"
+        @clear="onClear"
+      />
+    </PanelHeader>
+    <!-- 移动端筛选独立成行全宽,不与标题挤同一行 -->
+    <div v-if="isMobile" class="border-b border-line-soft px-4.5 py-2.5">
       <NInput
         v-model:value="keyword"
         size="small"
         clearable
-        placeholder="搜索路径 / 用户名，回车确认"
-        class="!max-w-64"
+        placeholder="搜索路径 / 用户名"
         @keyup.enter="search"
         @clear="onClear"
       />
@@ -187,7 +202,7 @@ useAutoRefresh(() => load(true))
       :row-key="(r: SystemLog) => r.id"
       :row-props="rowProps"
     />
-    <NModal v-model:show="showDetail" preset="card" closable :style="{ width: '640px', maxWidth: 'calc(100vw - 24px)' }">
+    <NModal v-model:show="showDetail" preset="card" closable :style="modalStyle" :class="modalClass">
       <template #header>
         <DetailHero
           v-if="detail"