kevisual/cnb-center
1
0
Fork 0
generated from kevisual/vite-react-template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 优化移动端页面体验

Browse Source 
- repos 页面：标题和按钮移动端换行显示，响应式布局优化
- config 页面：移动端无边框，全屏宽度，按钮垂直堆叠
- gitea config 页面：同 config 页面优化
- BuildConfig、RepoCard、Dialog 等组件响应式优化
This commit is contained in:
xiongxiao
2026-03-13 05:39:26 +08:00
committed by cnb
parent a40cc2175e
commit 500ceb2e42
8 changed files with 120 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/pages/repos/components/RepoCard.tsx
View File

@@ -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)