duanshuwen/zn-ai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: update component styles for improved consistency and readability

Browse Source
This commit is contained in:
duanshuwen
2026-04-19 10:10:16 +08:00
parent 5cc9b86e1f
commit 6eb60a47a1
4 changed files with 24 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/Agents/components/AgentCard.tsx
View File

@@ -25,9 +25,9 @@ export default function AgentCard({
onOpenSettings, onOpenSettings,
}: AgentCardProps) { }: AgentCardProps) {
return ( return (
<article className="rounded-[32px] bg-[#EEE9DD] px-7 py-6 shadow-[inset_0_1px_0_rgba(255,255,255,0.5)] dark:bg-[#1f1f22]"> <article className="rounded-2xl bg-[#F5F7FA] px-7 py-6 shadow-[inset_0_1px_0_rgba(255,255,255,0.5)] dark:bg-[#1f1f22]">
<div className="flex items-center gap-5"> <div className="flex items-center gap-5">
<div className="flex h-[82px] w-[82px] shrink-0 items-center justify-center rounded-full bg-[#E3E0D9] text-[#2E67F8] shadow-[0_6px_18px_rgba(15,23,42,0.08)] dark:bg-[#26262a]"> <div className="flex h-20.5 w-20.5 shrink-0 items-center justify-center rounded-full bg-[#E3E0D9] text-[#2E67F8] shadow-[0_6px_18px_rgba(15,23,42,0.08)] dark:bg-[#26262a]">
<Bot className="h-9 w-9 stroke-[1.8]" /> <Bot className="h-9 w-9 stroke-[1.8]" />
</div> </div>

22
src/pages/Agents/index.tsx
View File

@@ -215,7 +215,7 @@ export default function AgentsPage() {
if (isInitialLoading) { if (isInitialLoading) {
return ( return (
<section className="h-full w-full min-h-0"> <section className="h-full w-full min-h-0">
<div className="flex h-full w-full min-h-0 items-center justify-center rounded-[32px] bg-[#F5F0E4] dark:bg-[#141416]"> <div className="flex h-full w-full min-h-0 items-center justify-center rounded-4xl bg-[#F5F0E4] dark:bg-[#141416]">
<Spinner /> <Spinner />
</div> </div>
</section> </section>
@@ -285,16 +285,16 @@ export default function AgentsPage() {
return ( return (
<section className="h-full w-full min-h-0"> <section className="h-full w-full min-h-0">
<div className="flex h-full w-full min-h-0 flex-col overflow-y-auto rounded-[32px] bg-[#F5F0E4] px-12 py-12 dark:bg-[#141416]"> <div className="flex h-full w-full min-h-0 flex-col overflow-y-auto rounded-2xl bg-white px-12 py-12 dark:bg-[#141416]">
<div className="flex flex-col gap-8 xl:flex-row xl:items-start xl:justify-between"> <div className="flex flex-col gap-8 xl:flex-row xl:items-start xl:justify-between">
<div className="min-w-0"> <div className="min-w-0">
<h1 <h1
className="text-[72px] font-normal leading-none tracking-tight text-[#0D1730] dark:text-[#f3f4f6] md:text-[92px]" className="text-[24px] font-normal leading-none tracking-tight text-[#0D1730] dark:text-[#f3f4f6] md:text-[92px]"
style={{ fontFamily: "Georgia, Cambria, 'Times New Roman', Times, serif" }} style={{ fontFamily: "Georgia, Cambria, 'Times New Roman', Times, serif" }}
> >
{pageCopy.title} {pageCopy.title}
</h1> </h1>
<p className="mt-8 max-w-[960px] text-[24px] font-semibold leading-[1.55] text-[#555C69] dark:text-gray-400"> <p className="mt-8 max-w-240 text-[12px] font-semibold leading-[1.55] text-[#555C69] dark:text-gray-400">
{pageCopy.subtitle} {pageCopy.subtitle}
</p> </p>
</div> </div>
@@ -303,7 +303,7 @@ export default function AgentsPage() {
<button <button
type="button" type="button"
disabled={isBusy} disabled={isBusy}
className="inline-flex h-[66px] items-center gap-3 rounded-full border border-black/12 bg-white/50 px-9 text-[18px] font-medium text-[#2E3445] transition-colors hover:bg-white/80 disabled:cursor-not-allowed disabled:opacity-60 dark:border-white/10 dark:bg-[#222225] dark:text-gray-200 dark:hover:bg-[#2a2a2d]" className="inline-flex px-4 py-2 items-center gap-3 rounded-full border border-black/12 bg-white/50 text-[18px] font-medium text-[#2E3445] transition-colors hover:bg-white/80 disabled:cursor-not-allowed disabled:opacity-60 dark:border-white/10 dark:bg-[#222225] dark:text-gray-200 dark:hover:bg-[#2a2a2d]"
onClick={() => { onClick={() => {
void handleRefresh(); void handleRefresh();
}} }}
@@ -315,7 +315,7 @@ export default function AgentsPage() {
<button <button
type="button" type="button"
disabled={isBusy} disabled={isBusy}
className="inline-flex h-[66px] items-center gap-3 rounded-full bg-[#2E67F8] px-10 text-[18px] font-semibold text-white transition-colors hover:bg-[#2458E0] disabled:cursor-not-allowed disabled:opacity-60" className="inline-flex px-4 py-2 items-center gap-3 rounded-full bg-[#2E67F8] text-[18px] font-semibold text-white transition-colors hover:bg-[#2458E0] disabled:cursor-not-allowed disabled:opacity-60"
onClick={() => { onClick={() => {
setAddDialogOpen(true); setAddDialogOpen(true);
}} }}
@@ -328,7 +328,7 @@ export default function AgentsPage() {
<div className="mt-10 space-y-4"> <div className="mt-10 space-y-4">
{warning ? ( {warning ? (
<div className="rounded-[24px] border border-amber-500/25 bg-amber-500/10 px-5 py-4 text-[15px] text-amber-700 dark:text-amber-300"> <div className="rounded-3xl border border-amber-500/25 bg-amber-500/10 px-5 py-4 text-[15px] text-amber-700 dark:text-amber-300">
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<AlertCircle className="mt-0.5 h-5 w-5 shrink-0" /> <AlertCircle className="mt-0.5 h-5 w-5 shrink-0" />
<span>{warning}</span> <span>{warning}</span>
@@ -337,7 +337,7 @@ export default function AgentsPage() {
) : null} ) : null}
{error ? ( {error ? (
<div className="rounded-[24px] border border-red-500/25 bg-red-500/10 px-5 py-4 text-[15px] text-red-700 dark:text-red-300"> <div className="rounded-3xl border border-red-500/25 bg-red-500/10 px-5 py-4 text-[15px] text-red-700 dark:text-red-300">
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<AlertCircle className="mt-0.5 h-5 w-5 shrink-0" /> <AlertCircle className="mt-0.5 h-5 w-5 shrink-0" />
<span>{message('agents.errorPrefix', '加载 Agents 失败：{error}', { error })}</span> <span>{message('agents.errorPrefix', '加载 Agents 失败：{error}', { error })}</span>
@@ -346,7 +346,7 @@ export default function AgentsPage() {
) : null} ) : null}
{providerError ? ( {providerError ? (
<div className="rounded-[24px] border border-amber-500/25 bg-amber-500/10 px-5 py-4 text-[15px] text-amber-700 dark:text-amber-300"> <div className="rounded-3xl border border-amber-500/25 bg-amber-500/10 px-5 py-4 text-[15px] text-amber-700 dark:text-amber-300">
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<AlertCircle className="mt-0.5 h-5 w-5 shrink-0" /> <AlertCircle className="mt-0.5 h-5 w-5 shrink-0" />
<span>{`${pageCopy.settingsDialog.providerLoadErrorPrefix}${providerError}`}</span> <span>{`${pageCopy.settingsDialog.providerLoadErrorPrefix}${providerError}`}</span>
@@ -355,9 +355,9 @@ export default function AgentsPage() {
) : null} ) : null}
</div> </div>
<div className="mt-12 space-y-5 pb-6"> <div className="space-y-5 pb-4">
{sortedAgents.length === 0 ? ( {sortedAgents.length === 0 ? (
<div className="rounded-[32px] border border-dashed border-black/10 bg-[#EEE9DD] px-8 py-12 text-[#555C69] dark:border-white/10 dark:bg-[#1f1f22] dark:text-gray-400"> <div className="rounded-2xl border border-dashed border-black/10 bg-[#F5F7FA] px-8 py-12 text-[#555C69] dark:border-white/10 dark:bg-[#1f1f22] dark:text-gray-400">
<div className="text-[24px] font-semibold text-[#0D1730] dark:text-[#f3f4f6]"> <div className="text-[24px] font-semibold text-[#0D1730] dark:text-[#f3f4f6]">
{pageCopy.emptyTitle} {pageCopy.emptyTitle}
</div> </div>

16
src/pages/Setting/components/AccountSettingsPanel.tsx
View File

@@ -9,30 +9,30 @@ export default function AccountSettingsPanel() {
const { t } = useI18n(); const { t } = useI18n();
return ( return (
<section className="flex-1 h-full p-[20px] select-none"> <section className="flex-1 h-full p-5 select-none">
<SectionHeader <SectionHeader
title={t('settings.account.title')} title={t('settings.account.title')}
description={t('settings.account.description')} description={t('settings.account.description')}
/> />
<div className="mt-[20px] box-border flex w-full items-center border-b border-dashed border-[#E5E8EE] py-[20px] dark:border-gray-700"> <div className="mt-5 box-border flex w-full items-center border-b border-dashed border-[#E5E8EE] py-5 dark:border-gray-700">
<div className="mr-[24px] whitespace-nowrap text-[16px] font-medium text-[#171717] dark:text-gray-100"> <div className="mr-6 whitespace-nowrap text-[16px] font-medium text-[#171717] dark:text-gray-100">
{t('settings.account.accountLabel')} {t('settings.account.accountLabel')}
</div> </div>
<div className="text-[14px] font-medium text-[#171717] dark:text-gray-100">{ACCOUNT_ID}</div> <div className="text-[14px] font-medium text-[#171717] dark:text-gray-100">{ACCOUNT_ID}</div>
</div> </div>
<div className="box-border flex w-full items-center gap-3 border-b border-dashed border-[#E5E8EE] py-[20px] dark:border-gray-700"> <div className="box-border flex w-full items-center gap-3 border-b border-dashed border-[#E5E8EE] py-5 dark:border-gray-700">
<div className="mr-[24px] whitespace-nowrap text-[16px] font-medium text-[#171717] dark:text-gray-100"> <div className="mr-6 whitespace-nowrap text-[16px] font-medium text-[#171717] dark:text-gray-100">
{t('settings.account.passwordLabel')} {t('settings.account.passwordLabel')}
</div> </div>
<div className="min-w-0 text-[14px] text-[#99A0AE] dark:text-gray-500"> <div className="min-w-0 text-[14px] text-[#99A0AE] dark:text-gray-500">
{t('settings.account.passwordHelp', { time: LAST_LOGIN_TIME })} {t('settings.account.passwordHelp', { time: LAST_LOGIN_TIME })}
</div> </div>
<div className="flex shrink-0 items-center rounded-[6px] border border-[#E5E8EE] px-[6px] py-[4px] dark:border-gray-700"> <div className="flex shrink-0 items-center rounded-md border border-[#E5E8EE] px-1.5 py-1 dark:border-gray-700">
<CheckCircle className="h-[16px] w-[16px] text-[#1FC16B]" /> <CheckCircle className="h-4 w-4 text-[#1FC16B]" />
<span className="ml-[2px] whitespace-nowrap text-[12px] text-[#525866] dark:text-gray-400"> <span className="ml-0.5 whitespace-nowrap text-[12px] text-[#525866] dark:text-gray-400">
{t('settings.account.configured')} {t('settings.account.configured')}
</span> </span>
</div> </div>

6
src/pages/Setting/components/SettingMenu.tsx
View File

@@ -43,16 +43,16 @@ export default function SettingMenu({ currentView, onChange }: SettingMenuProps)
type="button" type="button"
onClick={() => onChange(id)} onClick={() => onChange(id)}
className={[ className={[
'box-border flex cursor-pointer items-center rounded-[6px] px-[12px] py-[10px] transition-colors', 'box-border flex cursor-pointer items-center rounded-md px-3 py-2.5 transition-colors',
active ? 'bg-[#EFF6FF] dark:bg-[#222225]' : 'hover:bg-[#EFF6FF] dark:hover:bg-[#222225]', active ? 'bg-[#EFF6FF] dark:bg-[#222225]' : 'hover:bg-[#EFF6FF] dark:hover:bg-[#222225]',
].join(' ')} ].join(' ')}
> >
<Icon <Icon
className="h-[20px] w-[20px]" className="h-5 w-5"
style={{ color: active ? '#2B7FFF' : '#525866' }} style={{ color: active ? '#2B7FFF' : '#525866' }}
/> />
<span <span
className="box-border px-[8px] text-[14px] font-medium dark:text-gray-300" className="box-border px-2 text-[14px] font-medium dark:text-gray-300"
style={{ color: active ? '#2B7FFF' : '#525866' }} style={{ color: active ? '#2B7FFF' : '#525866' }}
> >
{t(labelKey)} {t(labelKey)}