generated from kevisual/vite-react-template
fix: 优化移动端页面体验
- repos 页面:标题和按钮移动端换行显示,响应式布局优化 - config 页面:移动端无边框,全屏宽度,按钮垂直堆叠 - gitea config 页面:同 config 页面优化 - BuildConfig、RepoCard、Dialog 等组件响应式优化
This commit is contained in:
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user