体验: 登录页按反馈简化品牌区为大logo+一句话,重做Collection选中效果去掉怪异空心圆与双框
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -1,15 +1,5 @@
|
||||
import { useCallback, useEffect, useState, type ChangeEvent } from "react"
|
||||
import {
|
||||
Check,
|
||||
Clock3,
|
||||
Eye,
|
||||
EyeOff,
|
||||
FolderSync,
|
||||
GitCompareArrows,
|
||||
History,
|
||||
Loader2,
|
||||
ShieldCheck,
|
||||
} from "lucide-react"
|
||||
import { Check, Clock3, Eye, EyeOff, Loader2 } from "lucide-react"
|
||||
|
||||
import { Button } from "~/components/ui/button"
|
||||
import { Input } from "~/components/ui/input"
|
||||
@@ -39,14 +29,6 @@ const EMPTY_FORM: ConnectFormState = {
|
||||
password: "",
|
||||
}
|
||||
|
||||
// 品牌区能力点列表,登录页左侧展示。
|
||||
const BRAND_FEATURES = [
|
||||
{ icon: FolderSync, label: "映射目录与获取最新" },
|
||||
{ icon: ShieldCheck, label: "签出、签入与挂起更改" },
|
||||
{ icon: History, label: "历史记录与变更集回滚" },
|
||||
{ icon: GitCompareArrows, label: "目录对比与版本 Diff" },
|
||||
]
|
||||
|
||||
/**
|
||||
* 连接入口:连接 TFS、加载并确认 Collection、确保默认 Workspace,成功后回调固定上下文。
|
||||
* 布局为左品牌区 + 右表单卡片,带分阶段过渡与最近连接快速填充。
|
||||
@@ -203,40 +185,22 @@ export function ConnectView({ onReady }: { onReady: (session: WorkspaceSession)
|
||||
{/* 隐藏式标题栏下登录页的窗口拖拽区 */}
|
||||
<div className="app-drag absolute inset-x-0 top-0 z-10 h-10" />
|
||||
|
||||
{/* 左侧品牌区 */}
|
||||
<aside className="relative hidden w-[42%] max-w-md min-w-80 flex-col justify-between overflow-hidden bg-zinc-950 p-10 text-zinc-100 md:flex">
|
||||
{/* 左侧品牌区:大 logo + 一句话描述 */}
|
||||
<aside className="relative hidden w-[42%] max-w-md min-w-80 flex-col overflow-hidden bg-zinc-950 p-10 text-zinc-100 md:flex">
|
||||
<div aria-hidden className="pointer-events-none absolute inset-0">
|
||||
<div className="animate-float-slow absolute -top-24 -left-20 size-72 rounded-full bg-blue-500/20 blur-3xl" />
|
||||
<div className="animate-float-slow absolute -right-24 bottom-0 size-80 rounded-full bg-indigo-500/15 blur-3xl [animation-delay:-4s]" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_left,transparent_55%,rgb(9_9_11/0.7))]" />
|
||||
</div>
|
||||
|
||||
<div className="relative mt-6 flex items-center gap-3">
|
||||
<img src="/logo.png" alt="MacTFS" className="size-10 rounded-xl shadow-lg" />
|
||||
<div>
|
||||
<p className="text-lg leading-tight font-semibold tracking-tight">MacTFS</p>
|
||||
<p className="text-xs text-zinc-400">TFS 源码管理 · macOS 桌面工作台</p>
|
||||
<div className="relative flex flex-1 flex-col items-center justify-center gap-5">
|
||||
<img src="/logo.png" alt="MacTFS" className="size-24 rounded-3xl shadow-2xl" />
|
||||
<div className="text-center">
|
||||
<p className="text-2xl font-semibold tracking-tight">MacTFS</p>
|
||||
<p className="mt-1.5 text-sm text-zinc-400">macOS 上的 TFS 源码管理工作台</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative space-y-6">
|
||||
<p className="text-2xl leading-snug font-semibold tracking-tight">
|
||||
连接 Team Foundation Server,
|
||||
<br />
|
||||
在桌面完成日常源码管理。
|
||||
</p>
|
||||
<ul className="space-y-3">
|
||||
{BRAND_FEATURES.map(({ icon: Icon, label }) => (
|
||||
<li key={label} className="flex items-center gap-3 text-sm text-zinc-300">
|
||||
<span className="flex size-7 items-center justify-center rounded-md border border-zinc-700/80 bg-zinc-900/80">
|
||||
<Icon className="size-3.5 text-blue-400" />
|
||||
</span>
|
||||
{label}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="relative flex items-center gap-2 text-xs text-zinc-500">
|
||||
<span
|
||||
className={cn(
|
||||
@@ -412,23 +376,18 @@ export function ConnectView({ onReady }: { onReady: (session: WorkspaceSession)
|
||||
onClick={() => setSelectedCollection(collection.name)}
|
||||
disabled={busy}
|
||||
className={cn(
|
||||
"flex w-full items-center justify-between rounded-lg border bg-card px-3.5 py-3 text-left text-sm transition-all duration-150",
|
||||
"flex w-full items-center justify-between rounded-lg border px-3.5 py-3 text-left text-sm transition-colors duration-150",
|
||||
active
|
||||
? "border-primary shadow-overlay ring-2 ring-primary/25"
|
||||
: "shadow-card hover:-translate-y-px hover:border-ring/40 hover:shadow-overlay",
|
||||
? "border-primary/60 bg-primary/5"
|
||||
: "bg-card shadow-card hover:bg-muted/60",
|
||||
)}
|
||||
>
|
||||
<span className="font-medium">{collection.name}</span>
|
||||
<span
|
||||
className={cn(
|
||||
"flex size-5 items-center justify-center rounded-full border transition-all duration-150",
|
||||
active
|
||||
? "border-primary bg-primary text-primary-foreground"
|
||||
: "border-border text-transparent",
|
||||
)}
|
||||
>
|
||||
<Check className="size-3" />
|
||||
</span>
|
||||
<span className={cn(active && "font-medium")}>{collection.name}</span>
|
||||
{active && (
|
||||
<span className="animate-in zoom-in-75 fade-in flex size-4.5 items-center justify-center rounded-full bg-primary text-primary-foreground duration-150">
|
||||
<Check className="size-3" />
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</li>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user