cqcst/wk-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 账号卡片不能收缩展开

Browse Source
This commit is contained in:
zhilv
2026-03-27 11:02:11 +08:00
parent 8ee9a696b4
commit 45d4f2b008
2 changed files with 13 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/account/AccountSidebar.tsx
View File

@@ -59,8 +59,8 @@ const AccountSidebar = (props: AccountSidebarProps) => {
> >
<For each={props.accounts}> <For each={props.accounts}>
{(account) => { {(account) => {
const selected = account.id === props.selectedAccountId; const selected = () => account.id === props.selectedAccountId;
const expanded = account.id === props.expandedAccountId; const expanded = () => account.id === props.expandedAccountId;
const platformLabel = const platformLabel =
props.hostLabels[account.host] ?? account.host; props.hostLabels[account.host] ?? account.host;
const statusLabel = const statusLabel =
@@ -70,13 +70,13 @@ const AccountSidebar = (props: AccountSidebarProps) => {
return ( return (
<div <div
class={ class={
selected selected()
? compact() ? compact()
? "rounded-[22px] border border-cyan-300 bg-[linear-gradient(145deg,_rgba(236,254,255,0.95),_rgba(240,253,244,0.95))] px-3 py-3 shadow-sm" ? "rounded-[22px] border border-cyan-300 bg-[linear-gradient(145deg,rgba(236,254,255,0.95),rgba(240,253,244,0.95))] px-3 py-3 shadow-sm"
: "rounded-[24px] border border-cyan-300 bg-[linear-gradient(145deg,_rgba(236,254,255,0.95),_rgba(240,253,244,0.95))] px-4 py-4 shadow-sm" : "rounded-3xl border border-cyan-300 bg-[linear-gradient(145deg,rgba(236,254,255,0.95),rgba(240,253,244,0.95))] px-4 py-4 shadow-sm"
: compact() : compact()
? "rounded-[22px] border border-zinc-200 bg-[linear-gradient(180deg,_rgba(250,250,250,0.9),_rgba(255,255,255,0.95))] px-3 py-3 shadow-sm transition hover:border-cyan-200 hover:bg-white" ? "rounded-[22px] border border-zinc-200 bg-[linear-gradient(180deg,rgba(250,250,250,0.9),rgba(255,255,255,0.95))] px-3 py-3 shadow-sm transition hover:border-cyan-200 hover:bg-white"
: "rounded-[24px] border border-zinc-200 bg-[linear-gradient(180deg,_rgba(250,250,250,0.9),_rgba(255,255,255,0.95))] px-4 py-4 shadow-sm transition hover:border-cyan-200 hover:bg-white" : "rounded-3xl border border-zinc-200 bg-[linear-gradient(180deg,rgba(250,250,250,0.9),rgba(255,255,255,0.95))] px-4 py-4 shadow-sm transition hover:border-cyan-200 hover:bg-white"
} }
> >
<div class="flex items-start justify-between gap-3"> <div class="flex items-start justify-between gap-3">
@@ -100,14 +100,6 @@ const AccountSidebar = (props: AccountSidebarProps) => {
学号：{account.user.id} 学号：{account.user.id}
</p> </p>
</div> </div>
<div class="flex shrink-0 items-center gap-2">
<span class="rounded-full bg-white/80 px-3 py-1 text-xs font-medium text-cyan-700 shadow-sm">
{statusLabel}
</span>
<span class="text-sm text-zinc-400">
{expanded ? "收起" : "展开"}
</span>
</div>
</div> </div>
</button> </button>
<button <button
@@ -115,11 +107,11 @@ const AccountSidebar = (props: AccountSidebarProps) => {
class="shrink-0 text-sm text-zinc-400 transition hover:text-zinc-600" class="shrink-0 text-sm text-zinc-400 transition hover:text-zinc-600"
onClick={() => props.onToggleExpand(account.id)} onClick={() => props.onToggleExpand(account.id)}
> >
{expanded ? "收起" : "展开"} {expanded() ? "收起" : "展开"}
</button> </button>
</div> </div>
<Show when={expanded}> <Show when={expanded()}>
<div class="mt-4 grid gap-2 border-t border-cyan-100 pt-4 text-sm text-zinc-600"> <div class="mt-4 grid gap-2 border-t border-cyan-100 pt-4 text-sm text-zinc-600">
<p>学院：{account.user.dept}</p> <p>学院：{account.user.dept}</p>
<p>班级：{account.user.class}</p> <p>班级：{account.user.class}</p>
@@ -127,6 +119,7 @@ const AccountSidebar = (props: AccountSidebarProps) => {
<p>站点：{account.host}</p> <p>站点：{account.host}</p>
<p>账号：{account.username || "-"}</p> <p>账号：{account.username || "-"}</p>
<p>课程数：{account.courses.length}</p> <p>课程数：{account.courses.length}</p>
<p>课程类型：{statusLabel}</p>
<div class="mt-2 flex gap-2"> <div class="mt-2 flex gap-2">
<button <button
@@ -158,7 +151,7 @@ const AccountSidebar = (props: AccountSidebarProps) => {
</For> </For>
<Show when={props.accounts.length === 0}> <Show when={props.accounts.length === 0}>
<div class="rounded-[24px] border border-dashed border-zinc-300 bg-zinc-50/80 px-5 py-10 text-center text-zinc-500"> <div class="rounded-3xl border border-dashed border-zinc-300 bg-zinc-50/80 px-5 py-10 text-center text-zinc-500">
还没有账号，点击右上角“添加账号”开始登录。 还没有账号，点击右上角“添加账号”开始登录。
</div> </div>
</Show> </Show>

4
src/pages/accouts/Account.tsx
View File

@@ -484,7 +484,7 @@ const Account = () => {
return ( return (
<div class="flex h-full min-h-0 flex-col overflow-hidden"> <div class="flex h-full min-h-0 flex-col overflow-hidden">
<div class="flex shrink-0 items-center justify-between gap-4 rounded-[28px] border border-white/80 bg-[linear-gradient(135deg,_rgba(236,254,255,0.95),_rgba(255,255,255,0.92))] px-5 py-4 shadow-[0_18px_45px_-28px_rgba(8,145,178,0.35)]"> <div class="flex shrink-0 items-center justify-between gap-4 rounded-[28px] border border-white/80 bg-[linear-gradient(135deg,rgba(236,254,255,0.95),rgba(255,255,255,0.92))] px-5 py-4 shadow-[0_18px_45px_-28px_rgba(8,145,178,0.35)]">
<div> <div>
<p class="text-xs font-medium tracking-[0.26em] text-cyan-700/75 uppercase"> <p class="text-xs font-medium tracking-[0.26em] text-cyan-700/75 uppercase">
Account Center Account Center
@@ -496,7 +496,7 @@ const Account = () => {
</div> </div>
<button <button
class="rounded-2xl bg-[linear-gradient(135deg,_#06b6d4,_#14b8a6)] px-4 py-3 text-sm font-medium text-white shadow-lg shadow-cyan-500/20 transition hover:translate-y-[-1px] hover:shadow-cyan-500/30" class="rounded-2xl bg-[linear-gradient(135deg,#06b6d4,#14b8a6)] px-4 py-3 text-sm font-medium text-white shadow-lg shadow-cyan-500/20 transition hover:-translate-y-px hover:shadow-cyan-500/30"
onClick={openDialog} onClick={openDialog}
> >
添加账号 添加账号