update:css样式拆分

frontend/app/features/platform/DataResourceUploadModal.tsx

@@ -1,6 +1,22 @@
 import { type FormEvent } from "react";
 import Icon from "../../components/common/Icon";
 import type { Visibility } from "../../services/api";
+import {
+  formFieldClass,
+  formHintClass,
+  formInputClass,
+  formTextareaClass,
+  iconButtonClass,
+  modalBackdropClass,
+  modalCompactClass,
+  modalEyebrowClass,
+  modalFooterClass,
+  modalFormClass,
+  modalHeaderClass,
+  modalTitleClass,
+  primaryButtonClass,
+  secondaryButtonClass,
+} from "./modalUi";
 
 type DataResourceUploadModalProps = {
   open: boolean;
@@ -43,15 +59,15 @@ export function DataResourceUploadModal({
     : file?.name ?? "";
 
   return (
-    <div className="modal-backdrop" role="presentation">
-      <section className="modal modal--compact" role="dialog" aria-modal="true">
-        <div className="modal__header">
+    <div className={modalBackdropClass} role="presentation">
+      <section className={modalCompactClass} role="dialog" aria-modal="true">
+        <div className={modalHeaderClass}>
           <div>
-            <span className="modal__eyebrow">数据资源</span>
-            <h2>上传数据文件</h2>
+            <span className={modalEyebrowClass}>数据资源</span>
+            <h2 className={modalTitleClass}>上传数据文件</h2>
           </div>
           <button
-            className="icon-button"
+            className={iconButtonClass}
             type="button"
             aria-label="关闭"
             onClick={onClose}
@@ -59,14 +75,17 @@ export function DataResourceUploadModal({
             <Icon name="close" />
           </button>
         </div>
-        <form onSubmit={onSubmit}>
-          <label className="form-field">
+        <form className={modalFormClass} onSubmit={onSubmit}>
+          <label className={formFieldClass}>
             <span>已选文件</span>
-            <div>{file ? file.name : "未选择文件"}</div>
+            <div className="font-normal text-[#283a4e]">
+              {file ? file.name : "未选择文件"}
+            </div>
           </label>
-          <label className="form-field">
+          <label className={formFieldClass}>
             <span>资源名称</span>
             <input
+              className={formInputClass}
               autoFocus
               maxLength={255}
               placeholder="例如：训练数据"
@@ -75,24 +94,26 @@ export function DataResourceUploadModal({
               required
             />
           </label>
-          <label className="form-field">
+          <label className={formFieldClass}>
             <span>子目录</span>
             <input
+              className={formInputClass}
               type="text"
               maxLength={1024}
               placeholder="例如：train/v1（留空上传到当前目录）"
               value={targetPath}
               onChange={(event) => onTargetPathChange(event.target.value)}
             />
-            <small className="form-field__hint">
+            <small className={formHintClass}>
               {parentPath
                 ? `当前位于 ${parentPath || "根目录"} · 最终路径：${finalPath || "—"}`
                 : `最终路径：${finalPath || "—"}`}
             </small>
           </label>
-          <label className="form-field">
+          <label className={formFieldClass}>
             <span>可见性</span>
             <select
+              className={formInputClass}
               value={visibility}
               onChange={(event) =>
                 onVisibilityChange(event.target.value as Visibility)
@@ -103,18 +124,19 @@ export function DataResourceUploadModal({
               <option value="public">公开</option>
             </select>
           </label>
-          <label className="form-field">
+          <label className={formFieldClass}>
             <span>描述</span>
             <textarea
+              className={formTextareaClass}
               rows={3}
               placeholder="可选描述"
               value={description}
               onChange={(event) => onDescriptionChange(event.target.value)}
             />
           </label>
-          <div className="modal__footer">
+          <div className={modalFooterClass}>
             <button
-              className="secondary-button"
+              className={secondaryButtonClass}
               type="button"
               onClick={onClose}
               disabled={uploading}
@@ -122,7 +144,7 @@ export function DataResourceUploadModal({
               取消
             </button>
             <button
-              className="primary-button"
+              className={primaryButtonClass}
               type="submit"
               disabled={uploading || !resourceName.trim()}
             >