zyc/video-shuoshan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 密码弹窗样式对齐 ConfirmModal 规范 (v0.9.4)
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 2m15s
Details

Browse Source 
背景 #16161e、圆角 var(--radius-card)、输入框 var(--color-bg-page)、
按钮 8px 圆角、onMouseDown 防拖拽误关、z-index 300

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
seaislee1209 2026-03-16 17:15:32 +08:00
parent b520b429c5
commit 45b7ca00d1
2 changed files with 18 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
web/src/pages/ProfilePage.module.css
View File

@ -391,23 +391,23 @@
} }
} }
/* Password Modal */ /* Password Modal — aligned with ConfirmModal / TeamsPage modal */
.modalOverlay { .modalOverlay {
position: fixed; position: fixed;
inset: 0; inset: 0;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.6);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 1000; z-index: 300;
} }
.modal { .modal {
background: var(--color-bg-card); background: #16161e;
border: 1px solid var(--color-border-card); border: 1px solid var(--color-border-card);
border-radius: 12px; border-radius: var(--radius-card);
padding: 24px; padding: 24px;
width: 380px; width: 400px;
max-width: 90vw; max-width: 90vw;
} }
@ -419,26 +419,25 @@
} }
.formGroup { .formGroup {
margin-bottom: 14px; margin-bottom: 16px;
} }
.formLabel { .formLabel {
display: block; display: block;
font-size: 12px;
color: var(--color-text-secondary); color: var(--color-text-secondary);
font-size: 13px;
margin-bottom: 6px; margin-bottom: 6px;
} }
.formInput { .formInput {
width: 100%; width: 100%;
padding: 8px 12px; padding: 8px 12px;
background: rgba(255, 255, 255, 0.04); background: var(--color-bg-page);
border: 1px solid var(--color-border-card); border: 1px solid var(--color-border-card);
border-radius: 6px; border-radius: 8px;
color: var(--color-text-primary); color: var(--color-text-primary);
font-size: 13px; font-size: 14px;
outline: none; outline: none;
transition: border-color 0.2s;
box-sizing: border-box; box-sizing: border-box;
} }
@ -454,30 +453,29 @@
.modalActions { .modalActions {
display: flex; display: flex;
gap: 10px; gap: 8px;
justify-content: flex-end; justify-content: flex-end;
margin-top: 20px; margin-top: 20px;
} }
.cancelBtn { .cancelBtn {
padding: 6px 16px; padding: 8px 16px;
background: transparent; background: transparent;
border: 1px solid var(--color-border-card); border: 1px solid var(--color-border-card);
border-radius: 6px; border-radius: 8px;
color: var(--color-text-secondary); color: var(--color-text-secondary);
font-size: 13px; font-size: 13px;
cursor: pointer; cursor: pointer;
} }
.saveBtn { .saveBtn {
padding: 6px 16px; padding: 8px 16px;
background: var(--color-primary); background: var(--color-primary);
border: none; border: none;
border-radius: 6px; border-radius: 8px;
color: #fff; color: #fff;
font-size: 13px; font-size: 13px;
cursor: pointer; cursor: pointer;
transition: opacity 0.2s;
} }
.saveBtn:disabled { .saveBtn:disabled {

4
web/src/pages/ProfilePage.tsx
View File

@ -241,8 +241,8 @@ export function ProfilePage() {
</div> </div>
{pwModalOpen && ( {pwModalOpen && (
<div className={styles.modalOverlay} onClick={() => setPwModalOpen(false)}> <div className={styles.modalOverlay} onMouseDown={(e) => { if (e.target === e.currentTarget) setPwModalOpen(false); }}>
<div className={styles.modal} onClick={(e) => e.stopPropagation()}> <div className={styles.modal}>
<h3 className={styles.modalTitle}>修改密码</h3> <h3 className={styles.modalTitle}>修改密码</h3>
<div className={styles.formGroup}> <div className={styles.formGroup}>
<label className={styles.formLabel}>旧密码</label> <label className={styles.formLabel}>旧密码</label>