fix: 优化移动端页面体验

- repos 页面：标题和按钮移动端换行显示，响应式布局优化
- config 页面：移动端无边框，全屏宽度，按钮垂直堆叠
- gitea config 页面：同 config 页面优化
- BuildConfig、RepoCard、Dialog 等组件响应式优化

src/pages/config/gitea/page.tsx

@@ -1,5 +1,4 @@
 import { useGiteaConfigStore } from './store';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Button } from '@/components/ui/button';
@@ -39,15 +38,15 @@ export const GiteaConfigPage = () => {
   };
 
   return (
-    <div className="container mx-auto max-w-2xl py-8">
-      <Card>
-        <CardHeader>
-          <CardTitle>Gitea 配置</CardTitle>
-          <CardDescription>
+    <div className="container mx-auto max-w-2xl py-4 md:py-8 px-4">
+      <div className="bg-white md:rounded-lg md:border md:shadow-sm">
+        <div className="p-4 md:p-6 border-b">
+          <h1 className="text-xl md:text-2xl font-bold">Gitea 配置</h1>
+          <p className="text-sm text-muted-foreground mt-1">
             配置您的 Gitea API 设置。这些设置会保存在浏览器的本地存储中。
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
+          </p>
+        </div>
+        <div className="p-4 md:p-6">
           <form onSubmit={handleSubmit} className="space-y-6">
             <div className="space-y-2">
               <Label htmlFor="gitea-url">Gitea 地址</Label>
@@ -71,24 +70,24 @@ export const GiteaConfigPage = () => {
               />
             </div>
 
-            <div className="flex gap-4">
-              <Button type="submit">保存配置</Button>
-              <Button type="button" variant="outline" onClick={resetConfig}>
+            <div className="flex flex-col sm:flex-row gap-2 sm:gap-4">
+              <Button type="submit" className="w-full sm:w-auto">保存配置</Button>
+              <Button type="button" variant="outline" onClick={resetConfig} className="w-full sm:w-auto">
                 重置为默认值
               </Button>
               {layoutStore.me && <>
-                <Button type="button" variant="outline" onClick={loadFromRemote}>
+                <Button type="button" variant="outline" onClick={loadFromRemote} className="w-full sm:w-auto">
                   获取远端配置
                 </Button>
-                <Button type="button" variant="outline" onClick={saveToRemote}>
+                <Button type="button" variant="outline" onClick={saveToRemote} className="w-full sm:w-auto">
                   保存到远端
                 </Button>
               </>
               }
             </div>
           </form>
-        </CardContent>
-      </Card>
+        </div>
+      </div>
     </div>
   );
 };

src/pages/config/page.tsx

@@ -1,5 +1,4 @@
 import { useConfigStore } from './store';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Button } from '@/components/ui/button';
@@ -19,15 +18,15 @@ export const ConfigPage = () => {
 
   return (
     <TooltipProvider>
-      <div className="container mx-auto max-w-2xl py-8">
-        <Card>
-          <CardHeader>
-            <CardTitle>CNB 配置</CardTitle>
-            <CardDescription>
+      <div className="container mx-auto max-w-2xl py-4 md:py-8 px-4">
+        <div className="bg-white md:rounded-lg md:border md:shadow-sm">
+          <div className="p-4 md:p-6 border-b">
+            <h1 className="text-xl md:text-2xl font-bold">CNB 配置</h1>
+            <p className="text-sm text-muted-foreground mt-1">
               配置您的 CNB API 设置。这些设置会保存在浏览器的本地存储中。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
+            </p>
+          </div>
+          <div className="p-4 md:p-6">
             <form onSubmit={handleSubmit} className="space-y-6">
               <div className="space-y-2">
                 <div className="flex items-center gap-2">
@@ -91,17 +90,17 @@ export const ConfigPage = () => {
                 />
               </div>
 
-              <div className="flex gap-4">
-                <Button type="button" variant="outline" onClick={loadFromRemote}>
+              <div className="flex flex-col sm:flex-row gap-2 sm:gap-4">
+                <Button type="button" variant="outline" onClick={loadFromRemote} className="w-full sm:w-auto">
                   获取远端配置
                 </Button>
-                <Button type="button" variant="outline" onClick={saveToRemote}>
+                <Button type="button" variant="outline" onClick={saveToRemote} className="w-full sm:w-auto">
                   保存到远端
                 </Button>
               </div>
             </form>
-          </CardContent>
-        </Card>
+          </div>
+        </div>
       </div>
     </TooltipProvider>
   );

src/pages/repos/components/BuildConfig.tsx

@@ -59,23 +59,24 @@ export const BuildConfig = () => {
     return <div>Loading...</div>
   }
   return (
-    <div className="flex gap-4 h-full overflow-hidden">
+    <div className="flex flex-col md:flex-row gap-3 md:gap-4 h-full overflow-hidden">
       {/* 左侧边栏 - 配置信息 */}
-      <div className="w-64 shrink-0 space-y-4">
-        <div className="text-xl font-bold border-b pb-2 mb-4 flex">
+      <div className="w-full md:w-64 shrink-0 space-y-3 md:space-y-4 order-2 md:order-1">
+        <div className="text-lg md:text-xl font-bold border-b pb-2 mb-3 md:mb-4 flex items-center gap-2">
           <button
             onClick={() => navigate({ to: '/' })}
-            className="cursor-pointer flex items-center justify-center w-8 h-8 rounded-md hover:bg-neutral-100 transition-colors"
+            className="cursor-pointer flex items-center justify-center w-8 h-8 rounded-md hover:bg-neutral-100 transition-colors shrink-0"
           >
             <ArrowLeft className="w-4 h-4 text-neutral-600" />
           </button>
-          <span className="text-lg font-semibold">构建配置</span>
+          <span className="text-base md:text-lg font-semibold truncate">构建配置</span>
           <button
             onClick={repoStore.buildWorkspace}
-            className="ml-auto p-2 text-sm cursor-pointer bg-gray-500 text-white rounded hover:bg-gray-600 flex items-center"
+            className="ml-auto p-1.5 md:p-2 text-xs md:text-sm cursor-pointer bg-gray-500 text-white rounded hover:bg-gray-600 flex items-center gap-1"
             title="构建工作空间"
           >
-            <Workflow className="w-4 h-4" />
+            <Workflow className="w-3 h-3 md:w-4 md:h-4" />
+            <span className="hidden md:inline">构建</span>
           </button>
         </div>
         <div className="space-y-2">
@@ -105,19 +106,19 @@ export const BuildConfig = () => {
       </div>
 
       {/* 右侧 - 编辑器 */}
-      <div className="flex-1 flex flex-col h-full ">
-        <div className="flex items-center justify-between mb-2">
+      <div className="flex-1 flex flex-col h-full order-1 md:order-2 min-h-[300px] md:min-h-0">
+        <div className="flex items-center justify-between mb-2 gap-2">
           <span className="text-sm font-medium">配置文件</span>
           <div className="flex gap-2">
             <button
               onClick={handleSave}
-              className="px-3 cursor-pointer py-1 text-sm bg-primary text-white rounded hover:bg-primary/90"
+              className="px-2 md:px-3 cursor-pointer py-1 text-xs md:text-sm bg-primary text-white rounded hover:bg-primary/90"
             >
               保存
             </button>
             <button
               onClick={() => repoStore.deleteBuildConfig({ repo: repo, user: me })}
-              className="px-3 cursor-pointer py-1 text-sm bg-red-500 text-white rounded hover:bg-red-600"
+              className="px-2 md:px-3 cursor-pointer py-1 text-xs md:text-sm bg-red-500 text-white rounded hover:bg-red-600"
             >
               删除
             </button>

src/pages/repos/components/RepoCard.tsx

@@ -84,20 +84,20 @@ export function RepoCard({ showReturn = false, repo }: RepoCardProps) {
   }
   return (
     <>
-      <Card className="relative p-0 overflow-hidden border border-neutral-200 bg-white hover:shadow-xl hover:border-neutral-300 transition-all duration-300 group pb-14">
-        <div className="p-6 space-y-4">
-          <div className="flex items-start justify-between gap-3">
+      <Card className="relative p-0 overflow-hidden border border-neutral-200 bg-white hover:shadow-xl hover:border-neutral-300 transition-all duration-300 group pb-12 md:pb-14">
+        <div className="p-4 md:p-6 space-y-3 md:space-y-4">
+          <div className="flex items-start justify-between gap-2">
             <div className="flex items-center gap-2 flex-1 min-w-0">
               {showReturn && (
                 <button
                   onClick={() => navigate({ to: '/' })}
-                  className="cursor-pointer flex items-center justify-center w-8 h-8 rounded-md hover:bg-neutral-100 transition-colors"
+                  className="cursor-pointer flex items-center justify-center w-8 h-8 rounded-md hover:bg-neutral-100 transition-colors shrink-0"
                 >
                   <ArrowLeft className="w-4 h-4 text-neutral-600" />
                 </button>
               )}
               <div
-                className="text-lg font-bold text-neutral-900 hover:text-neutral-600 transition-colors line-clamp-1 group-hover:underline"
+                className="text-base md:text-lg font-bold text-neutral-900 hover:text-neutral-600 transition-colors line-clamp-1 group-hover:underline cursor-pointer"
                 onClick={() => {
                   openInCNB()
                 }}
@@ -127,7 +127,7 @@ export function RepoCard({ showReturn = false, repo }: RepoCardProps) {
                 </span>
               )}
             </div>
-            <div className="flex items-center gap-2 shrink-0">
+            <div className="flex items-center gap-1 md:gap-2 shrink-0">
               {isWorkspaceActive && (
                 <TooltipProvider>
                   <Tooltip>
@@ -288,7 +288,7 @@ export function RepoCard({ showReturn = false, repo }: RepoCardProps) {
             </div>
           </div>
 
-          <div className="flex flex-wrap gap-2">
+          <div className="flex flex-wrap gap-1.5 md:gap-2">
             {repo.topics && (<>
               {
                 repo.topics.split(',').map((topic: string, idx: number) => (
@@ -306,7 +306,7 @@ export function RepoCard({ showReturn = false, repo }: RepoCardProps) {
           }}>
             {repo.site && (
               <div
-                className="text-xs text-neutral-500 hover:text-neutral-900 hover:underline flex  transition-colors"
+                className="text-xs text-neutral-500 hover:text-neutral-900 hover:underline flex transition-colors"
                 onClick={(e) => {
                   window.open(repo.site, '_blank')
                   e.stopPropagation()
@@ -319,27 +319,27 @@ export function RepoCard({ showReturn = false, repo }: RepoCardProps) {
               </div>
             )}
             {repo.description && (
-              <p className="ml-2 text-sm text-neutral-600 line-clamp-2 min-h-10 grow">
+              <p className="text-sm text-neutral-600 line-clamp-2 min-h-10">
                 {repo.description}
               </p>
             )}
           </div>
 
 
-          <div className="absolute bottom-0 left-0 right-0 flex items-center gap-4 text-xs text-neutral-500 px-6 py-3 border-t border-neutral-100 bg-neutral-50">
-            <span className="flex items-center gap-1.5 hover:text-neutral-900 transition-colors">
+          <div className="absolute bottom-0 left-0 right-0 flex items-center gap-2 md:gap-4 text-xs text-neutral-500 px-4 md:px-6 py-2 md:py-3 border-t border-neutral-100 bg-neutral-50 overflow-x-auto">
+            <span className="flex items-center gap-1 hover:text-neutral-900 transition-colors whitespace-nowrap">
               <Star className="w-3.5 h-3.5" />
               <span className="font-medium">{repo.star_count}</span>
             </span>
-            <span className="flex items-center gap-1.5 hover:text-neutral-900 transition-colors">
+            <span className="flex items-center gap-1 hover:text-neutral-900 transition-colors whitespace-nowrap">
               <GitFork className="w-3.5 h-3.5" />
               <span className="font-medium">{repo.fork_count}</span>
             </span>
-            <span className="flex items-center gap-1.5 hover:text-neutral-900 transition-colors">
+            <span className="flex items-center gap-1 hover:text-neutral-900 transition-colors whitespace-nowrap">
               <FileText className="w-3.5 h-3.5" />
               <span className="font-medium">{repo.open_issue_count}</span>
             </span>
-            {isWorkspaceActive && <span className="flex items-center gap-1.5 hover:text-neutral-900 transition-colors cursor-pointer"
+            {isWorkspaceActive && <span className="flex items-center gap-1 hover:text-neutral-900 transition-colors cursor-pointer whitespace-nowrap"
               onClick={() => {
                 store.getWorkspaceDetail(workspace)
               }}>
@@ -348,7 +348,7 @@ export function RepoCard({ showReturn = false, repo }: RepoCardProps) {
             </span>}
             {isMine && (
               <span
-                className="flex items-center gap-1.5 hover:text-neutral-900 transition-colors cursor-pointer"
+                className="flex items-center gap-1 hover:text-neutral-900 transition-colors cursor-pointer whitespace-nowrap"
                 onClick={() => {
                   store.setSelectedSyncRepo(repo)
                   store.setSyncDialogOpen(true)

src/pages/repos/modules/CreateRepoDialog.tsx

@@ -64,7 +64,7 @@ export function CreateRepoDialog({ open, onOpenChange }: CreateRepoDialogProps)
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-150">
+      <DialogContent className="w-[90vw] max-w-lg sm:max-w-[525px]">
         <DialogHeader>
           <DialogTitle>新建仓库</DialogTitle>
           <DialogDescription>
@@ -87,7 +87,7 @@ export function CreateRepoDialog({ open, onOpenChange }: CreateRepoDialogProps)
             <Textarea
               id="description"
               placeholder="简短描述你的仓库..."
-              rows={3}
+              rows={2}
               {...register('description')}
             />
           </div>
@@ -110,16 +110,17 @@ export function CreateRepoDialog({ open, onOpenChange }: CreateRepoDialogProps)
             />
           </div>
 
-          <DialogFooter>
+          <DialogFooter className="flex-col sm:flex-row gap-2 sm:gap-0">
             <Button
               type="button"
               variant="outline"
               onClick={() => onOpenChange(false)}
               disabled={isSubmitting}
+              className="w-full sm:w-auto"
             >
               取消
             </Button>
-            <Button type="submit" disabled={isSubmitting}>
+            <Button type="submit" disabled={isSubmitting} className="w-full sm:w-auto">
               {isSubmitting ? '创建中...' : '创建仓库'}
             </Button>
           </DialogFooter>

src/pages/repos/modules/EditRepoDialog.tsx

@@ -76,21 +76,21 @@ export function EditRepoDialog({ open, onOpenChange, repo }: EditRepoDialogProps
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-2xl!">
+      <DialogContent className="w-[90vw] max-w-2xl! max-h-[85vh] overflow-y-auto">
         <DialogHeader>
           <DialogTitle>编辑仓库信息</DialogTitle>
-          <DialogDescription>{repo.path}</DialogDescription>
+          <DialogDescription className="text-sm truncate">{repo.path}</DialogDescription>
         </DialogHeader>
 
-        <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4 md:space-y-6">
           <div className="space-y-2">
             <Label htmlFor="description">描述</Label>
             <Textarea
               id="description"
               {...register('description')}
               placeholder="输入仓库描述"
-              className="w-full min-h-[100px]"
-              rows={4}
+              className="w-full min-h-[80px] md:min-h-[100px]"
+              rows={3}
             />
           </div>
 
@@ -125,15 +125,16 @@ export function EditRepoDialog({ open, onOpenChange, repo }: EditRepoDialogProps
             />
           </div>
 
-          <DialogFooter>
+          <DialogFooter className="flex-col sm:flex-row gap-2 sm:gap-0">
             <Button
               type="button"
               variant="outline"
               onClick={() => onOpenChange(false)}
+              className="w-full sm:w-auto"
             >
               取消
             </Button>
-            <Button type="submit">
+            <Button type="submit" className="w-full sm:w-auto">
               保存
             </Button>
           </DialogFooter>

src/pages/repos/page.tsx

@@ -37,7 +37,6 @@ export const App = () => {
 
 
   const appList = useMemo(() => {
-    // 首先按活动状态排序
     const sortedList = [...list].sort((a, b) => {
       const aActive = workspaceList.some(ws => ws.slug === a.path)
       const bActive = workspaceList.some(ws => ws.slug === b.path)
@@ -47,12 +46,10 @@ export const App = () => {
       return 0
     })
 
-    // 如果没有搜索词，返回排序后的列表
     if (!searchQuery.trim()) {
       return sortedList
     }
 
-    // 使用 Fuse.js 进行模糊搜索
     const fuse = new Fuse(sortedList, {
       keys: ['name', 'path', 'description'],
       threshold: 0.3,
@@ -66,50 +63,54 @@ export const App = () => {
   const isCNB = location.hostname.includes('cnb.run')
   return (
     <div className="min-h-screen bg-neutral-50 flex flex-col">
-      <div className="container mx-auto p-6 max-w-7xl flex-1">
-        <div className="mb-8 flex items-center justify-between">
-          <div >
-            <h1 className="text-4xl font-bold text-neutral-900 mb-2 flex gap-2 items-center">
-              仓库列表
-              <Settings className="inline-block h-5 w-5 text-neutral-400 hover:text-neutral-600 cursor-pointer" onClick={() => navigate({ to: '/config' })} />
-            </h1>
-            <p className="text-neutral-600">共 {list.length} 个仓库</p>
-          </div>
-          <div className="flex items-center gap-2">
-            <Button
-              onClick={() => refresh()}
-              variant="outline"
-              className="gap-2"
-            >
-              <RefreshCw className="h-4 w-4" />
-              刷新
-            </Button>
-            <Button
-              onClick={() => setShowCreateDialog(true)}
-              className="gap-2"
-            >
-              <Plus className="h-4 w-4" />
-              新建仓库
-            </Button>
+      <div className="container mx-auto p-4 md:p-6 max-w-7xl flex-1">
+        <div className="mb-6 md:mb-8 flex flex-col gap-4">
+          <div className="flex flex-col gap-3">
+            <div className="flex items-center justify-between">
+              <h1 className="text-2xl md:text-4xl font-bold text-neutral-900 flex gap-2 items-center">
+                <span className="hidden md:inline">仓库列表</span>
+                <span className="md:hidden">仓库</span>
+                <Settings className="inline-block h-5 w-5 text-neutral-400 hover:text-neutral-600 cursor-pointer" onClick={() => navigate({ to: '/config' })} />
+              </h1>
+            </div>
+            <p className="text-neutral-600 text-sm md:text-base">共 {list.length} 个仓库</p>
+            <div className="flex flex-wrap items-center gap-2">
+              <Button
+                onClick={() => refresh()}
+                variant="outline"
+                className="gap-2 flex-1 sm:flex-none"
+              >
+                <RefreshCw className="h-4 w-4" />
+                <span className="hidden sm:inline">刷新</span>
+              </Button>
+              <Button
+                onClick={() => setShowCreateDialog(true)}
+                className="gap-2 flex-1 sm:flex-none"
+              >
+                <Plus className="h-4 w-4" />
+                <span className="hidden sm:inline">新建仓库</span>
+                <span className="sm:hidden">新建</span>
+              </Button>
 
-            {isCNB && <Button
-              onClick={() => {
-                window.open('/root/cli-center', '_blank')
-              }}
-              className="gap-2"
-            >
-              <ExternalLinkIcon className="h-4 w-4" />
-              CLI
-            </Button>}
+              {isCNB && <Button
+                onClick={() => {
+                  window.open('/root/cli-center', '_blank')
+                }}
+                className="gap-2 hidden md:flex"
+              >
+                <ExternalLinkIcon className="h-4 w-4" />
+                CLI
+              </Button>}
+            </div>
           </div>
         </div>
 
-        <div className="mb-6">
+        <div className="mb-4 md:mb-6">
           <div className="relative">
             <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-neutral-400" />
             <Input
               type="text"
-              placeholder="搜索仓库名称、路径或描述..."
+              placeholder="搜索仓库..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
               className="pl-10"
@@ -117,7 +118,7 @@ export const App = () => {
           </div>
         </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
           {appList.map((repo) => (
             <RepoCard
               key={repo.id}
@@ -135,9 +136,9 @@ export const App = () => {
         )}
       </div>
 
-      <footer className="border-t border-neutral-200 bg-white py-6 mt-auto">
-        <div className="container mx-auto px-6 max-w-7xl">
-          <div className="flex items-center justify-between text-sm text-neutral-500">
+      <footer className="border-t border-neutral-200 bg-white py-4 md:py-6 mt-auto">
+        <div className="container mx-auto px-4 md:px-6 max-w-7xl">
+          <div className="flex flex-col md:flex-row items-center justify-between gap-2 md:gap-4 text-sm text-neutral-500">
             <div>© 2026 仓库管理系统</div>
             <div className="flex items-center gap-4">
               <a href="#" className="hover:text-neutral-900 transition-colors">关于</a>
@@ -177,4 +178,4 @@ export const CommonRepoDialog = () => {
     </>
   )
 }
-export default App;
+export default App;

src/pages/repos/repo/page.tsx

@@ -31,13 +31,13 @@ export const App = () => {
     return <div>Loading...</div>
   }
   return (
-    <div className="p-2 flex-col flex gap-2 h-full">
-      <div className="px-4 h-full scrollbar flex-col flex gap-4 overflow-hidden">
-        <div className="flex border-b mb-4">
+    <div className="p-2 md:p-4 flex-col flex gap-2 md:gap-4 h-full">
+      <div className="px-2 md:px-4 h-full scrollbar flex-col flex gap-3 md:gap-4 overflow-hidden">
+        <div className="flex border-b overflow-x-auto">
           {tabs.map(tab => (
             <div
               key={tab.key}
-              className={`px-4 py-2 cursor-pointer ${activeTab === tab.key ? 'border-b-2 border-gray-500' : ''}`}
+              className={`px-3 md:px-4 py-2 cursor-pointer whitespace-nowrap text-sm md:text-base ${activeTab === tab.key ? 'border-b-2 border-gray-500 font-medium' : ''}`}
               onClick={() => {
                 setActiveTab(tab.key)
                 history.replaceState(null, '', `?repo=${params.repo}&tab=${tab.key}`)
@@ -49,10 +49,10 @@ export const App = () => {
         </div>
         {activeTab === 'build' && <BuildConfig />}
         {activeTab === 'info' && (
-          <div className="flex flex-col gap-4 h-full">
+          <div className="flex flex-col gap-3 md:gap-4 h-full">
             <RepoCard repo={repoStore.editRepo} showReturn />
-            <div className="p-4 border rounded bg-white h-full overflow-auto scrollbar">
-              <pre className="whitespace-pre-wrap break-all">{JSON.stringify(repoStore.editRepo, null, 2)}</pre>
+            <div className="p-3 md:p-4 border rounded bg-white h-full overflow-auto scrollbar">
+              <pre className="whitespace-pre-wrap break-all text-xs md:text-sm">{JSON.stringify(repoStore.editRepo, null, 2)}</pre>
             </div>
           </div>
         )}