update:css样式拆分

This commit is contained in:
xiaozhu
2026-09-02 10:10:41 +08:00
committed by tao.chen
parent ef0000ebe5
commit f452ba70fb
27 changed files with 1404 additions and 3059 deletions
@@ -1,5 +1,20 @@
import { type FormEvent } from "react";
import Icon from "../../components/common/Icon";
import {
destinationChipClass,
formFieldClass,
formInputClass,
iconButtonClass,
modalBackdropClass,
modalCompactClass,
modalEyebrowClass,
modalFooterClass,
modalFormClass,
modalHeaderClass,
modalTitleClass,
primaryButtonClass,
secondaryButtonClass,
} from "./modalUi";
type CreateFolderModalProps = {
open: boolean;
@@ -23,15 +38,15 @@ export function CreateFolderModal({
if (!open) return null;
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">WORKSPACE</span>
<h2></h2>
<span className={modalEyebrowClass}>WORKSPACE</span>
<h2 className={modalTitleClass}></h2>
</div>
<button
className="icon-button"
className={iconButtonClass}
type="button"
aria-label="关闭"
onClick={onClose}
@@ -39,14 +54,15 @@ export function CreateFolderModal({
<Icon name="close" />
</button>
</div>
<form onSubmit={onSubmit}>
<div className="destination-chip">
<form className={modalFormClass} onSubmit={onSubmit}>
<div className={destinationChipClass}>
<Icon name="folder" size={16} />
{parentPath || "个人根目录"}
</div>
<label className="form-field">
<label className={formFieldClass}>
<span></span>
<input
className={formInputClass}
autoFocus
maxLength={255}
placeholder="例如:模型训练"
@@ -54,16 +70,16 @@ export function CreateFolderModal({
onChange={(event) => onNameChange(event.target.value)}
/>
</label>
<div className="modal__footer">
<div className={modalFooterClass}>
<button
className="secondary-button"
className={secondaryButtonClass}
type="button"
onClick={onClose}
>
</button>
<button
className="primary-button"
className={primaryButtonClass}
type="submit"
disabled={busy || !name.trim()}
>