update:css样式拆分
This commit is contained in:
@@ -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()}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user