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

style: update UI components to use white background and consistent border radius

Browse Source 
- Change dialog surfaces, drawers, and confirm dialogs from off-white (#F4F3EB) to white background
- Standardize border radius from 3xl/36px to 2xl across multiple components
- Update default setting view from 'account' to 'general' for better user experience
- Adjust input field heights and backgrounds for improved visual consistency
This commit is contained in:
DEV_DSW
2026-04-20 15:01:33 +08:00
parent c9a2f3631e
commit 6b5e84b7d7
17 changed files with 29 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/Agents/components/AddAgentDialog.tsx
View File

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
import AgentsDialogSurface from './AgentsDialogSurface';
const INPUT_CLASS_NAME = [
'h-[88px] w-full rounded-[26px] border border-black/10 bg-[#F8F4EC] px-7',
'h-[44px] w-full rounded-xl border border-black/10 bg-white px-7',
'text-[22px] text-[#171717] outline-none transition-colors placeholder:text-[#9A958C]',
'focus:border-black/20 dark:border-white/10 dark:bg-[#222225] dark:text-[#f3f4f6] dark:placeholder:text-gray-500',
].join(' ');

6
src/pages/Agents/components/AgentSettingsDialog.tsx
View File

@@ -15,7 +15,7 @@ import qqIcon from '../../../assets/channels/qq.svg';
import AgentsConfirmDialog from './AgentsConfirmDialog';
const inputClasses = [
'h-[44px] flex-1 rounded-xl border border-black/10 bg-[#F8F4EC] px-4 text-[14px] text-[#171717]',
'h-[44px] flex-1 rounded-xl border border-black/10 bg-white px-4 text-[14px] text-[#171717]',
'outline-none transition-colors placeholder:text-[#99A0AE] focus:border-black/20',
'disabled:cursor-not-allowed disabled:opacity-65 dark:border-white/10 dark:bg-[#222225] dark:text-[#f3f4f6] dark:placeholder:text-gray-500 dark:focus:border-white/20',
].join(' ');
@@ -318,7 +318,7 @@ function AgentModelDialog({
return (
<>
<div className="fixed inset-0 z-60 flex items-center justify-center bg-black/50 p-4">
<div className="w-full max-w-xl overflow-hidden rounded-3xl bg-[#f3f1e9] shadow-2xl dark:bg-[#1f1f22]">
<div className="w-full max-w-xl overflow-hidden rounded-2xl bg-white shadow-2xl dark:bg-[#1f1f22]">
<div className="flex items-start justify-between gap-4 px-6 pb-2 pt-6">
<div>
<h3
@@ -537,7 +537,7 @@ export default function AgentSettingsDialog({
return (
<>
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
<div className="flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-3xl bg-[#f3f1e9] shadow-2xl dark:bg-[#1f1f22]">
<div className="flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-2xl bg-white shadow-2xl dark:bg-[#1f1f22]">
<div className="flex shrink-0 flex-row items-start justify-between px-6 pb-2 pt-6">
<div>
<h2

2
src/pages/Agents/components/AgentsConfirmDialog.tsx
View File

@@ -32,7 +32,7 @@ export default function AgentsConfirmDialog({
<Dialog.Portal>
<Dialog.Overlay className="fixed inset-0 z-60 bg-black/45 backdrop-blur-[2px]" />
<Dialog.Content
className="fixed left-1/2 top-1/2 z-70 w-[calc(100vw-32px)] max-w-126 -translate-x-1/2 -translate-y-1/2 rounded-3xl bg-[#F4F3EB] p-0 shadow-[0_30px_80px_rgba(15,23,42,0.18)] outline-none dark:bg-[#1f1f22]"
className="fixed left-1/2 top-1/2 z-70 w-[calc(100vw-32px)] max-w-126 -translate-x-1/2 -translate-y-1/2 rounded-2xl bg-white p-0 shadow-[0_30px_80px_rgba(15,23,42,0.18)] outline-none dark:bg-[#1f1f22]"
onEscapeKeyDown={(event) => {
if (busy) {
event.preventDefault();

2
src/pages/Agents/components/AgentsDialogSurface.tsx
View File

@@ -26,7 +26,7 @@ export default function AgentsDialogSurface({
>
<div
className={[
'w-full overflow-hidden rounded-[36px] bg-[#F4F0E8] shadow-[0_30px_80px_rgba(15,23,42,0.18)] dark:bg-[#1f1f22]',
'w-full overflow-hidden rounded-2xl bg-white shadow-[0_30px_80px_rgba(15,23,42,0.18)] dark:bg-[#1f1f22]',
widthClassName,
].join(' ')}
onClick={(event) => event.stopPropagation()}

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

@@ -388,7 +388,7 @@ export default function AgentsPage() {
{feedback ? (
<div
className={[
'rounded-3xl border px-5 py-4 text-[15px]',
'rounded-2xl border px-5 py-4 text-[15px]',
feedback.tone === 'success' ? 'border-emerald-500/25 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300' : '',
feedback.tone === 'error' ? 'border-red-500/25 bg-red-500/10 text-red-700 dark:text-red-300' : '',
feedback.tone === 'info' ? 'border-black/10 bg-white text-[#525866] dark:border-gray-700 dark:bg-[#222225] dark:text-gray-300' : '',
@@ -399,7 +399,7 @@ export default function AgentsPage() {
) : null}
{warning ? (
<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="rounded-2xl 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">
<AlertCircle className="mt-0.5 h-5 w-5 shrink-0" />
<span>{warning}</span>
@@ -408,7 +408,7 @@ export default function AgentsPage() {
) : null}
{error ? (
<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="rounded-2xl 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">
<AlertCircle className="mt-0.5 h-5 w-5 shrink-0" />
<span>{message('agents.errorPrefix', '加载 Agents 失败：{error}', { error })}</span>
@@ -417,7 +417,7 @@ export default function AgentsPage() {
) : null}
{providerError ? (
<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="rounded-2xl 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">
<AlertCircle className="mt-0.5 h-5 w-5 shrink-0" />
<span>{`${message('agents.settings.providerLoadErrorPrefix', '加载 Provider 账号失败：')}${providerError}`}</span>

10
src/pages/Cron/index.tsx
View File

@@ -1097,7 +1097,7 @@ function StatCard({ label, value, tone, icon: Icon }: StatCardProps) {
: 'bg-[#E8E6DE] text-[#7A7668] dark:bg-[#2a2a2d] dark:text-gray-400';
return (
<div className="min-h-[130px] rounded-[24px] border border-transparent bg-[#F4F3EB]/60 p-5 transition-colors hover:bg-[#F4F3EB] dark:border-[#2a2a2d] dark:bg-[#1f1f22] dark:hover:bg-[#222225]">
<div className="min-h-[130px] rounded-[24px] border border-transparent bg-white /60 p-5 transition-colors hover:bg-white dark:border-[#2a2a2d] dark:bg-[#1f1f22] dark:hover:bg-[#222225]">
<div className="flex items-center justify-between">
<div className={cn('flex h-11 w-11 items-center justify-center rounded-full', iconWrapperClass)}>
<Icon className="h-5 w-5" />
@@ -1193,7 +1193,7 @@ function CronJobCard({
<p className="line-clamp-2 text-[13.5px] leading-[1.5] text-[#525866] dark:text-gray-400">{job.message}</p>
</div>
<div className="mb-3 grid gap-2 rounded-2xl bg-[#F4F3EB]/70 px-3.5 py-3 text-[12.5px] dark:bg-[#222225]">
<div className="mb-3 grid gap-2 rounded-2xl bg-white /70 px-3.5 py-3 text-[12.5px] dark:bg-[#222225]">
<div className="flex items-start gap-2 text-[#525866] dark:text-gray-400">
<BotIcon className="mt-0.5 h-3.5 w-3.5 shrink-0 text-[#99A0AE] dark:text-gray-500" />
<span className="min-w-0">
@@ -1548,8 +1548,8 @@ function CronTaskDialog({
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/30 p-4 backdrop-blur-[1px]">
<div className="max-h-[calc(100vh-48px)] w-full max-w-[720px] overflow-hidden rounded-[20px] bg-[#F4F3EB] shadow-[0_25px_50px_-12px_rgba(0,0,0,0.2)] dark:bg-[#1f1f22]">
<div className="flex items-start justify-between border-b border-black/5 bg-[#F4F3EB] px-8 py-6 dark:border-[#2a2a2d] dark:bg-[#1f1f22]">
<div className="max-h-[calc(100vh-48px)] w-full max-w-[720px] overflow-hidden rounded-[20px] bg-white shadow-[0_25px_50px_-12px_rgba(0,0,0,0.2)] dark:bg-[#1f1f22]">
<div className="flex items-start justify-between border-b border-black/5 bg-white px-8 py-6 dark:border-[#2a2a2d] dark:bg-[#1f1f22]">
<div>
<h2
className="mb-2 text-[24px] font-normal tracking-tight text-[#171717] dark:text-[#f3f4f6]"
@@ -2149,7 +2149,7 @@ export default function CronPage() {
</div>
{jobs.length === 0 ? (
<div className="flex flex-col items-center justify-center rounded-3xl border border-transparent bg-[#F4F3EB]/40 py-20 text-[#525866] dark:border-[#2a2a2d] dark:bg-[#1f1f22] dark:text-gray-400">
<div className="flex flex-col items-center justify-center rounded-2xl border border-transparent bg-white /40 py-20 text-[#525866] dark:border-[#2a2a2d] dark:bg-[#1f1f22] dark:text-gray-400">
<ClockIcon className="mb-4 h-10 w-10 opacity-50" />
<h3 className="mb-2 text-lg font-medium text-[#171717] dark:text-[#f3f4f6]">还没有定时任务</h3>
<p className="mb-6 max-w-md text-center text-[14px]">

2
src/pages/Home/components/ConversationDeleteDialog.tsx
View File

@@ -27,7 +27,7 @@ export default function ConversationDeleteDialog({
<Dialog.Portal>
<Dialog.Overlay className="fixed inset-0 z-50 bg-black/45 backdrop-blur-[2px]" />
<Dialog.Content
className="fixed left-1/2 top-1/2 z-60 w-[calc(100vw-32px)] max-w-140 -translate-x-1/2 -translate-y-1/2 rounded-3xl bg-[#F4F3EB] p-0 shadow-[0_30px_80px_rgba(15,23,42,0.18)] outline-none dark:bg-[#1f1f22]"
className="fixed left-1/2 top-1/2 z-60 w-[calc(100vw-32px)] max-w-140 -translate-x-1/2 -translate-y-1/2 rounded-2xl bg-white p-0 shadow-[0_30px_80px_rgba(15,23,42,0.18)] outline-none dark:bg-[#1f1f22]"
onEscapeKeyDown={(event) => {
if (busy) {
event.preventDefault();

2
src/pages/Home/components/DialogSurface.tsx
View File

@@ -24,7 +24,7 @@ export default function DialogSurface({
>
<div
className={[
'w-full rounded-[20px] bg-[#F4F3EB] shadow-[0_25px_50px_-12px_rgba(0,0,0,0.2)] dark:bg-[#1f1f22]',
'w-full rounded-[20px] bg-white shadow-[0_25px_50px_-12px_rgba(0,0,0,0.2)] dark:bg-[#1f1f22]',
widthClassName,
].join(' ')}
onClick={(event) => event.stopPropagation()}

2
src/pages/Knowledge/components/KnowledgeConfirmDialog.tsx
View File

@@ -40,7 +40,7 @@ export default function KnowledgeConfirmDialog({
<Dialog.Portal>
<Dialog.Overlay className="fixed inset-0 z-50 bg-black/45 backdrop-blur-[2px]" />
<Dialog.Content
className="fixed left-1/2 top-1/2 z-60 w-[calc(100vw-32px)] max-w-130 -translate-x-1/2 -translate-y-1/2 rounded-2xl bg-[#F4F3EB] p-0 shadow-[0_30px_80px_rgba(15,23,42,0.18)] outline-none dark:bg-[#1f1f22]"
className="fixed left-1/2 top-1/2 z-60 w-[calc(100vw-32px)] max-w-130 -translate-x-1/2 -translate-y-1/2 rounded-2xl bg-white p-0 shadow-[0_30px_80px_rgba(15,23,42,0.18)] outline-none dark:bg-[#1f1f22]"
onEscapeKeyDown={(event) => {
if (busy) {
event.preventDefault();

4
src/pages/Knowledge/components/KnowledgePageHeader.tsx
View File

@@ -28,11 +28,11 @@ export default function KnowledgePageHeader({
</div>
<div className="grid gap-3 sm:grid-cols-2 md:mt-2 md:min-w-[320px]">
<div className="rounded-3xl bg-[#f4f7fb] px-5 py-4 dark:bg-[#222225]">
<div className="rounded-2xl bg-[#f4f7fb] px-5 py-4 dark:bg-[#222225]">
<div className="text-xs uppercase tracking-[0.18em] text-[#99A0AE] dark:text-gray-500">{documentsLabel}</div>
<div className="mt-3 text-3xl font-semibold text-[#171717] dark:text-[#f3f4f6]">{totalCount}</div>
</div>
<div className="rounded-3xl bg-[#fff7ed] px-5 py-4 dark:bg-[#31251a]">
<div className="rounded-2xl bg-[#fff7ed] px-5 py-4 dark:bg-[#31251a]">
<div className="text-xs uppercase tracking-[0.18em] text-[#6b7280] dark:text-gray-400">{storageLabel}</div>
<div className="mt-3 text-3xl font-semibold text-[#171717] dark:text-[#f3f4f6]">{totalSize}</div>
</div>

2
src/pages/Knowledge/index.tsx
View File

@@ -378,7 +378,7 @@ export default function KnowledgePage() {
) : null}
{loading && docs.length === 0 ? (
<div className="flex min-h-105 items-center justify-center rounded-3xl border border-black/5 bg-[#fcfcfd] dark:border-[#2a2a2d] dark:bg-[#222225]">
<div className="flex min-h-105 items-center justify-center rounded-2xl border border-black/5 bg-[#fcfcfd] dark:border-[#2a2a2d] dark:bg-[#222225]">
<div className="text-center text-[#99A0AE] dark:text-gray-500">{t('knowledge.status.loading')}</div>
</div>
) : docs.length === 0 ? (

2
src/pages/Models/components/DialogSurface.tsx
View File

@@ -28,7 +28,7 @@ export default function DialogSurface({
>
<div
className={[
'w-full rounded-[20px] bg-[#F4F3EB] shadow-[0_25px_50px_-12px_rgba(0,0,0,0.2)] dark:bg-[#1f1f22]',
'w-full rounded-[20px] bg-white shadow-[0_25px_50px_-12px_rgba(0,0,0,0.2)] dark:bg-[#1f1f22]',
widthClassName,
].join(' ')}
onClick={(event) => event.stopPropagation()}

4
src/pages/Models/components/ProviderEditorDialog.tsx
View File

@@ -16,7 +16,7 @@ type ProviderEditorDialogProps = {
};
const FIELD_CLASS_NAME = [
'w-full rounded-[12px] border border-black/10 bg-[#F4F3EB] px-4 py-3 text-[14px] text-[#171717]',
'w-full rounded-[12px] border border-black/10 bg-white px-4 py-3 text-[14px] text-[#171717]',
'outline-none transition-colors placeholder:text-[#99A0AE] focus:border-black/20',
'dark:border-white/10 dark:bg-[#222225] dark:text-[#f3f4f6] dark:placeholder:text-gray-500 dark:focus:border-white/20',
].join(' ');
@@ -66,7 +66,7 @@ export default function ProviderEditorDialog({
>
<div className="space-y-6">
<div className="flex items-center gap-4 rounded-[16px] bg-white p-5 shadow-sm dark:bg-[#1f1f22]">
<div className="flex h-12 w-12 items-center justify-center overflow-hidden rounded-[14px] bg-[#F4F3EB] text-[24px] dark:bg-[#222225]">
<div className="flex h-12 w-12 items-center justify-center overflow-hidden rounded-[14px] bg-white text-[24px] dark:bg-[#222225]">
{provider?.icon || t('models.common.ai')}
</div>

2
src/pages/Scripts/components/ScriptDialogs.tsx
View File

@@ -106,7 +106,7 @@ function ModalFrame({
>
<div
className={[
'max-h-full w-full overflow-hidden rounded-[24px] bg-[#f4f3eb] shadow-[0_24px_80px_rgba(15,23,42,0.18)] dark:bg-[#1f1f22]',
'max-h-full w-full overflow-hidden rounded-[24px] bg-white shadow-[0_24px_80px_rgba(15,23,42,0.18)] dark:bg-[#1f1f22]',
widthClassName,
].join(' ')}
onClick={(event) => event.stopPropagation()}

2
src/pages/Setting/index.tsx
View File

@@ -7,7 +7,7 @@ import SettingMenu, { type SettingView } from './components/SettingMenu';
import { useSettingUpdateState } from './useSettingUpdateState';
export default function SettingPage() {
const [currentView, setCurrentView] = useState<SettingView>('account');
const [currentView, setCurrentView] = useState<SettingView>('general');
const themeMode = useSettingsStore((state) => state.themeMode);
const language = useSettingsStore((state) => state.language);
const updateState = useSettingUpdateState();

2
src/pages/Skills/components/MarketplaceDrawer.tsx
View File

@@ -68,7 +68,7 @@ export default function MarketplaceDrawer({
onClick={onClose}
>
<aside
className="flex h-full w-full max-w-[560px] flex-col bg-[#f3f1e9] shadow-[-18px_0_30px_rgba(15,23,42,0.12)] dark:bg-[#1b1b1d]"
className="flex h-full w-full max-w-[560px] flex-col bg-white shadow-[-18px_0_30px_rgba(15,23,42,0.12)] dark:bg-[#1b1b1d]"
onClick={(event) => event.stopPropagation()}
>
<div className="border-b border-black/10 px-7 py-6 dark:border-gray-700">

4
src/pages/Skills/components/SkillDetailDrawer.tsx
View File

@@ -100,7 +100,7 @@ export default function SkillDetailDrawer({
onClick={onClose}
>
<aside
className="flex h-full w-full max-w-[450px] flex-col bg-[#f3f1e9] shadow-[-18px_0_30px_rgba(15,23,42,0.12)] dark:bg-[#1b1b1d]"
className="flex h-full w-full max-w-[450px] flex-col bg-white shadow-[-18px_0_30px_rgba(15,23,42,0.12)] dark:bg-[#1b1b1d]"
onClick={(event) => event.stopPropagation()}
>
<div className="flex items-center justify-end px-5 pt-5">
@@ -119,7 +119,7 @@ export default function SkillDetailDrawer({
<div className="relative mb-4 flex h-16 w-16 shrink-0 items-center justify-center rounded-full border border-black/5 bg-white text-3xl shadow-sm dark:border-gray-700 dark:bg-[#222225]">
<span className="text-3xl leading-none">{skill.icon || '🔧'}</span>
{skill.isCore ? (
<div className="absolute -bottom-1 -right-1 rounded-full border border-black/5 bg-[#f3f1e9] p-1 shadow-sm dark:border-gray-700 dark:bg-[#1b1b1d]">
<div className="absolute -bottom-1 -right-1 rounded-full border border-black/5 bg-white p-1 shadow-sm dark:border-gray-700 dark:bg-[#1b1b1d]">
<LockIcon className="h-3 w-3 text-[#525866] dark:text-gray-400" />
</div>
) : null}