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

src/components/MobileCardList.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts" generic="T">
+import { NSpin } from 'naive-ui'
+
+/** 移动端列表卡片化容器:接管加载 / 空态,卡片体由默认插槽渲染 */
+const props = defineProps<{
+  items: T[]
+  loading?: boolean
+  itemKey: (item: T) => string | number
+  emptyText?: string
+}>()
+</script>
+
+<template>
+  <div class="flex flex-col gap-2.5">
+    <div
+      v-if="props.loading && !props.items.length"
+      class="panel flex items-center justify-center py-10"
+    >
+      <NSpin size="small" />
+    </div>
+    <div v-else-if="!props.items.length" class="panel py-10 text-center text-[13px] text-ink-3">
+      {{ props.emptyText ?? '暂无数据' }}
+    </div>
+    <div v-for="it in props.items" v-else :key="props.itemKey(it)" class="panel px-4 py-3">
+      <slot :item="it"></slot>
+    </div>
+  </div>
+</template>