generated from kevisual/vite-react-template
fix: 优化移动端页面体验
- repos 页面：标题和按钮移动端换行显示，响应式布局优化 - config 页面：移动端无边框，全屏宽度，按钮垂直堆叠 - gitea config 页面：同 config 页面优化 - BuildConfig、RepoCard、Dialog 等组件响应式优化
This commit is contained in:
xiongxiao
@@ -1,5 +1,4 @@
|
|||||||
import { useGiteaConfigStore } from './store';
|
import { useGiteaConfigStore } from './store';
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Label } from '@/components/ui/label';
|
import { Label } from '@/components/ui/label';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
@@ -39,15 +38,15 @@ export const GiteaConfigPage = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container mx-auto max-w-2xl py-8">
|
<div className="container mx-auto max-w-2xl py-4 md:py-8 px-4">
|
||||||
<Card>
|
<div className="bg-white md:rounded-lg md:border md:shadow-sm">
|
||||||
<CardHeader>
|
<div className="p-4 md:p-6 border-b">
|
||||||
<CardTitle>Gitea 配置</CardTitle>
|
<h1 className="text-xl md:text-2xl font-bold">Gitea 配置</h1>
|
||||||
<CardDescription>
|
<p className="text-sm text-muted-foreground mt-1">
|
||||||
配置您的 Gitea API 设置。这些设置会保存在浏览器的本地存储中。
|
配置您的 Gitea API 设置。这些设置会保存在浏览器的本地存储中。
|
||||||
</CardDescription>
|
</p>
|
||||||
</CardHeader>
|
</div>
|
||||||
<CardContent>
|
<div className="p-4 md:p-6">
|
||||||
<form onSubmit={handleSubmit} className="space-y-6">
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<Label htmlFor="gitea-url">Gitea 地址</Label>
|
<Label htmlFor="gitea-url">Gitea 地址</Label>
|
||||||
@@ -71,24 +70,24 @@ export const GiteaConfigPage = () => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex gap-4">
|
<div className="flex flex-col sm:flex-row gap-2 sm:gap-4">
|
||||||
<Button type="submit">保存配置</Button>
|
<Button type="submit" className="w-full sm:w-auto">保存配置</Button>
|
||||||
<Button type="button" variant="outline" onClick={resetConfig}>
|
<Button type="button" variant="outline" onClick={resetConfig} className="w-full sm:w-auto">
|
||||||
重置为默认值
|
重置为默认值
|
||||||
</Button>
|
</Button>
|
||||||
{layoutStore.me && <>
|
{layoutStore.me && <>
|
||||||
<Button type="button" variant="outline" onClick={loadFromRemote}>
|
<Button type="button" variant="outline" onClick={loadFromRemote} className="w-full sm:w-auto">
|
||||||
获取远端配置
|
获取远端配置
|
||||||
</Button>
|
</Button>
|
||||||
<Button type="button" variant="outline" onClick={saveToRemote}>
|
<Button type="button" variant="outline" onClick={saveToRemote} className="w-full sm:w-auto">
|
||||||
保存到远端
|
保存到远端
|
||||||
</Button>
|
</Button>
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</CardContent>
|
</div>
|
||||||
</Card>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import { useConfigStore } from './store';
|
import { useConfigStore } from './store';
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Label } from '@/components/ui/label';
|
import { Label } from '@/components/ui/label';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
@@ -19,15 +18,15 @@ export const ConfigPage = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<TooltipProvider>
|
<TooltipProvider>
|
||||||
<div className="container mx-auto max-w-2xl py-8">
|
<div className="container mx-auto max-w-2xl py-4 md:py-8 px-4">
|
||||||
<Card>
|
<div className="bg-white md:rounded-lg md:border md:shadow-sm">
|
||||||
<CardHeader>
|
<div className="p-4 md:p-6 border-b">
|
||||||
<CardTitle>CNB 配置</CardTitle>
|
<h1 className="text-xl md:text-2xl font-bold">CNB 配置</h1>
|
||||||
<CardDescription>
|
<p className="text-sm text-muted-foreground mt-1">
|
||||||
配置您的 CNB API 设置。这些设置会保存在浏览器的本地存储中。
|
配置您的 CNB API 设置。这些设置会保存在浏览器的本地存储中。
|
||||||
</CardDescription>
|
</p>
|
||||||
</CardHeader>
|
</div>
|
||||||
<CardContent>
|
<div className="p-4 md:p-6">
|
||||||
<form onSubmit={handleSubmit} className="space-y-6">
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
@@ -91,17 +90,17 @@ export const ConfigPage = () => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex gap-4">
|
<div className="flex flex-col sm:flex-row gap-2 sm:gap-4">
|
||||||
<Button type="button" variant="outline" onClick={loadFromRemote}>
|
<Button type="button" variant="outline" onClick={loadFromRemote} className="w-full sm:w-auto">
|
||||||
获取远端配置
|
获取远端配置
|
||||||
</Button>
|
</Button>
|
||||||
<Button type="button" variant="outline" onClick={saveToRemote}>
|
<Button type="button" variant="outline" onClick={saveToRemote} className="w-full sm:w-auto">
|
||||||
保存到远端
|
保存到远端
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</CardContent>
|
</div>
|
||||||
</Card>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</TooltipProvider>
|
</TooltipProvider>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -59,23 +59,24 @@ export const BuildConfig = () => {
|
|||||||
return <div>Loading...</div>
|
return <div>Loading...</div>
|
||||||
}
|
}
|
||||||
return (
|
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="w-full md:w-64 shrink-0 space-y-3 md:space-y-4 order-2 md:order-1">
|
||||||
<div className="text-xl font-bold border-b pb-2 mb-4 flex">
|
<div className="text-lg md:text-xl font-bold border-b pb-2 mb-3 md:mb-4 flex items-center gap-2">
|
||||||
<button
|
<button
|
||||||
onClick={() => navigate({ to: '/' })}
|
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" />
|
<ArrowLeft className="w-4 h-4 text-neutral-600" />
|
||||||
</button>
|
</button>
|
||||||
<span className="text-lg font-semibold">构建配置</span>
|
<span className="text-base md:text-lg font-semibold truncate">构建配置</span>
|
||||||
<button
|
<button
|
||||||
onClick={repoStore.buildWorkspace}
|
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="构建工作空间"
|
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>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
@@ -105,19 +106,19 @@ export const BuildConfig = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 右侧 - 编辑器 */}
|
{/* 右侧 - 编辑器 */}
|
||||||
<div className="flex-1 flex flex-col h-full ">
|
<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">
|
<div className="flex items-center justify-between mb-2 gap-2">
|
||||||
<span className="text-sm font-medium">配置文件</span>
|
<span className="text-sm font-medium">配置文件</span>
|
||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
<button
|
<button
|
||||||
onClick={handleSave}
|
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>
|
||||||
<button
|
<button
|
||||||
onClick={() => repoStore.deleteBuildConfig({ repo: repo, user: me })}
|
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>
|
</button>
|
||||||
|
|||||||
@@ -84,20 +84,20 @@ export function RepoCard({ showReturn = false, repo }: RepoCardProps) {
|
|||||||
}
|
}
|
||||||
return (
|
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">
|
<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-6 space-y-4">
|
<div className="p-4 md:p-6 space-y-3 md:space-y-4">
|
||||||
<div className="flex items-start justify-between gap-3">
|
<div className="flex items-start justify-between gap-2">
|
||||||
<div className="flex items-center gap-2 flex-1 min-w-0">
|
<div className="flex items-center gap-2 flex-1 min-w-0">
|
||||||
{showReturn && (
|
{showReturn && (
|
||||||
<button
|
<button
|
||||||
onClick={() => navigate({ to: '/' })}
|
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" />
|
<ArrowLeft className="w-4 h-4 text-neutral-600" />
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
<div
|
<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={() => {
|
onClick={() => {
|
||||||
openInCNB()
|
openInCNB()
|
||||||
}}
|
}}
|
||||||
@@ -127,7 +127,7 @@ export function RepoCard({ showReturn = false, repo }: RepoCardProps) {
|
|||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2 shrink-0">
|
<div className="flex items-center gap-1 md:gap-2 shrink-0">
|
||||||
{isWorkspaceActive && (
|
{isWorkspaceActive && (
|
||||||
<TooltipProvider>
|
<TooltipProvider>
|
||||||
<Tooltip>
|
<Tooltip>
|
||||||
@@ -288,7 +288,7 @@ export function RepoCard({ showReturn = false, repo }: RepoCardProps) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-wrap gap-2">
|
<div className="flex flex-wrap gap-1.5 md:gap-2">
|
||||||
{repo.topics && (<>
|
{repo.topics && (<>
|
||||||
{
|
{
|
||||||
repo.topics.split(',').map((topic: string, idx: number) => (
|
repo.topics.split(',').map((topic: string, idx: number) => (
|
||||||
@@ -306,7 +306,7 @@ export function RepoCard({ showReturn = false, repo }: RepoCardProps) {
|
|||||||
}}>
|
}}>
|
||||||
{repo.site && (
|
{repo.site && (
|
||||||
<div
|
<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) => {
|
onClick={(e) => {
|
||||||
window.open(repo.site, '_blank')
|
window.open(repo.site, '_blank')
|
||||||
e.stopPropagation()
|
e.stopPropagation()
|
||||||
@@ -319,27 +319,27 @@ export function RepoCard({ showReturn = false, repo }: RepoCardProps) {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{repo.description && (
|
{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}
|
{repo.description}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</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">
|
<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.5 hover:text-neutral-900 transition-colors">
|
<span className="flex items-center gap-1 hover:text-neutral-900 transition-colors whitespace-nowrap">
|
||||||
<Star className="w-3.5 h-3.5" />
|
<Star className="w-3.5 h-3.5" />
|
||||||
<span className="font-medium">{repo.star_count}</span>
|
<span className="font-medium">{repo.star_count}</span>
|
||||||
</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" />
|
<GitFork className="w-3.5 h-3.5" />
|
||||||
<span className="font-medium">{repo.fork_count}</span>
|
<span className="font-medium">{repo.fork_count}</span>
|
||||||
</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" />
|
<FileText className="w-3.5 h-3.5" />
|
||||||
<span className="font-medium">{repo.open_issue_count}</span>
|
<span className="font-medium">{repo.open_issue_count}</span>
|
||||||
</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={() => {
|
onClick={() => {
|
||||||
store.getWorkspaceDetail(workspace)
|
store.getWorkspaceDetail(workspace)
|
||||||
}}>
|
}}>
|
||||||
@@ -348,7 +348,7 @@ export function RepoCard({ showReturn = false, repo }: RepoCardProps) {
|
|||||||
</span>}
|
</span>}
|
||||||
{isMine && (
|
{isMine && (
|
||||||
<span
|
<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={() => {
|
onClick={() => {
|
||||||
store.setSelectedSyncRepo(repo)
|
store.setSelectedSyncRepo(repo)
|
||||||
store.setSyncDialogOpen(true)
|
store.setSyncDialogOpen(true)
|
||||||
|
|||||||
@@ -64,7 +64,7 @@ export function CreateRepoDialog({ open, onOpenChange }: CreateRepoDialogProps)
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||||
<DialogContent className="sm:max-w-150">
|
<DialogContent className="w-[90vw] max-w-lg sm:max-w-[525px]">
|
||||||
<DialogHeader>
|
<DialogHeader>
|
||||||
<DialogTitle>新建仓库</DialogTitle>
|
<DialogTitle>新建仓库</DialogTitle>
|
||||||
<DialogDescription>
|
<DialogDescription>
|
||||||
@@ -87,7 +87,7 @@ export function CreateRepoDialog({ open, onOpenChange }: CreateRepoDialogProps)
|
|||||||
<Textarea
|
<Textarea
|
||||||
id="description"
|
id="description"
|
||||||
placeholder="简短描述你的仓库..."
|
placeholder="简短描述你的仓库..."
|
||||||
rows={3}
|
rows={2}
|
||||||
{...register('description')}
|
{...register('description')}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -110,16 +110,17 @@ export function CreateRepoDialog({ open, onOpenChange }: CreateRepoDialogProps)
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DialogFooter>
|
<DialogFooter className="flex-col sm:flex-row gap-2 sm:gap-0">
|
||||||
<Button
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
variant="outline"
|
variant="outline"
|
||||||
onClick={() => onOpenChange(false)}
|
onClick={() => onOpenChange(false)}
|
||||||
disabled={isSubmitting}
|
disabled={isSubmitting}
|
||||||
|
className="w-full sm:w-auto"
|
||||||
>
|
>
|
||||||
取消
|
取消
|
||||||
</Button>
|
</Button>
|
||||||
<Button type="submit" disabled={isSubmitting}>
|
<Button type="submit" disabled={isSubmitting} className="w-full sm:w-auto">
|
||||||
{isSubmitting ? '创建中...' : '创建仓库'}
|
{isSubmitting ? '创建中...' : '创建仓库'}
|
||||||
</Button>
|
</Button>
|
||||||
</DialogFooter>
|
</DialogFooter>
|
||||||
|
|||||||
@@ -76,21 +76,21 @@ export function EditRepoDialog({ open, onOpenChange, repo }: EditRepoDialogProps
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||||
<DialogContent className="max-w-2xl!">
|
<DialogContent className="w-[90vw] max-w-2xl! max-h-[85vh] overflow-y-auto">
|
||||||
<DialogHeader>
|
<DialogHeader>
|
||||||
<DialogTitle>编辑仓库信息</DialogTitle>
|
<DialogTitle>编辑仓库信息</DialogTitle>
|
||||||
<DialogDescription>{repo.path}</DialogDescription>
|
<DialogDescription className="text-sm truncate">{repo.path}</DialogDescription>
|
||||||
</DialogHeader>
|
</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">
|
<div className="space-y-2">
|
||||||
<Label htmlFor="description">描述</Label>
|
<Label htmlFor="description">描述</Label>
|
||||||
<Textarea
|
<Textarea
|
||||||
id="description"
|
id="description"
|
||||||
{...register('description')}
|
{...register('description')}
|
||||||
placeholder="输入仓库描述"
|
placeholder="输入仓库描述"
|
||||||
className="w-full min-h-[100px]"
|
className="w-full min-h-[80px] md:min-h-[100px]"
|
||||||
rows={4}
|
rows={3}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -125,15 +125,16 @@ export function EditRepoDialog({ open, onOpenChange, repo }: EditRepoDialogProps
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DialogFooter>
|
<DialogFooter className="flex-col sm:flex-row gap-2 sm:gap-0">
|
||||||
<Button
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
variant="outline"
|
variant="outline"
|
||||||
onClick={() => onOpenChange(false)}
|
onClick={() => onOpenChange(false)}
|
||||||
|
className="w-full sm:w-auto"
|
||||||
>
|
>
|
||||||
取消
|
取消
|
||||||
</Button>
|
</Button>
|
||||||
<Button type="submit">
|
<Button type="submit" className="w-full sm:w-auto">
|
||||||
保存
|
保存
|
||||||
</Button>
|
</Button>
|
||||||
</DialogFooter>
|
</DialogFooter>
|
||||||
|
|||||||
@@ -37,7 +37,6 @@ export const App = () => {
|
|||||||
|
|
||||||
|
|
||||||
const appList = useMemo(() => {
|
const appList = useMemo(() => {
|
||||||
// 首先按活动状态排序
|
|
||||||
const sortedList = [...list].sort((a, b) => {
|
const sortedList = [...list].sort((a, b) => {
|
||||||
const aActive = workspaceList.some(ws => ws.slug === a.path)
|
const aActive = workspaceList.some(ws => ws.slug === a.path)
|
||||||
const bActive = workspaceList.some(ws => ws.slug === b.path)
|
const bActive = workspaceList.some(ws => ws.slug === b.path)
|
||||||
@@ -47,12 +46,10 @@ export const App = () => {
|
|||||||
return 0
|
return 0
|
||||||
})
|
})
|
||||||
|
|
||||||
// 如果没有搜索词，返回排序后的列表
|
|
||||||
if (!searchQuery.trim()) {
|
if (!searchQuery.trim()) {
|
||||||
return sortedList
|
return sortedList
|
||||||
}
|
}
|
||||||
|
|
||||||
// 使用 Fuse.js 进行模糊搜索
|
|
||||||
const fuse = new Fuse(sortedList, {
|
const fuse = new Fuse(sortedList, {
|
||||||
keys: ['name', 'path', 'description'],
|
keys: ['name', 'path', 'description'],
|
||||||
threshold: 0.3,
|
threshold: 0.3,
|
||||||
@@ -66,50 +63,54 @@ export const App = () => {
|
|||||||
const isCNB = location.hostname.includes('cnb.run')
|
const isCNB = location.hostname.includes('cnb.run')
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-neutral-50 flex flex-col">
|
<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="container mx-auto p-4 md:p-6 max-w-7xl flex-1">
|
||||||
<div className="mb-8 flex items-center justify-between">
|
<div className="mb-6 md:mb-8 flex flex-col gap-4">
|
||||||
<div >
|
<div className="flex flex-col gap-3">
|
||||||
<h1 className="text-4xl font-bold text-neutral-900 mb-2 flex gap-2 items-center">
|
<div className="flex items-center justify-between">
|
||||||
仓库列表
|
<h1 className="text-2xl md:text-4xl font-bold text-neutral-900 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' })} />
|
<span className="hidden md:inline">仓库列表</span>
|
||||||
</h1>
|
<span className="md:hidden">仓库</span>
|
||||||
<p className="text-neutral-600">共 {list.length} 个仓库</p>
|
<Settings className="inline-block h-5 w-5 text-neutral-400 hover:text-neutral-600 cursor-pointer" onClick={() => navigate({ to: '/config' })} />
|
||||||
</div>
|
</h1>
|
||||||
<div className="flex items-center gap-2">
|
</div>
|
||||||
<Button
|
<p className="text-neutral-600 text-sm md:text-base">共 {list.length} 个仓库</p>
|
||||||
onClick={() => refresh()}
|
<div className="flex flex-wrap items-center gap-2">
|
||||||
variant="outline"
|
<Button
|
||||||
className="gap-2"
|
onClick={() => refresh()}
|
||||||
>
|
variant="outline"
|
||||||
<RefreshCw className="h-4 w-4" />
|
className="gap-2 flex-1 sm:flex-none"
|
||||||
刷新
|
>
|
||||||
</Button>
|
<RefreshCw className="h-4 w-4" />
|
||||||
<Button
|
<span className="hidden sm:inline">刷新</span>
|
||||||
onClick={() => setShowCreateDialog(true)}
|
</Button>
|
||||||
className="gap-2"
|
<Button
|
||||||
>
|
onClick={() => setShowCreateDialog(true)}
|
||||||
<Plus className="h-4 w-4" />
|
className="gap-2 flex-1 sm:flex-none"
|
||||||
新建仓库
|
>
|
||||||
</Button>
|
<Plus className="h-4 w-4" />
|
||||||
|
<span className="hidden sm:inline">新建仓库</span>
|
||||||
|
<span className="sm:hidden">新建</span>
|
||||||
|
</Button>
|
||||||
|
|
||||||
{isCNB && <Button
|
{isCNB && <Button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
window.open('/root/cli-center', '_blank')
|
window.open('/root/cli-center', '_blank')
|
||||||
}}
|
}}
|
||||||
className="gap-2"
|
className="gap-2 hidden md:flex"
|
||||||
>
|
>
|
||||||
<ExternalLinkIcon className="h-4 w-4" />
|
<ExternalLinkIcon className="h-4 w-4" />
|
||||||
CLI
|
CLI
|
||||||
</Button>}
|
</Button>}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mb-6">
|
<div className="mb-4 md:mb-6">
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-neutral-400" />
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-neutral-400" />
|
||||||
<Input
|
<Input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="搜索仓库名称、路径或描述..."
|
placeholder="搜索仓库..."
|
||||||
value={searchQuery}
|
value={searchQuery}
|
||||||
onChange={(e) => setSearchQuery(e.target.value)}
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
className="pl-10"
|
className="pl-10"
|
||||||
@@ -117,7 +118,7 @@ export const App = () => {
|
|||||||
</div>
|
</div>
|
||||||
</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) => (
|
{appList.map((repo) => (
|
||||||
<RepoCard
|
<RepoCard
|
||||||
key={repo.id}
|
key={repo.id}
|
||||||
@@ -135,9 +136,9 @@ export const App = () => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<footer className="border-t border-neutral-200 bg-white py-6 mt-auto">
|
<footer className="border-t border-neutral-200 bg-white py-4 md:py-6 mt-auto">
|
||||||
<div className="container mx-auto px-6 max-w-7xl">
|
<div className="container mx-auto px-4 md:px-6 max-w-7xl">
|
||||||
<div className="flex items-center justify-between text-sm text-neutral-500">
|
<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>© 2026 仓库管理系统</div>
|
||||||
<div className="flex items-center gap-4">
|
<div className="flex items-center gap-4">
|
||||||
<a href="#" className="hover:text-neutral-900 transition-colors">关于</a>
|
<a href="#" className="hover:text-neutral-900 transition-colors">关于</a>
|
||||||
@@ -177,4 +178,4 @@ export const CommonRepoDialog = () => {
|
|||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
export default App;
|
export default App;
|
||||||
|
|||||||
@@ -31,13 +31,13 @@ export const App = () => {
|
|||||||
return <div>Loading...</div>
|
return <div>Loading...</div>
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<div className="p-2 flex-col flex gap-2 h-full">
|
<div className="p-2 md:p-4 flex-col flex gap-2 md:gap-4 h-full">
|
||||||
<div className="px-4 h-full scrollbar flex-col flex gap-4 overflow-hidden">
|
<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 mb-4">
|
<div className="flex border-b overflow-x-auto">
|
||||||
{tabs.map(tab => (
|
{tabs.map(tab => (
|
||||||
<div
|
<div
|
||||||
key={tab.key}
|
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={() => {
|
onClick={() => {
|
||||||
setActiveTab(tab.key)
|
setActiveTab(tab.key)
|
||||||
history.replaceState(null, '', `?repo=${params.repo}&tab=${tab.key}`)
|
history.replaceState(null, '', `?repo=${params.repo}&tab=${tab.key}`)
|
||||||
@@ -49,10 +49,10 @@ export const App = () => {
|
|||||||
</div>
|
</div>
|
||||||
{activeTab === 'build' && <BuildConfig />}
|
{activeTab === 'build' && <BuildConfig />}
|
||||||
{activeTab === 'info' && (
|
{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 />
|
<RepoCard repo={repoStore.editRepo} showReturn />
|
||||||
<div className="p-4 border rounded bg-white h-full overflow-auto scrollbar">
|
<div className="p-3 md: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>
|
<pre className="whitespace-pre-wrap break-all text-xs md:text-sm">{JSON.stringify(repoStore.editRepo, null, 2)}</pre>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user