feat: 新增账户管理页面和首页,并为其添加了样式和账户表单组件

This commit is contained in:
2026-01-30 15:58:12 +08:00
parent 5e587837e8
commit 7e97493bdc
4 changed files with 11 additions and 3 deletions

View File

@@ -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;
} }

View File

@@ -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);

View File

@@ -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

View File

@@ -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)}