登录设计skill同步

src/design-system/tokens.css

@@ -153,13 +153,13 @@
     var(--surface)
   );
   --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-weight: var(--rc-font-medium);
   --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-margin: 1.25rem;
+  --rc-modal-footer-margin: 1.5rem;
   --rc-modal-backdrop-blur: 0.75rem;
   --rc-modal-close-size: 1.5rem;
   --rc-modal-close-inset: var(--rc-modal-padding);
@@ -171,8 +171,8 @@
   --rc-modal-width-xl: 46rem;
   --rc-modal-width-2xl: 52.5rem;
   --rc-modal-width-3xl: 60rem;
-  --rc-modal-width-4xl: 64rem;
-  --rc-modal-width-5xl: 70rem;
+  --rc-modal-width-4xl: 68rem;
+  --rc-modal-width-5xl: 76rem;
   --rc-data-grid-action-size: 2rem;
   --rc-data-grid-action-radius: 999px;
   --rc-list-pagination-gap: 0.5rem;

src/design-system/xinyuan-portable.css

@@ -3668,7 +3668,15 @@ body {
 
 body .login-page {
   --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-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-hover: #faeaea;
   --rc-login-field-autofill-background: #fbf1f1;
@@ -3681,12 +3689,28 @@ body .login-brand img {
   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'] {
   display: none !important;
 }
 
 body .login-card [data-slot='card-content'] {
-  padding-top: 1.75rem !important;
+  padding: 2.25rem !important;
 }
 
 body
@@ -3927,24 +3951,62 @@ body
 }
 
 body .login-captcha-row {
+  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
   align-items: stretch;
+  gap: var(--rc-login-captcha-gap) !important;
+  width: 100%;
+  min-width: 0;
 }
 
 body
   .login-captcha-row
   :is(.login-field, .login-input, .input, [data-slot='input']) {
+  min-width: 0;
   height: var(--rc-login-control-height) !important;
   min-height: var(--rc-login-control-height) !important;
 }
 
 body .login-captcha-button {
+  display: inline-flex !important;
+  width: 100% !important;
+  min-width: 0 !important;
   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;
 }
 
-body .login-captcha-button :is(.captcha-image, .captcha-image svg) {
-  max-height: calc(var(--rc-login-control-height) - 1rem) !important;
+body .login-captcha-button > :is(span, div, [data-slot='content']) {
+  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,

src/global.less

@@ -339,8 +339,9 @@ a {
   border: 1px solid var(--rc-border-default);
   background: var(--rc-bg-subtle);
   color: var(--rc-text-secondary);
-  padding: 12px 16px;
+  padding: 14px 18px;
   font-size: 14px;
+  line-height: 22px;
 }
 
 .rc-notice--info {
@@ -444,7 +445,7 @@ a {
   border-radius: var(--rc-radius-container);
   border: 1px solid var(--rc-border-default);
   background: var(--rc-bg-surface);
-  padding: 16px;
+  padding: 18px;
 }
 
 .rc-form-section__title {
@@ -456,7 +457,25 @@ a {
 }
 
 .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,
@@ -513,13 +532,13 @@ a {
 }
 
 .rc-material-detail-body {
-  margin-top: 16px;
+  margin-top: 18px;
 }
 
 .rc-material-detail-content {
   display: grid;
   min-height: 0;
-  gap: 14px;
+  gap: 18px;
   grid-template-columns: 1fr;
 }
 
@@ -527,19 +546,19 @@ a {
   display: grid;
   min-width: 0;
   align-items: center;
-  gap: 12px;
+  gap: 16px;
   grid-template-columns: minmax(0, 1fr) auto;
   border-radius: var(--rc-radius-container);
   border: 1px solid var(--rc-border-default);
   background: var(--rc-bg-surface);
-  padding: 14px 16px;
+  padding: 18px 20px;
 }
 
 .rc-material-detail-summary__main {
   display: grid;
   min-width: 0;
   align-items: center;
-  gap: 10px;
+  gap: 12px;
   grid-template-columns: minmax(0, 1fr) auto;
 }
 
@@ -551,7 +570,7 @@ a {
   min-width: 0;
   overflow: hidden;
   color: var(--rc-text-primary);
-  font-size: 15px;
+  font-size: 16px;
   font-weight: 550;
   line-height: 22px;
   text-overflow: ellipsis;
@@ -563,7 +582,7 @@ a {
   min-width: 0;
   flex-wrap: wrap;
   gap: 4px 12px;
-  margin-top: 4px;
+  margin-top: 6px;
   color: var(--rc-text-muted);
   font-size: 13px;
   line-height: 18px;
@@ -594,7 +613,7 @@ a {
   display: grid;
   min-width: 0;
   align-content: start;
-  gap: 12px;
+  gap: 16px;
 }
 
 .rc-material-detail-check-card {

src/pages/Login.jsx

@@ -80,13 +80,13 @@ export default function LoginPage() {
   return (
     <main className="login-page">
       <section className="login-shell">
-        <div className="login-brand">
+        <Card className="login-card">
+          <Card.Content>
+            <div className="login-brand login-card-brand">
               <img alt="鑫元基金" src={xinyuanLogoRed} />
               <strong>{appTitle}</strong>
             </div>
 
-        <Card className="login-card">
-          <Card.Content>
             <form className="login-form" onSubmit={handleSubmit}>
               <TextField
                 className="login-field"
@@ -130,9 +130,9 @@ export default function LoginPage() {
 
               <div className="login-captcha-field grid gap-2">
                 <Label>验证码</Label>
-                <div className="login-captcha-row flex gap-3">
+                <div className="login-captcha-row grid gap-3">
                   <TextField
-                    className="login-field min-w-0 flex-1"
+                    className="login-field min-w-0"
                     data-has-value={captchaCode ? 'true' : undefined}
                     isDisabled={loading}
                     isRequired
@@ -154,7 +154,7 @@ export default function LoginPage() {
                       setError('');
                       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 ? (
                       <span
@@ -178,6 +178,7 @@ export default function LoginPage() {
 
               <Button
                 fullWidth
+                className="login-submit-button"
                 isDisabled={loading || captchaLoading}
                 isPending={loading}
                 type="submit"