chuan/Cli-Proxy-API-Management-Center
1
0
Fork 0
mirror of https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git synced 2026-02-19 19:20:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(OAuthPage): enhance layout and styling for better user experience

Browse Source
This commit is contained in:
Supra4E8C
2026-02-14 20:32:31 +08:00
parent 211f9f280c
commit b702cd6e4c
2 changed files with 296 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/pages/OAuthPage.module.scss
View File

@@ -28,6 +28,35 @@
gap: $spacing-xl; gap: $spacing-xl;
} }
.cardContent {
display: flex;
flex-direction: column;
gap: $spacing-md;
:global(.form-group) {
margin-bottom: 0;
}
:global(.status-badge) {
margin-bottom: 0;
align-self: flex-start;
}
}
.cardHint {
margin: 0;
font-size: 13px;
line-height: 1.6;
color: var(--text-secondary);
}
.cardHintSecondary {
margin: 0;
font-size: 12px;
line-height: 1.5;
color: var(--text-tertiary);
}
.oauthSection { .oauthSection {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -72,10 +101,10 @@
} }
.callbackSection { .callbackSection {
margin-top: $spacing-md; margin-top: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $spacing-xs; gap: $spacing-sm;
} }
.callbackActions { .callbackActions {
@@ -117,11 +146,24 @@
.geminiProjectField { .geminiProjectField {
:global(.form-group) { :global(.form-group) {
margin-top: $spacing-sm; margin-top: 0;
margin-bottom: 0;
gap: $spacing-sm; gap: $spacing-sm;
} }
} }
.formItem {
display: flex;
flex-direction: column;
gap: $spacing-xs;
}
.formItemLabel {
margin: 0;
font-weight: 600;
color: var(--text-primary);
}
.filePicker { .filePicker {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -143,3 +185,49 @@
.fileNamePlaceholder { .fileNamePlaceholder {
color: var(--text-secondary); color: var(--text-secondary);
} }
.connectionBox {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: $radius-md;
padding: $spacing-md;
display: flex;
flex-direction: column;
gap: $spacing-sm;
}
.connectionLabel {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
}
.keyValueList {
display: flex;
flex-direction: column;
gap: 6px;
}
.keyValueItem {
display: grid;
grid-template-columns: 140px 1fr;
gap: 10px;
align-items: start;
@include mobile {
grid-template-columns: 1fr;
gap: 2px;
}
}
.keyValueKey {
color: var(--text-secondary);
font-size: 13px;
}
.keyValueValue {
color: var(--text-primary);
word-break: break-all;
overflow-wrap: anywhere;
}

95
src/pages/OAuthPage.tsx
View File

@@ -358,7 +358,8 @@ export function OAuthPage() {
</Button> </Button>
} }
> >
<div className="hint">{t(provider.hintKey)}</div> <div className={styles.cardContent}>
<div className={styles.cardHint}>{t(provider.hintKey)}</div>
{provider.id === 'gemini-cli' && ( {provider.id === 'gemini-cli' && (
<div className={styles.geminiProjectField}> <div className={styles.geminiProjectField}>
<Input <Input
@@ -377,7 +378,7 @@ export function OAuthPage() {
</div> </div>
)} )}
{state.url && ( {state.url && (
<div className={`connection-box ${styles.authUrlBox}`}> <div className={styles.authUrlBox}>
<div className={styles.authUrlLabel}>{t(provider.urlLabelKey)}</div> <div className={styles.authUrlLabel}>{t(provider.urlLabelKey)}</div>
<div className={styles.authUrlValue}>{state.url}</div> <div className={styles.authUrlValue}>{state.url}</div>
<div className={styles.authUrlActions}> <div className={styles.authUrlActions}>
@@ -420,19 +421,19 @@ export function OAuthPage() {
</Button> </Button>
</div> </div>
{state.callbackStatus === 'success' && state.status === 'waiting' && ( {state.callbackStatus === 'success' && state.status === 'waiting' && (
<div className="status-badge success" style={{ marginTop: 8 }}> <div className="status-badge success">
{t('auth_login.oauth_callback_status_success')} {t('auth_login.oauth_callback_status_success')}
</div> </div>
)} )}
{state.callbackStatus === 'error' && ( {state.callbackStatus === 'error' && (
<div className="status-badge error" style={{ marginTop: 8 }}> <div className="status-badge error">
{t('auth_login.oauth_callback_status_error')} {state.callbackError || ''} {t('auth_login.oauth_callback_status_error')} {state.callbackError || ''}
</div> </div>
)} )}
</div> </div>
)} )}
{state.status && state.status !== 'idle' && ( {state.status && state.status !== 'idle' && (
<div className="status-badge" style={{ marginTop: 8 }}> <div className="status-badge">
{state.status === 'success' {state.status === 'success'
? t(getAuthKey(provider.id, 'oauth_status_success')) ? t(getAuthKey(provider.id, 'oauth_status_success'))
: state.status === 'error' : state.status === 'error'
@@ -440,6 +441,7 @@ export function OAuthPage() {
: t(getAuthKey(provider.id, 'oauth_status_waiting'))} : t(getAuthKey(provider.id, 'oauth_status_waiting'))}
</div> </div>
)} )}
</div>
</Card> </Card>
</div> </div>
); );
@@ -459,7 +461,8 @@ export function OAuthPage() {
</Button> </Button>
} }
> >
<div className="hint">{t('vertex_import.description')}</div> <div className={styles.cardContent}>
<div className={styles.cardHint}>{t('vertex_import.description')}</div>
<Input <Input
label={t('vertex_import.location_label')} label={t('vertex_import.location_label')}
hint={t('vertex_import.location_hint')} hint={t('vertex_import.location_hint')}
@@ -472,8 +475,8 @@ export function OAuthPage() {
} }
placeholder={t('vertex_import.location_placeholder')} placeholder={t('vertex_import.location_placeholder')}
/> />
<div className="form-group"> <div className={styles.formItem}>
<label>{t('vertex_import.file_label')}</label> <label className={styles.formItemLabel}>{t('vertex_import.file_label')}</label>
<div className={styles.filePicker}> <div className={styles.filePicker}>
<Button variant="secondary" size="sm" onClick={handleVertexFilePick}> <Button variant="secondary" size="sm" onClick={handleVertexFilePick}>
{t('vertex_import.choose_file')} {t('vertex_import.choose_file')}
@@ -486,7 +489,7 @@ export function OAuthPage() {
{vertexState.fileName || t('vertex_import.file_placeholder')} {vertexState.fileName || t('vertex_import.file_placeholder')}
</div> </div>
</div> </div>
<div className="hint">{t('vertex_import.file_hint')}</div> <div className={styles.cardHintSecondary}>{t('vertex_import.file_hint')}</div>
<input <input
ref={vertexFileInputRef} ref={vertexFileInputRef}
type="file" type="file"
@@ -496,41 +499,42 @@ export function OAuthPage() {
/> />
</div> </div>
{vertexState.error && ( {vertexState.error && (
<div className="status-badge error" style={{ marginTop: 8 }}> <div className="status-badge error">
{vertexState.error} {vertexState.error}
</div> </div>
)} )}
{vertexState.result && ( {vertexState.result && (
<div className="connection-box" style={{ marginTop: 12 }}> <div className={styles.connectionBox}>
<div className="label">{t('vertex_import.result_title')}</div> <div className={styles.connectionLabel}>{t('vertex_import.result_title')}</div>
<div className="key-value-list"> <div className={styles.keyValueList}>
{vertexState.result.projectId && ( {vertexState.result.projectId && (
<div className="key-value-item"> <div className={styles.keyValueItem}>
<span className="key">{t('vertex_import.result_project')}</span> <span className={styles.keyValueKey}>{t('vertex_import.result_project')}</span>
<span className="value">{vertexState.result.projectId}</span> <span className={styles.keyValueValue}>{vertexState.result.projectId}</span>
</div> </div>
)} )}
{vertexState.result.email && ( {vertexState.result.email && (
<div className="key-value-item"> <div className={styles.keyValueItem}>
<span className="key">{t('vertex_import.result_email')}</span> <span className={styles.keyValueKey}>{t('vertex_import.result_email')}</span>
<span className="value">{vertexState.result.email}</span> <span className={styles.keyValueValue}>{vertexState.result.email}</span>
</div> </div>
)} )}
{vertexState.result.location && ( {vertexState.result.location && (
<div className="key-value-item"> <div className={styles.keyValueItem}>
<span className="key">{t('vertex_import.result_location')}</span> <span className={styles.keyValueKey}>{t('vertex_import.result_location')}</span>
<span className="value">{vertexState.result.location}</span> <span className={styles.keyValueValue}>{vertexState.result.location}</span>
</div> </div>
)} )}
{vertexState.result.authFile && ( {vertexState.result.authFile && (
<div className="key-value-item"> <div className={styles.keyValueItem}>
<span className="key">{t('vertex_import.result_file')}</span> <span className={styles.keyValueKey}>{t('vertex_import.result_file')}</span>
<span className="value">{vertexState.result.authFile}</span> <span className={styles.keyValueValue}>{vertexState.result.authFile}</span>
</div> </div>
)} )}
</div> </div>
</div> </div>
)} )}
</div>
</Card> </Card>
{/* iFlow Cookie 登录 */} {/* iFlow Cookie 登录 */}
@@ -547,12 +551,13 @@ export function OAuthPage() {
</Button> </Button>
} }
> >
<div className="hint">{t('auth_login.iflow_cookie_hint')}</div> <div className={styles.cardContent}>
<div className="hint" style={{ marginTop: 4 }}> <div className={styles.cardHint}>{t('auth_login.iflow_cookie_hint')}</div>
<div className={styles.cardHintSecondary}>
{t('auth_login.iflow_cookie_key_hint')} {t('auth_login.iflow_cookie_key_hint')}
</div> </div>
<div className="form-item" style={{ marginTop: 12 }}> <div className={styles.formItem}>
<label className="label">{t('auth_login.iflow_cookie_label')}</label> <label className={styles.formItemLabel}>{t('auth_login.iflow_cookie_label')}</label>
<Input <Input
value={iflowCookie.cookie} value={iflowCookie.cookie}
onChange={(e) => setIflowCookie((prev) => ({ ...prev, cookie: e.target.value }))} onChange={(e) => setIflowCookie((prev) => ({ ...prev, cookie: e.target.value }))}
@@ -562,7 +567,6 @@ export function OAuthPage() {
{iflowCookie.error && ( {iflowCookie.error && (
<div <div
className={`status-badge ${iflowCookie.errorType === 'warning' ? 'warning' : 'error'}`} className={`status-badge ${iflowCookie.errorType === 'warning' ? 'warning' : 'error'}`}
style={{ marginTop: 8 }}
> >
{iflowCookie.errorType === 'warning' {iflowCookie.errorType === 'warning'
? t('auth_login.iflow_cookie_status_duplicate') ? t('auth_login.iflow_cookie_status_duplicate')
@@ -571,36 +575,37 @@ export function OAuthPage() {
</div> </div>
)} )}
{iflowCookie.result && iflowCookie.result.status === 'ok' && ( {iflowCookie.result && iflowCookie.result.status === 'ok' && (
<div className="connection-box" style={{ marginTop: 12 }}> <div className={styles.connectionBox}>
<div className="label">{t('auth_login.iflow_cookie_result_title')}</div> <div className={styles.connectionLabel}>{t('auth_login.iflow_cookie_result_title')}</div>
<div className="key-value-list"> <div className={styles.keyValueList}>
{iflowCookie.result.email && ( {iflowCookie.result.email && (
<div className="key-value-item"> <div className={styles.keyValueItem}>
<span className="key">{t('auth_login.iflow_cookie_result_email')}</span> <span className={styles.keyValueKey}>{t('auth_login.iflow_cookie_result_email')}</span>
<span className="value">{iflowCookie.result.email}</span> <span className={styles.keyValueValue}>{iflowCookie.result.email}</span>
</div> </div>
)} )}
{iflowCookie.result.expired && ( {iflowCookie.result.expired && (
<div className="key-value-item"> <div className={styles.keyValueItem}>
<span className="key">{t('auth_login.iflow_cookie_result_expired')}</span> <span className={styles.keyValueKey}>{t('auth_login.iflow_cookie_result_expired')}</span>
<span className="value">{iflowCookie.result.expired}</span> <span className={styles.keyValueValue}>{iflowCookie.result.expired}</span>
</div> </div>
)} )}
{iflowCookie.result.saved_path && ( {iflowCookie.result.saved_path && (
<div className="key-value-item"> <div className={styles.keyValueItem}>
<span className="key">{t('auth_login.iflow_cookie_result_path')}</span> <span className={styles.keyValueKey}>{t('auth_login.iflow_cookie_result_path')}</span>
<span className="value">{iflowCookie.result.saved_path}</span> <span className={styles.keyValueValue}>{iflowCookie.result.saved_path}</span>
</div> </div>
)} )}
{iflowCookie.result.type && ( {iflowCookie.result.type && (
<div className="key-value-item"> <div className={styles.keyValueItem}>
<span className="key">{t('auth_login.iflow_cookie_result_type')}</span> <span className={styles.keyValueKey}>{t('auth_login.iflow_cookie_result_type')}</span>
<span className="value">{iflowCookie.result.type}</span> <span className={styles.keyValueValue}>{iflowCookie.result.type}</span>
</div> </div>
)} )}
</div> </div>
</div> </div>
)} )}
</div>
</Card> </Card>
</div> </div>
</div> </div>