style(appShell): 优化应用外壳及底部导航样式与结构

- 在 tailwind 配置中添加应用外壳相关的 safelist 类名
- 替换 App.tsx 中应用外壳容器的类名，去除多余的内边距容器
- 在现代和遗留样式文件中新增移动端全屏、桌面居中列的样式规则
- 新增底部导航外层和内层的样式及响应式布局支持
- appShell.ts 中将样式类改为统一的 x8- 前缀类名
- BottomNav 组件使用新的样式类名以匹配样式调整
- Home 页面 ListRow 组件支持可选缩略图展示，增加界面展示丰富度

client/src/pages/Home.tsx

@@ -135,7 +135,7 @@ function IOSToggle({ checked, onChange }: { checked: boolean; onChange: (v: bool
 
 // ── List row ──
 function ListRow({
-  icon, label, value, onClick, toggle, checked, onToggle,
+  icon, label, value, onClick, toggle, checked, onToggle, thumbnailSrc,
 }: {
   icon: React.ReactNode;
   label: string;
@@ -144,6 +144,8 @@ function ListRow({
   toggle?: boolean;
   checked?: boolean;
   onToggle?: (v: boolean) => void;
+  /** Optional small thumbnail shown between value text and chevron. */
+  thumbnailSrc?: string;
 }) {
   return (
     <div className="ios-list-row cursor-pointer" onClick={onClick}>
@@ -157,7 +159,15 @@ function ListRow({
       {toggle ? (
         <IOSToggle checked={!!checked} onChange={onToggle ?? (() => {})} />
       ) : (
-        <div className="flex items-center gap-1">
+        <div className="flex items-center gap-1.5">
+          {thumbnailSrc && (
+            <img
+              src={thumbnailSrc}
+              alt=""
+              className="w-16 h-12 rounded-[8px] object-cover flex-shrink-0"
+              style={{ border: "1px solid rgba(255,255,255,0.12)" }}
+            />
+          )}
           {value && <span className="ios-row-value">{value}</span>}
           <ChevronRight size={16} className="ios-chevron" />
         </div>
@@ -873,6 +883,7 @@ export default function Home() {
             icon={<Gauge size={16} />}
             label={homeText.vu ?? "VU表"}
             value={vuLabel}
+            thumbnailSrc={`${import.meta.env.BASE_URL}vu/vu${(ds.vu ?? 0) + 1}.png`}
             onClick={() => setLocation("/vu")}
           />
           <ListRow