feat: 新增账户管理页面和首页,并为其添加了样式和账户表单组件
This commit is contained in:
@@ -6,6 +6,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
min-height: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background-color: var(--color-bg);
|
background-color: var(--color-bg);
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
@@ -291,7 +292,7 @@
|
|||||||
.account-form {
|
.account-form {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: 100vh;
|
height: 100%;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -301,6 +301,13 @@
|
|||||||
animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.accounts-page__modal--fixed {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/* Delete Confirmation */
|
/* Delete Confirmation */
|
||||||
.accounts-page__delete-confirm {
|
.accounts-page__delete-confirm {
|
||||||
padding: var(--spacing-xl);
|
padding: var(--spacing-xl);
|
||||||
|
|||||||
@@ -250,7 +250,7 @@ export const Accounts: React.FC = () => {
|
|||||||
{/* Modal Overlay */}
|
{/* Modal Overlay */}
|
||||||
{modalType !== 'none' && (
|
{modalType !== 'none' && (
|
||||||
<div className="accounts-page__modal-overlay" onClick={closeModal}>
|
<div className="accounts-page__modal-overlay" onClick={closeModal}>
|
||||||
<div className="accounts-page__modal" onClick={(e) => e.stopPropagation()}>
|
<div className={`accounts-page__modal ${modalType === 'create' || modalType === 'edit' ? 'accounts-page__modal--fixed' : ''}`} onClick={(e) => e.stopPropagation()}>
|
||||||
{/* Create Account Modal */}
|
{/* Create Account Modal */}
|
||||||
{modalType === 'create' && (
|
{modalType === 'create' && (
|
||||||
<AccountForm
|
<AccountForm
|
||||||
|
|||||||
@@ -405,7 +405,7 @@ function Home() {
|
|||||||
<CreateFirstAccountModal isOpen={!loading && !error && accounts.length === 0 && !showAccountForm} onCreate={() => setShowAccountForm(true)} />
|
<CreateFirstAccountModal isOpen={!loading && !error && accounts.length === 0 && !showAccountForm} onCreate={() => setShowAccountForm(true)} />
|
||||||
{showAccountForm && (
|
{showAccountForm && (
|
||||||
<div className="modal-overlay">
|
<div className="modal-overlay">
|
||||||
<div className="modal-content">
|
<div className="modal-content" style={{ display: 'flex', flexDirection: 'column', maxHeight: '90vh', overflow: 'hidden', padding: 0 }}>
|
||||||
<AccountForm
|
<AccountForm
|
||||||
onSubmit={async (data) => { await createAccount(data); setShowAccountForm(false); await loadData(); }}
|
onSubmit={async (data) => { await createAccount(data); setShowAccountForm(false); await loadData(); }}
|
||||||
onCancel={() => setShowAccountForm(false)}
|
onCancel={() => setShowAccountForm(false)}
|
||||||
|
|||||||
Reference in New Issue
Block a user