Commit 69996bfc authored by Andy-bubu's avatar Andy-bubu

登录设计skill同步

parent ca178639
...@@ -153,13 +153,13 @@ ...@@ -153,13 +153,13 @@
var(--surface) var(--surface)
); );
--rc-modal-radius: 1.5rem; --rc-modal-radius: 1.5rem;
--rc-modal-padding: 1.5rem; --rc-modal-padding: 1.75rem;
--rc-modal-title-size: var(--rc-text-md); --rc-modal-title-size: var(--rc-text-md);
--rc-modal-title-weight: var(--rc-font-medium); --rc-modal-title-weight: var(--rc-font-medium);
--rc-modal-title-line-height: 1.5rem; --rc-modal-title-line-height: 1.5rem;
--rc-modal-section-gap: 0.5rem; --rc-modal-section-gap: 0.75rem;
--rc-modal-footer-gap: 0.5rem; --rc-modal-footer-gap: 0.5rem;
--rc-modal-footer-margin: 1.25rem; --rc-modal-footer-margin: 1.5rem;
--rc-modal-backdrop-blur: 0.75rem; --rc-modal-backdrop-blur: 0.75rem;
--rc-modal-close-size: 1.5rem; --rc-modal-close-size: 1.5rem;
--rc-modal-close-inset: var(--rc-modal-padding); --rc-modal-close-inset: var(--rc-modal-padding);
...@@ -171,8 +171,8 @@ ...@@ -171,8 +171,8 @@
--rc-modal-width-xl: 46rem; --rc-modal-width-xl: 46rem;
--rc-modal-width-2xl: 52.5rem; --rc-modal-width-2xl: 52.5rem;
--rc-modal-width-3xl: 60rem; --rc-modal-width-3xl: 60rem;
--rc-modal-width-4xl: 64rem; --rc-modal-width-4xl: 68rem;
--rc-modal-width-5xl: 70rem; --rc-modal-width-5xl: 76rem;
--rc-data-grid-action-size: 2rem; --rc-data-grid-action-size: 2rem;
--rc-data-grid-action-radius: 999px; --rc-data-grid-action-radius: 999px;
--rc-list-pagination-gap: 0.5rem; --rc-list-pagination-gap: 0.5rem;
......
...@@ -3668,7 +3668,15 @@ body { ...@@ -3668,7 +3668,15 @@ body {
body .login-page { body .login-page {
--rc-login-brand-logo-size: 2.25rem; --rc-login-brand-logo-size: 2.25rem;
--rc-login-card-brand-gap: 0.875rem;
--rc-login-card-brand-margin-bottom: 2rem;
--rc-login-card-brand-title-size: 2rem;
--rc-login-panel-width: 28rem;
--rc-login-control-height: 2.5rem; --rc-login-control-height: 2.5rem;
--rc-login-captcha-gap: 0.75rem;
--rc-login-captcha-image-max-height: 1.875rem;
--rc-login-submit-height: 2.875rem;
--rc-login-submit-margin-top: 0.875rem;
--rc-login-field-filled-background: #fbf1f1; --rc-login-field-filled-background: #fbf1f1;
--rc-login-field-filled-background-hover: #faeaea; --rc-login-field-filled-background-hover: #faeaea;
--rc-login-field-autofill-background: #fbf1f1; --rc-login-field-autofill-background: #fbf1f1;
...@@ -3681,12 +3689,28 @@ body .login-brand img { ...@@ -3681,12 +3689,28 @@ body .login-brand img {
height: var(--rc-login-brand-logo-size) !important; height: var(--rc-login-brand-logo-size) !important;
} }
body .login-card-brand {
justify-content: center;
gap: var(--rc-login-card-brand-gap) !important;
margin-bottom: var(--rc-login-card-brand-margin-bottom);
text-align: center;
}
body .login-card-brand strong {
color: var(--rc-text-primary);
font-size: var(--rc-login-card-brand-title-size);
font-weight: 650;
line-height: 1.15;
letter-spacing: 0;
white-space: nowrap;
}
body .login-card [data-slot='card-header'] { body .login-card [data-slot='card-header'] {
display: none !important; display: none !important;
} }
body .login-card [data-slot='card-content'] { body .login-card [data-slot='card-content'] {
padding-top: 1.75rem !important; padding: 2.25rem !important;
} }
body body
...@@ -3927,24 +3951,62 @@ body ...@@ -3927,24 +3951,62 @@ body
} }
body .login-captcha-row { body .login-captcha-row {
grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
align-items: stretch; align-items: stretch;
gap: var(--rc-login-captcha-gap) !important;
width: 100%;
min-width: 0;
} }
body body
.login-captcha-row .login-captcha-row
:is(.login-field, .login-input, .input, [data-slot='input']) { :is(.login-field, .login-input, .input, [data-slot='input']) {
min-width: 0;
height: var(--rc-login-control-height) !important; height: var(--rc-login-control-height) !important;
min-height: var(--rc-login-control-height) !important; min-height: var(--rc-login-control-height) !important;
} }
body .login-captcha-button { body .login-captcha-button {
display: inline-flex !important;
width: 100% !important;
min-width: 0 !important;
height: var(--rc-login-control-height) !important; height: var(--rc-login-control-height) !important;
min-height: var(--rc-login-control-height) !important; min-height: var(--rc-login-control-height) !important;
align-items: center !important;
justify-content: center !important;
padding: 0.25rem 0.5rem !important;
border-radius: var(--field-radius, calc(var(--radius) * 1.5)) !important; border-radius: var(--field-radius, calc(var(--radius) * 1.5)) !important;
} }
body .login-captcha-button :is(.captcha-image, .captcha-image svg) { body .login-captcha-button > :is(span, div, [data-slot='content']) {
max-height: calc(var(--rc-login-control-height) - 1rem) !important; display: inline-flex !important;
width: 100% !important;
height: 100% !important;
align-items: center !important;
justify-content: center !important;
}
body .login-captcha-button .captcha-image {
display: inline-flex !important;
width: 100% !important;
height: 100% !important;
align-items: center !important;
justify-content: center !important;
}
body .login-captcha-button :is(.captcha-image svg, .captcha-image img) {
display: block !important;
width: auto !important;
max-width: 100% !important;
height: var(--rc-login-captcha-image-max-height) !important;
max-height: var(--rc-login-captcha-image-max-height) !important;
}
body .login-submit-button {
height: var(--rc-login-submit-height) !important;
min-height: var(--rc-login-submit-height) !important;
margin-top: var(--rc-login-submit-margin-top) !important;
border-radius: var(--rc-button-radius, 999px) !important;
} }
.dark .login-page, .dark .login-page,
......
...@@ -339,8 +339,9 @@ a { ...@@ -339,8 +339,9 @@ a {
border: 1px solid var(--rc-border-default); border: 1px solid var(--rc-border-default);
background: var(--rc-bg-subtle); background: var(--rc-bg-subtle);
color: var(--rc-text-secondary); color: var(--rc-text-secondary);
padding: 12px 16px; padding: 14px 18px;
font-size: 14px; font-size: 14px;
line-height: 22px;
} }
.rc-notice--info { .rc-notice--info {
...@@ -444,7 +445,7 @@ a { ...@@ -444,7 +445,7 @@ a {
border-radius: var(--rc-radius-container); border-radius: var(--rc-radius-container);
border: 1px solid var(--rc-border-default); border: 1px solid var(--rc-border-default);
background: var(--rc-bg-surface); background: var(--rc-bg-surface);
padding: 16px; padding: 18px;
} }
.rc-form-section__title { .rc-form-section__title {
...@@ -456,7 +457,25 @@ a { ...@@ -456,7 +457,25 @@ a {
} }
.rc-form-section > div:last-child { .rc-form-section > div:last-child {
margin-top: 16px; margin-top: 18px;
}
.rc-modal-check-card {
min-height: 76px;
padding: 14px 16px;
}
.rc-modal-check-card [data-slot='description'] {
margin-top: 2px;
font-size: 13px;
line-height: 18px;
}
.rc-modal-field-group {
border-radius: var(--rc-radius-container);
border: 1px solid var(--rc-border-default);
background: var(--rc-bg-surface);
padding: 16px;
} }
.rc-textarea-single-surface::before, .rc-textarea-single-surface::before,
...@@ -513,13 +532,13 @@ a { ...@@ -513,13 +532,13 @@ a {
} }
.rc-material-detail-body { .rc-material-detail-body {
margin-top: 16px; margin-top: 18px;
} }
.rc-material-detail-content { .rc-material-detail-content {
display: grid; display: grid;
min-height: 0; min-height: 0;
gap: 14px; gap: 18px;
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
...@@ -527,19 +546,19 @@ a { ...@@ -527,19 +546,19 @@ a {
display: grid; display: grid;
min-width: 0; min-width: 0;
align-items: center; align-items: center;
gap: 12px; gap: 16px;
grid-template-columns: minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr) auto;
border-radius: var(--rc-radius-container); border-radius: var(--rc-radius-container);
border: 1px solid var(--rc-border-default); border: 1px solid var(--rc-border-default);
background: var(--rc-bg-surface); background: var(--rc-bg-surface);
padding: 14px 16px; padding: 18px 20px;
} }
.rc-material-detail-summary__main { .rc-material-detail-summary__main {
display: grid; display: grid;
min-width: 0; min-width: 0;
align-items: center; align-items: center;
gap: 10px; gap: 12px;
grid-template-columns: minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr) auto;
} }
...@@ -551,7 +570,7 @@ a { ...@@ -551,7 +570,7 @@ a {
min-width: 0; min-width: 0;
overflow: hidden; overflow: hidden;
color: var(--rc-text-primary); color: var(--rc-text-primary);
font-size: 15px; font-size: 16px;
font-weight: 550; font-weight: 550;
line-height: 22px; line-height: 22px;
text-overflow: ellipsis; text-overflow: ellipsis;
...@@ -563,7 +582,7 @@ a { ...@@ -563,7 +582,7 @@ a {
min-width: 0; min-width: 0;
flex-wrap: wrap; flex-wrap: wrap;
gap: 4px 12px; gap: 4px 12px;
margin-top: 4px; margin-top: 6px;
color: var(--rc-text-muted); color: var(--rc-text-muted);
font-size: 13px; font-size: 13px;
line-height: 18px; line-height: 18px;
...@@ -594,7 +613,7 @@ a { ...@@ -594,7 +613,7 @@ a {
display: grid; display: grid;
min-width: 0; min-width: 0;
align-content: start; align-content: start;
gap: 12px; gap: 16px;
} }
.rc-material-detail-check-card { .rc-material-detail-check-card {
......
...@@ -80,13 +80,13 @@ export default function LoginPage() { ...@@ -80,13 +80,13 @@ export default function LoginPage() {
return ( return (
<main className="login-page"> <main className="login-page">
<section className="login-shell"> <section className="login-shell">
<div className="login-brand">
<img alt="鑫元基金" src={xinyuanLogoRed} />
<strong>{appTitle}</strong>
</div>
<Card className="login-card"> <Card className="login-card">
<Card.Content> <Card.Content>
<div className="login-brand login-card-brand">
<img alt="鑫元基金" src={xinyuanLogoRed} />
<strong>{appTitle}</strong>
</div>
<form className="login-form" onSubmit={handleSubmit}> <form className="login-form" onSubmit={handleSubmit}>
<TextField <TextField
className="login-field" className="login-field"
...@@ -130,9 +130,9 @@ export default function LoginPage() { ...@@ -130,9 +130,9 @@ export default function LoginPage() {
<div className="login-captcha-field grid gap-2"> <div className="login-captcha-field grid gap-2">
<Label>验证码</Label> <Label>验证码</Label>
<div className="login-captcha-row flex gap-3"> <div className="login-captcha-row grid gap-3">
<TextField <TextField
className="login-field min-w-0 flex-1" className="login-field min-w-0"
data-has-value={captchaCode ? 'true' : undefined} data-has-value={captchaCode ? 'true' : undefined}
isDisabled={loading} isDisabled={loading}
isRequired isRequired
...@@ -154,7 +154,7 @@ export default function LoginPage() { ...@@ -154,7 +154,7 @@ export default function LoginPage() {
setError(''); setError('');
refreshCaptcha(); refreshCaptcha();
}} }}
className="login-captcha-button w-28 shrink-0 overflow-hidden px-2 sm:w-[9.25rem] [&_.captcha-image_svg]:h-auto [&_.captcha-image_svg]:max-w-full" className="login-captcha-button overflow-hidden"
> >
{captchaData?.image ? ( {captchaData?.image ? (
<span <span
...@@ -178,6 +178,7 @@ export default function LoginPage() { ...@@ -178,6 +178,7 @@ export default function LoginPage() {
<Button <Button
fullWidth fullWidth
className="login-submit-button"
isDisabled={loading || captchaLoading} isDisabled={loading || captchaLoading}
isPending={loading} isPending={loading}
type="submit" type="submit"
......
...@@ -30,7 +30,6 @@ import { Textarea } from '@/catalyst-ui-kit/javascript/textarea'; ...@@ -30,7 +30,6 @@ import { Textarea } from '@/catalyst-ui-kit/javascript/textarea';
import { UserContext } from '@/wrapper/Auth'; import { UserContext } from '@/wrapper/Auth';
import { import {
ArrowPathIcon, ArrowPathIcon,
ArrowUpTrayIcon,
ArrowTopRightOnSquareIcon, ArrowTopRightOnSquareIcon,
ChevronDownIcon, ChevronDownIcon,
ClipboardDocumentIcon, ClipboardDocumentIcon,
...@@ -1268,7 +1267,7 @@ export default function ResourceBookingPage() { ...@@ -1268,7 +1267,7 @@ export default function ResourceBookingPage() {
) : null} ) : null}
{!error && notice ? ( {!error && notice ? (
<div className="mt-4 rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700"> <div className="rc-notice rc-notice--success mt-4">
{notice} {notice}
</div> </div>
) : null} ) : null}
...@@ -1455,7 +1454,7 @@ export default function ResourceBookingPage() { ...@@ -1455,7 +1454,7 @@ export default function ResourceBookingPage() {
</Panel> </Panel>
{loading ? ( {loading ? (
<Panel className="p-6 text-sm text-sky-700">正在加载材料归档工作台...</Panel> <Panel className="p-6 text-sm text-[var(--rc-brand-primary)]">正在加载材料归档工作台...</Panel>
) : ( ) : (
<div className="space-y-4"> <div className="space-y-4">
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"> <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
...@@ -1608,7 +1607,7 @@ export default function ResourceBookingPage() { ...@@ -1608,7 +1607,7 @@ export default function ResourceBookingPage() {
<Dialog <Dialog
open={isDetailOpen} open={isDetailOpen}
onClose={handleCloseDetail} onClose={handleCloseDetail}
size="3xl" size="4xl"
> >
<div className="rc-material-detail-modal"> <div className="rc-material-detail-modal">
<div className="rc-material-detail-header"> <div className="rc-material-detail-header">
...@@ -1921,7 +1920,7 @@ export default function ResourceBookingPage() { ...@@ -1921,7 +1920,7 @@ export default function ResourceBookingPage() {
} }
setIsBatchEditOpen(false); setIsBatchEditOpen(false);
}} }}
size="3xl" size="4xl"
> >
<DialogTitle>批量修改材料</DialogTitle> <DialogTitle>批量修改材料</DialogTitle>
<DialogDescription> <DialogDescription>
...@@ -1929,7 +1928,7 @@ export default function ResourceBookingPage() { ...@@ -1929,7 +1928,7 @@ export default function ResourceBookingPage() {
</DialogDescription> </DialogDescription>
<DialogBody> <DialogBody>
<div className="space-y-6"> <div className="space-y-6">
<div className="rounded-[24px] border border-sky-100 bg-sky-50 px-4 py-3 text-sm text-sky-700"> <div className="rc-notice rc-notice--info">
当前共选中 {selectedCount} 份材料,批量修改会同步更新你勾选的字段。 当前共选中 {selectedCount} 份材料,批量修改会同步更新你勾选的字段。
</div> </div>
...@@ -1938,9 +1937,8 @@ export default function ResourceBookingPage() { ...@@ -1938,9 +1937,8 @@ export default function ResourceBookingPage() {
description="先勾选要更新的字段,再填写统一值,避免误把空值覆盖到所有材料。" description="先勾选要更新的字段,再填写统一值,避免误把空值覆盖到所有材料。"
> >
<div className="grid gap-4 sm:grid-cols-2"> <div className="grid gap-4 sm:grid-cols-2">
<CheckboxField className="rounded-2xl border border-zinc-200 bg-white px-4 py-3"> <CheckboxField className="rc-check-card rc-modal-check-card">
<Checkbox <Checkbox
color="sky"
checked={batchEditFields.archiveYear} checked={batchEditFields.archiveYear}
onChange={(checked) => onChange={(checked) =>
setBatchEditFields((prev) => ({ setBatchEditFields((prev) => ({
...@@ -1950,10 +1948,10 @@ export default function ResourceBookingPage() { ...@@ -1950,10 +1948,10 @@ export default function ResourceBookingPage() {
} }
/> />
<div> <div>
<div data-slot="label" className="text-sm font-medium text-zinc-900"> <div data-slot="label" className="text-sm font-medium text-[var(--rc-text-primary)]">
批量更新所属周期/年份 批量更新所属周期/年份
</div> </div>
<div data-slot="description" className="text-sm text-zinc-500"> <div data-slot="description" className="text-sm text-[var(--rc-text-muted)]">
勾选后可统一覆盖所有已选材料的年度归属。 勾选后可统一覆盖所有已选材料的年度归属。
</div> </div>
</div> </div>
...@@ -1972,9 +1970,8 @@ export default function ResourceBookingPage() { ...@@ -1972,9 +1970,8 @@ export default function ResourceBookingPage() {
/> />
</div> </div>
<CheckboxField className="rounded-2xl border border-zinc-200 bg-white px-4 py-3"> <CheckboxField className="rc-check-card rc-modal-check-card">
<Checkbox <Checkbox
color="sky"
checked={batchEditFields.sourceApp} checked={batchEditFields.sourceApp}
onChange={(checked) => onChange={(checked) =>
setBatchEditFields((prev) => ({ setBatchEditFields((prev) => ({
...@@ -1984,10 +1981,10 @@ export default function ResourceBookingPage() { ...@@ -1984,10 +1981,10 @@ export default function ResourceBookingPage() {
} }
/> />
<div> <div>
<div data-slot="label" className="text-sm font-medium text-zinc-900"> <div data-slot="label" className="text-sm font-medium text-[var(--rc-text-primary)]">
批量更新来源应用 批量更新来源应用
</div> </div>
<div data-slot="description" className="text-sm text-zinc-500"> <div data-slot="description" className="text-sm text-[var(--rc-text-muted)]">
勾选后可统一覆盖所有已选材料的来源应用。 勾选后可统一覆盖所有已选材料的来源应用。
</div> </div>
</div> </div>
...@@ -2009,9 +2006,8 @@ export default function ResourceBookingPage() { ...@@ -2009,9 +2006,8 @@ export default function ResourceBookingPage() {
/> />
</div> </div>
<CheckboxField className="rounded-2xl border border-zinc-200 bg-white px-4 py-3"> <CheckboxField className="rc-check-card rc-modal-check-card">
<Checkbox <Checkbox
color="sky"
checked={batchEditFields.sourceSystem} checked={batchEditFields.sourceSystem}
onChange={(checked) => onChange={(checked) =>
setBatchEditFields((prev) => ({ setBatchEditFields((prev) => ({
...@@ -2021,10 +2017,10 @@ export default function ResourceBookingPage() { ...@@ -2021,10 +2017,10 @@ export default function ResourceBookingPage() {
} }
/> />
<div> <div>
<div data-slot="label" className="text-sm font-medium text-zinc-900"> <div data-slot="label" className="text-sm font-medium text-[var(--rc-text-primary)]">
批量更新来源系统 批量更新来源系统
</div> </div>
<div data-slot="description" className="text-sm text-zinc-500"> <div data-slot="description" className="text-sm text-[var(--rc-text-muted)]">
勾选后可统一覆盖所有已选材料的来源系统。 勾选后可统一覆盖所有已选材料的来源系统。
</div> </div>
</div> </div>
...@@ -2048,9 +2044,8 @@ export default function ResourceBookingPage() { ...@@ -2048,9 +2044,8 @@ export default function ResourceBookingPage() {
/> />
</div> </div>
<CheckboxField className="rounded-2xl border border-zinc-200 bg-white px-4 py-3"> <CheckboxField className="rc-check-card rc-modal-check-card">
<Checkbox <Checkbox
color="sky"
checked={batchEditFields.archiveCategory} checked={batchEditFields.archiveCategory}
onChange={(checked) => onChange={(checked) =>
setBatchEditFields((prev) => ({ setBatchEditFields((prev) => ({
...@@ -2060,10 +2055,10 @@ export default function ResourceBookingPage() { ...@@ -2060,10 +2055,10 @@ export default function ResourceBookingPage() {
} }
/> />
<div> <div>
<div data-slot="label" className="text-sm font-medium text-zinc-900"> <div data-slot="label" className="text-sm font-medium text-[var(--rc-text-primary)]">
批量更新材料分类 批量更新材料分类
</div> </div>
<div data-slot="description" className="text-sm text-zinc-500"> <div data-slot="description" className="text-sm text-[var(--rc-text-muted)]">
勾选后可统一覆盖所有已选材料的材料分类。 勾选后可统一覆盖所有已选材料的材料分类。
</div> </div>
</div> </div>
...@@ -2087,9 +2082,8 @@ export default function ResourceBookingPage() { ...@@ -2087,9 +2082,8 @@ export default function ResourceBookingPage() {
/> />
</div> </div>
<CheckboxField className="rounded-2xl border border-zinc-200 bg-white px-4 py-3"> <CheckboxField className="rc-check-card rc-modal-check-card">
<Checkbox <Checkbox
color="sky"
checked={batchEditFields.provideDepartment} checked={batchEditFields.provideDepartment}
onChange={(checked) => onChange={(checked) =>
setBatchEditFields((prev) => ({ setBatchEditFields((prev) => ({
...@@ -2099,10 +2093,10 @@ export default function ResourceBookingPage() { ...@@ -2099,10 +2093,10 @@ export default function ResourceBookingPage() {
} }
/> />
<div> <div>
<div data-slot="label" className="text-sm font-medium text-zinc-900"> <div data-slot="label" className="text-sm font-medium text-[var(--rc-text-primary)]">
批量更新提供部门 批量更新提供部门
</div> </div>
<div data-slot="description" className="text-sm text-zinc-500"> <div data-slot="description" className="text-sm text-[var(--rc-text-muted)]">
勾选后可统一覆盖所有已选材料的提供部门。 勾选后可统一覆盖所有已选材料的提供部门。
</div> </div>
</div> </div>
...@@ -2121,9 +2115,8 @@ export default function ResourceBookingPage() { ...@@ -2121,9 +2115,8 @@ export default function ResourceBookingPage() {
/> />
</div> </div>
<CheckboxField className="rounded-2xl border border-zinc-200 bg-white px-4 py-3"> <CheckboxField className="rc-check-card rc-modal-check-card">
<Checkbox <Checkbox
color="sky"
checked={batchEditFields.provideTime} checked={batchEditFields.provideTime}
onChange={(checked) => onChange={(checked) =>
setBatchEditFields((prev) => ({ setBatchEditFields((prev) => ({
...@@ -2133,10 +2126,10 @@ export default function ResourceBookingPage() { ...@@ -2133,10 +2126,10 @@ export default function ResourceBookingPage() {
} }
/> />
<div> <div>
<div data-slot="label" className="text-sm font-medium text-zinc-900"> <div data-slot="label" className="text-sm font-medium text-[var(--rc-text-primary)]">
批量更新提供时间 批量更新提供时间
</div> </div>
<div data-slot="description" className="text-sm text-zinc-500"> <div data-slot="description" className="text-sm text-[var(--rc-text-muted)]">
保存后会自动转换为标准时间格式。 保存后会自动转换为标准时间格式。
</div> </div>
</div> </div>
...@@ -2162,10 +2155,9 @@ export default function ResourceBookingPage() { ...@@ -2162,10 +2155,9 @@ export default function ResourceBookingPage() {
description="布尔字段也按“先选择,再覆盖”的方式批量修改。" description="布尔字段也按“先选择,再覆盖”的方式批量修改。"
> >
<div className="grid gap-4 sm:grid-cols-2"> <div className="grid gap-4 sm:grid-cols-2">
<div className="space-y-3 rounded-[24px] border border-zinc-200 bg-white p-4"> <div className="rc-modal-field-group space-y-3">
<CheckboxField> <CheckboxField>
<Checkbox <Checkbox
color="sky"
checked={batchEditFields.isConfidential} checked={batchEditFields.isConfidential}
onChange={(checked) => onChange={(checked) =>
setBatchEditFields((prev) => ({ setBatchEditFields((prev) => ({
...@@ -2175,17 +2167,16 @@ export default function ResourceBookingPage() { ...@@ -2175,17 +2167,16 @@ export default function ResourceBookingPage() {
} }
/> />
<div> <div>
<div data-slot="label" className="text-sm font-medium text-zinc-900"> <div data-slot="label" className="text-sm font-medium text-[var(--rc-text-primary)]">
批量更新是否涉密 批量更新是否涉密
</div> </div>
<div data-slot="description" className="text-sm text-zinc-500"> <div data-slot="description" className="text-sm text-[var(--rc-text-muted)]">
勾选后,会将下面的值统一应用到所有已选材料。 勾选后,会将下面的值统一应用到所有已选材料。
</div> </div>
</div> </div>
</CheckboxField> </CheckboxField>
<CheckboxField> <CheckboxField>
<Checkbox <Checkbox
color="sky"
checked={batchEditForm.isConfidential} checked={batchEditForm.isConfidential}
onChange={(checked) => onChange={(checked) =>
setBatchEditForm((prev) => ({ setBatchEditForm((prev) => ({
...@@ -2195,17 +2186,16 @@ export default function ResourceBookingPage() { ...@@ -2195,17 +2186,16 @@ export default function ResourceBookingPage() {
} }
/> />
<div> <div>
<div data-slot="label" className="text-sm font-medium text-zinc-900"> <div data-slot="label" className="text-sm font-medium text-[var(--rc-text-primary)]">
目标值:涉密 目标值:涉密
</div> </div>
</div> </div>
</CheckboxField> </CheckboxField>
</div> </div>
<div className="space-y-3 rounded-[24px] border border-zinc-200 bg-white p-4"> <div className="rc-modal-field-group space-y-3">
<CheckboxField> <CheckboxField>
<Checkbox <Checkbox
color="sky"
checked={batchEditFields.isAuditDeptMaterial} checked={batchEditFields.isAuditDeptMaterial}
onChange={(checked) => onChange={(checked) =>
setBatchEditFields((prev) => ({ setBatchEditFields((prev) => ({
...@@ -2215,17 +2205,16 @@ export default function ResourceBookingPage() { ...@@ -2215,17 +2205,16 @@ export default function ResourceBookingPage() {
} }
/> />
<div> <div>
<div data-slot="label" className="text-sm font-medium text-zinc-900"> <div data-slot="label" className="text-sm font-medium text-[var(--rc-text-primary)]">
批量更新是否审计部材料 批量更新是否审计部材料
</div> </div>
<div data-slot="description" className="text-sm text-zinc-500"> <div data-slot="description" className="text-sm text-[var(--rc-text-muted)]">
勾选后,会将下面的值统一应用到所有已选材料。 勾选后,会将下面的值统一应用到所有已选材料。
</div> </div>
</div> </div>
</CheckboxField> </CheckboxField>
<CheckboxField> <CheckboxField>
<Checkbox <Checkbox
color="sky"
checked={batchEditForm.isAuditDeptMaterial} checked={batchEditForm.isAuditDeptMaterial}
onChange={(checked) => onChange={(checked) =>
setBatchEditForm((prev) => ({ setBatchEditForm((prev) => ({
...@@ -2235,7 +2224,7 @@ export default function ResourceBookingPage() { ...@@ -2235,7 +2224,7 @@ export default function ResourceBookingPage() {
} }
/> />
<div> <div>
<div data-slot="label" className="text-sm font-medium text-zinc-900"> <div data-slot="label" className="text-sm font-medium text-[var(--rc-text-primary)]">
目标值:审计部材料 目标值:审计部材料
</div> </div>
</div> </div>
...@@ -2273,7 +2262,7 @@ export default function ResourceBookingPage() { ...@@ -2273,7 +2262,7 @@ export default function ResourceBookingPage() {
} }
setIsBatchTagOpen(false); setIsBatchTagOpen(false);
}} }}
size="2xl" size="3xl"
> >
<DialogTitle>批量打标签</DialogTitle> <DialogTitle>批量打标签</DialogTitle>
<DialogDescription> <DialogDescription>
...@@ -2281,7 +2270,7 @@ export default function ResourceBookingPage() { ...@@ -2281,7 +2270,7 @@ export default function ResourceBookingPage() {
</DialogDescription> </DialogDescription>
<DialogBody> <DialogBody>
<div className="space-y-5"> <div className="space-y-5">
<div className="rounded-[24px] border border-emerald-100 bg-emerald-50 px-4 py-3 text-sm text-emerald-700"> <div className="rc-notice rc-notice--info">
当前共选中 {selectedCount} 份材料。标签允许自由输入,但建议保持同一批次命名一致。 当前共选中 {selectedCount} 份材料。标签允许自由输入,但建议保持同一批次命名一致。
</div> </div>
<div> <div>
...@@ -2318,7 +2307,7 @@ export default function ResourceBookingPage() { ...@@ -2318,7 +2307,7 @@ export default function ResourceBookingPage() {
</DialogActions> </DialogActions>
</Dialog> </Dialog>
<Dialog open={isUploadOpen} onClose={handleUploadDialogClose} size="3xl"> <Dialog open={isUploadOpen} onClose={handleUploadDialogClose} size="4xl">
<DialogTitle>上传材料</DialogTitle> <DialogTitle>上传材料</DialogTitle>
<DialogDescription> <DialogDescription>
创建页已按最新对象文档补齐字段,上传完成后会统一保存到材料档案。 创建页已按最新对象文档补齐字段,上传完成后会统一保存到材料档案。
...@@ -2329,7 +2318,7 @@ export default function ResourceBookingPage() { ...@@ -2329,7 +2318,7 @@ export default function ResourceBookingPage() {
title="上传文件" title="上传文件"
description="先完成文件选择,系统会自动尝试用文件名回填材料标题。" description="先完成文件选择,系统会自动尝试用文件名回填材料标题。"
> >
<div className="rounded-[28px] border border-dashed border-sky-200 bg-sky-50/60 p-5"> <div className="rc-upload-dropzone">
<input <input
ref={fileInputRef} ref={fileInputRef}
type="file" type="file"
...@@ -2358,10 +2347,10 @@ export default function ResourceBookingPage() { ...@@ -2358,10 +2347,10 @@ export default function ResourceBookingPage() {
/> />
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"> <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div> <div>
<div className="text-sm font-semibold text-zinc-900"> <div className="text-sm font-semibold text-[var(--rc-text-primary)]">
{selectedFile ? selectedFile.name : '还没有选择文件'} {selectedFile ? selectedFile.name : '还没有选择文件'}
</div> </div>
<div className="mt-1 text-sm text-zinc-500"> <div className="mt-1 text-sm text-[var(--rc-text-muted)]">
{selectedFile {selectedFile
? `${formatFileSize(selectedFile.size)} · ${ ? `${formatFileSize(selectedFile.size)} · ${
selectedFile.type || '未知类型' selectedFile.type || '未知类型'
...@@ -2369,17 +2358,17 @@ export default function ResourceBookingPage() { ...@@ -2369,17 +2358,17 @@ export default function ResourceBookingPage() {
: '支持上传图片、PDF、Office 文档,以及 ZIP 压缩包'} : '支持上传图片、PDF、Office 文档,以及 ZIP 压缩包'}
</div> </div>
</div> </div>
<button <Button
outline
type="button" type="button"
onClick={() => fileInputRef.current?.click()} onClick={() => fileInputRef.current?.click()}
className="inline-flex items-center justify-center rounded-full border border-sky-200 bg-white px-4 py-2 text-sm font-medium text-sky-700 shadow-sm transition hover:border-sky-300 hover:bg-sky-50" className="cursor-pointer"
> >
<ArrowUpTrayIcon className="mr-2 size-4" />
选择文件 选择文件
</button> </Button>
</div> </div>
{selectedFileIsZip ? ( {selectedFileIsZip ? (
<div className="mt-4 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800"> <div className="rc-notice rc-notice--warning mt-4">
当前选择的是压缩包,可按场景选择“整包上传”或“解压后逐文件上传”。 当前选择的是压缩包,可按场景选择“整包上传”或“解压后逐文件上传”。
</div> </div>
) : null} ) : null}
...@@ -2403,14 +2392,14 @@ export default function ResourceBookingPage() { ...@@ -2403,14 +2392,14 @@ export default function ResourceBookingPage() {
})) }))
} }
className={clsx( className={clsx(
'rounded-[24px] border px-5 py-4 text-left transition', 'rc-option-card rc-upload-mode-card',
uploadForm.uploadMode === ARCHIVE_UPLOAD_MODE.ARCHIVE uploadForm.uploadMode === ARCHIVE_UPLOAD_MODE.ARCHIVE
? 'border-sky-300 bg-sky-50 shadow-sm' ? 'rc-option-card--active'
: 'border-zinc-200 bg-white hover:border-zinc-300 hover:bg-zinc-50', : '',
)} )}
> >
<div className="text-sm font-semibold text-zinc-900">整包上传</div> <div className="text-sm font-semibold text-[var(--rc-text-primary)]">整包上传</div>
<div className="mt-1 text-sm leading-6 text-zinc-500"> <div className="mt-1 text-sm leading-6 text-[var(--rc-text-muted)]">
将 ZIP 当成 1 个材料文件归档,材料标题必填,适合保留完整压缩包。 将 ZIP 当成 1 个材料文件归档,材料标题必填,适合保留完整压缩包。
</div> </div>
</button> </button>
...@@ -2423,14 +2412,14 @@ export default function ResourceBookingPage() { ...@@ -2423,14 +2412,14 @@ export default function ResourceBookingPage() {
})) }))
} }
className={clsx( className={clsx(
'rounded-[24px] border px-5 py-4 text-left transition', 'rc-option-card rc-upload-mode-card',
uploadForm.uploadMode === ARCHIVE_UPLOAD_MODE.EXTRACT uploadForm.uploadMode === ARCHIVE_UPLOAD_MODE.EXTRACT
? 'border-sky-300 bg-sky-50 shadow-sm' ? 'rc-option-card--active'
: 'border-zinc-200 bg-white hover:border-zinc-300 hover:bg-zinc-50', : '',
)} )}
> >
<div className="text-sm font-semibold text-zinc-900">解压后逐文件上传</div> <div className="text-sm font-semibold text-[var(--rc-text-primary)]">解压后逐文件上传</div>
<div className="mt-1 text-sm leading-6 text-zinc-500"> <div className="mt-1 text-sm leading-6 text-[var(--rc-text-muted)]">
ZIP 内有几个文件,就创建几条材料记录;材料标题会自动取每个文件名。 ZIP 内有几个文件,就创建几条材料记录;材料标题会自动取每个文件名。
</div> </div>
</button> </button>
...@@ -2596,9 +2585,8 @@ export default function ResourceBookingPage() { ...@@ -2596,9 +2585,8 @@ export default function ResourceBookingPage() {
description="布尔字段统一使用 Checkbox,方便快速录入与后续筛查。" description="布尔字段统一使用 Checkbox,方便快速录入与后续筛查。"
> >
<div className="grid gap-4 sm:grid-cols-2"> <div className="grid gap-4 sm:grid-cols-2">
<CheckboxField className="rounded-2xl border border-zinc-200 bg-white px-4 py-3"> <CheckboxField className="rc-check-card rc-modal-check-card">
<Checkbox <Checkbox
color="sky"
checked={uploadForm.isConfidential} checked={uploadForm.isConfidential}
onChange={(checked) => onChange={(checked) =>
setUploadForm((prev) => ({ setUploadForm((prev) => ({
...@@ -2608,17 +2596,16 @@ export default function ResourceBookingPage() { ...@@ -2608,17 +2596,16 @@ export default function ResourceBookingPage() {
} }
/> />
<div> <div>
<div data-slot="label" className="text-sm font-medium text-zinc-900"> <div data-slot="label" className="text-sm font-medium text-[var(--rc-text-primary)]">
是否涉密 是否涉密
</div> </div>
<div data-slot="description" className="text-sm text-zinc-500"> <div data-slot="description" className="text-sm text-[var(--rc-text-muted)]">
用于标记是否需要更严格的查看与流转控制。 用于标记是否需要更严格的查看与流转控制。
</div> </div>
</div> </div>
</CheckboxField> </CheckboxField>
<CheckboxField className="rounded-2xl border border-zinc-200 bg-white px-4 py-3"> <CheckboxField className="rc-check-card rc-modal-check-card">
<Checkbox <Checkbox
color="sky"
checked={uploadForm.isAuditDeptMaterial} checked={uploadForm.isAuditDeptMaterial}
onChange={(checked) => onChange={(checked) =>
setUploadForm((prev) => ({ setUploadForm((prev) => ({
...@@ -2628,10 +2615,10 @@ export default function ResourceBookingPage() { ...@@ -2628,10 +2615,10 @@ export default function ResourceBookingPage() {
} }
/> />
<div> <div>
<div data-slot="label" className="text-sm font-medium text-zinc-900"> <div data-slot="label" className="text-sm font-medium text-[var(--rc-text-primary)]">
是否审计部材料 是否审计部材料
</div> </div>
<div data-slot="description" className="text-sm text-zinc-500"> <div data-slot="description" className="text-sm text-[var(--rc-text-muted)]">
标记后可区分审计部自产材料与外部提供材料。 标记后可区分审计部自产材料与外部提供材料。
</div> </div>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment