feat: 样式微调

docs/design-system.md

@@ -53,7 +53,7 @@ TorBox 是云端 debrid / seedbox 服务：代为下载种子、Usenet 与网页
 
 - `--radius: 0.375rem`（6px，与官网一致），组件按 shadcn 派生规则取 `rounded-lg` / `rounded-xl`。
 - 间距只用 `gap-*`，不用 `space-x/y-*`；常用节奏：控件间 `gap-2`，区块内 `gap-3`，区块间 `gap-8`。
-- 内容最大宽度 `max-w-7xl`，水平内边距 `px-4 md:px-6`；header、工具栏的内层容器与内容区对齐。
+- 内容最大宽度 `sm:max-w-5/6`，水平内边距 `px-4 md:px-6`；header、工具栏的内层容器与内容区对齐。
 - 等宽等高用 `size-*`，单行截断用 `truncate`，多行截断用 `line-clamp-*`。
 
 ## 5. 布局规则

src/app/(app)/components/app-header.tsx

@@ -18,7 +18,7 @@ type AppHeaderProps = {
 
 export const AppHeader = ({ token, mock, searchEnabled }: AppHeaderProps) => (
   <header className="shrink-0 border-b">
-    <div className="mx-auto flex h-14 w-full max-w-7xl items-center gap-3 px-4 md:px-6">
+    <div className="mx-auto flex h-14 w-full sm:max-w-5/6 items-center gap-3 px-4 md:px-6">
       <BrandMark />
       {/* 手机宽度下放不下，演示模式只在登录页提示 */}
       {mock && (

src/app/(app)/components/file-card.tsx

@@ -254,8 +254,8 @@ export const FileCard = ({
         <p className="line-clamp-2 leading-snug break-all" title={file.name}>
           {file.displayName}
         </p>
-        <p className="font-mono text-xs text-muted-foreground tabular-nums">
-          <ExtLabel ext={file.ext} /> · {formatBytes(file.size)}
+        <p className="font-mono text-xs text-muted-foreground text-end tabular-nums">
+          {formatBytes(file.size)}
         </p>
       </CardContent>
       <CardFooter className="gap-2">

src/app/(app)/components/library-list.tsx

@@ -229,7 +229,7 @@ export const LibraryList = (props: LibraryListProps) => {
   const [contentRef, width] = useElementWidth<HTMLDivElement>();
 
   return (
-    <div ref={contentRef} className="mx-auto w-full max-w-7xl px-4 md:px-6">
+    <div ref={contentRef} className="mx-auto w-full sm:max-w-5/6 px-4 md:px-6">
       {/* 先拿到容器宽度再创建虚拟器，保证首帧列数与快照恢复一致 */}
       {width > 0 && <VirtualRows {...props} width={width} />}
     </div>

src/app/(app)/components/library-toolbar.tsx

@@ -61,7 +61,7 @@ const KIND_OPTIONS: { value: KindFilter; label: string }[] = [
 ];
 
 const SORT_OPTIONS: { value: LibrarySort; label: string }[] = [
-  { value: "default", label: "默认顺序" },
+  { value: "default", label: "默认" },
   { value: "newest", label: "最新加入" },
   { value: "oldest", label: "最早加入" },
   { value: "name", label: "名称" },
@@ -171,7 +171,7 @@ export const LibraryToolbar = ({
 
   return (
     <div className="shrink-0 border-b">
-      <div className="mx-auto flex w-full max-w-7xl flex-wrap items-center gap-x-4 gap-y-2 px-4 py-3 md:px-6">
+      <div className="mx-auto flex w-full sm:max-w-5/6 flex-wrap items-center gap-x-4 gap-y-2 px-4 py-3 md:px-6">
         <InputGroup className="w-full sm:w-64">
           <InputGroupAddon>
             <SearchIcon />

src/app/(app)/components/library-view.tsx

@@ -135,7 +135,7 @@ export const LibraryView = ({ token }: { token: string }) => {
         className="min-h-0 flex-1 scroll-pt-14 overflow-y-auto"
       >
         {content ? (
-          <div className="mx-auto flex w-full max-w-7xl flex-col gap-8 p-4 md:p-6">
+          <div className="mx-auto flex w-full sm:max-w-5/6 flex-col gap-8 p-4 md:p-6">
             {content}
           </div>
         ) : (