style(appShell): 优化应用外壳及底部导航样式与结构
- 在 tailwind 配置中添加应用外壳相关的 safelist 类名 - 替换 App.tsx 中应用外壳容器的类名,去除多余的内边距容器 - 在现代和遗留样式文件中新增移动端全屏、桌面居中列的样式规则 - 新增底部导航外层和内层的样式及响应式布局支持 - appShell.ts 中将样式类改为统一的 x8- 前缀类名 - BottomNav 组件使用新的样式类名以匹配样式调整 - Home 页面 ListRow 组件支持可选缩略图展示,增加界面展示丰富度
This commit is contained in:
@@ -22,7 +22,7 @@ import {
|
||||
} from "lucide-react";
|
||||
import { Link, useLocation } from "wouter";
|
||||
import { useMemo } from "react";
|
||||
import { appShellColumnClass, appShellGutterClass } from "@/lib/appShell";
|
||||
import { bottomNavInnerClass, bottomNavOuterClass } from "@/lib/appShell";
|
||||
|
||||
type BottomNavLocale = NonNullable<(typeof localeZh)["bottomNav"]>;
|
||||
|
||||
@@ -57,10 +57,10 @@ export default function BottomNav() {
|
||||
|
||||
return (
|
||||
<nav
|
||||
className={`fixed inset-x-0 bottom-0 z-50 flex justify-center pointer-events-none ${appShellGutterClass}`}
|
||||
className={bottomNavOuterClass}
|
||||
>
|
||||
<div
|
||||
className={`pointer-events-auto ${appShellColumnClass}`}
|
||||
className={bottomNavInnerClass}
|
||||
style={{
|
||||
background: "rgba(10, 10, 12, 0.96)",
|
||||
backdropFilter: "blur(40px) saturate(200%)",
|
||||
|
||||
Reference in New Issue
Block a user