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 11:10: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;
}

405
src/pages/OAuthPage.tsx
View File

@@ -358,88 +358,90 @@ export function OAuthPage() {
</Button> </Button>
} }
> >
<div className="hint">{t(provider.hintKey)}</div> <div className={styles.cardContent}>
{provider.id === 'gemini-cli' && ( <div className={styles.cardHint}>{t(provider.hintKey)}</div>
<div className={styles.geminiProjectField}> {provider.id === 'gemini-cli' && (
<Input <div className={styles.geminiProjectField}>
label={t('auth_login.gemini_cli_project_id_label')} <Input
hint={t('auth_login.gemini_cli_project_id_hint')} label={t('auth_login.gemini_cli_project_id_label')}
value={state.projectId || ''} hint={t('auth_login.gemini_cli_project_id_hint')}
error={state.projectIdError} value={state.projectId || ''}
onChange={(e) => error={state.projectIdError}
updateProviderState(provider.id, { onChange={(e) =>
projectId: e.target.value, updateProviderState(provider.id, {
projectIdError: undefined projectId: e.target.value,
}) projectIdError: undefined
} })
placeholder={t('auth_login.gemini_cli_project_id_placeholder')} }
/> placeholder={t('auth_login.gemini_cli_project_id_placeholder')}
</div> />
)}
{state.url && (
<div className={`connection-box ${styles.authUrlBox}`}>
<div className={styles.authUrlLabel}>{t(provider.urlLabelKey)}</div>
<div className={styles.authUrlValue}>{state.url}</div>
<div className={styles.authUrlActions}>
<Button variant="secondary" size="sm" onClick={() => copyLink(state.url!)}>
{t(getAuthKey(provider.id, 'copy_link'))}
</Button>
<Button
variant="secondary"
size="sm"
onClick={() => window.open(state.url, '_blank', 'noopener,noreferrer')}
>
{t(getAuthKey(provider.id, 'open_link'))}
</Button>
</div> </div>
</div> )}
)} {state.url && (
{canSubmitCallback && ( <div className={styles.authUrlBox}>
<div className={styles.callbackSection}> <div className={styles.authUrlLabel}>{t(provider.urlLabelKey)}</div>
<Input <div className={styles.authUrlValue}>{state.url}</div>
label={t('auth_login.oauth_callback_label')} <div className={styles.authUrlActions}>
hint={t('auth_login.oauth_callback_hint')} <Button variant="secondary" size="sm" onClick={() => copyLink(state.url!)}>
value={state.callbackUrl || ''} {t(getAuthKey(provider.id, 'copy_link'))}
onChange={(e) => </Button>
updateProviderState(provider.id, { <Button
callbackUrl: e.target.value, variant="secondary"
callbackStatus: undefined, size="sm"
callbackError: undefined onClick={() => window.open(state.url, '_blank', 'noopener,noreferrer')}
}) >
} {t(getAuthKey(provider.id, 'open_link'))}
placeholder={t('auth_login.oauth_callback_placeholder')} </Button>
/> </div>
<div className={styles.callbackActions}>
<Button
variant="secondary"
size="sm"
onClick={() => submitCallback(provider.id)}
loading={state.callbackSubmitting}
>
{t('auth_login.oauth_callback_button')}
</Button>
</div> </div>
{state.callbackStatus === 'success' && state.status === 'waiting' && ( )}
<div className="status-badge success" style={{ marginTop: 8 }}> {canSubmitCallback && (
{t('auth_login.oauth_callback_status_success')} <div className={styles.callbackSection}>
<Input
label={t('auth_login.oauth_callback_label')}
hint={t('auth_login.oauth_callback_hint')}
value={state.callbackUrl || ''}
onChange={(e) =>
updateProviderState(provider.id, {
callbackUrl: e.target.value,
callbackStatus: undefined,
callbackError: undefined
})
}
placeholder={t('auth_login.oauth_callback_placeholder')}
/>
<div className={styles.callbackActions}>
<Button
variant="secondary"
size="sm"
onClick={() => submitCallback(provider.id)}
loading={state.callbackSubmitting}
>
{t('auth_login.oauth_callback_button')}
</Button>
</div> </div>
)} {state.callbackStatus === 'success' && state.status === 'waiting' && (
{state.callbackStatus === 'error' && ( <div className="status-badge success">
<div className="status-badge error" style={{ marginTop: 8 }}> {t('auth_login.oauth_callback_status_success')}
{t('auth_login.oauth_callback_status_error')} {state.callbackError || ''} </div>
</div> )}
)} {state.callbackStatus === 'error' && (
</div> <div className="status-badge error">
)} {t('auth_login.oauth_callback_status_error')} {state.callbackError || ''}
{state.status && state.status !== 'idle' && ( </div>
<div className="status-badge" style={{ marginTop: 8 }}> )}
{state.status === 'success' </div>
? t(getAuthKey(provider.id, 'oauth_status_success')) )}
: state.status === 'error' {state.status && state.status !== 'idle' && (
? `${t(getAuthKey(provider.id, 'oauth_status_error'))} ${state.error || ''}` <div className="status-badge">
: t(getAuthKey(provider.id, 'oauth_status_waiting'))} {state.status === 'success'
</div> ? t(getAuthKey(provider.id, 'oauth_status_success'))
)} : state.status === 'error'
? `${t(getAuthKey(provider.id, 'oauth_status_error'))} ${state.error || ''}`
: t(getAuthKey(provider.id, 'oauth_status_waiting'))}
</div>
)}
</div>
</Card> </Card>
</div> </div>
); );
@@ -459,78 +461,80 @@ export function OAuthPage() {
</Button> </Button>
} }
> >
<div className="hint">{t('vertex_import.description')}</div> <div className={styles.cardContent}>
<Input <div className={styles.cardHint}>{t('vertex_import.description')}</div>
label={t('vertex_import.location_label')} <Input
hint={t('vertex_import.location_hint')} label={t('vertex_import.location_label')}
value={vertexState.location} hint={t('vertex_import.location_hint')}
onChange={(e) => value={vertexState.location}
setVertexState((prev) => ({ onChange={(e) =>
...prev, setVertexState((prev) => ({
location: e.target.value ...prev,
})) location: e.target.value
} }))
placeholder={t('vertex_import.location_placeholder')} }
/> placeholder={t('vertex_import.location_placeholder')}
<div className="form-group">
<label>{t('vertex_import.file_label')}</label>
<div className={styles.filePicker}>
<Button variant="secondary" size="sm" onClick={handleVertexFilePick}>
{t('vertex_import.choose_file')}
</Button>
<div
className={`${styles.fileName} ${
vertexState.fileName ? '' : styles.fileNamePlaceholder
}`.trim()}
>
{vertexState.fileName || t('vertex_import.file_placeholder')}
</div>
</div>
<div className="hint">{t('vertex_import.file_hint')}</div>
<input
ref={vertexFileInputRef}
type="file"
accept=".json,application/json"
style={{ display: 'none' }}
onChange={handleVertexFileChange}
/> />
</div> <div className={styles.formItem}>
{vertexState.error && ( <label className={styles.formItemLabel}>{t('vertex_import.file_label')}</label>
<div className="status-badge error" style={{ marginTop: 8 }}> <div className={styles.filePicker}>
{vertexState.error} <Button variant="secondary" size="sm" onClick={handleVertexFilePick}>
</div> {t('vertex_import.choose_file')}
)} </Button>
{vertexState.result && ( <div
<div className="connection-box" style={{ marginTop: 12 }}> className={`${styles.fileName} ${
<div className="label">{t('vertex_import.result_title')}</div> vertexState.fileName ? '' : styles.fileNamePlaceholder
<div className="key-value-list"> }`.trim()}
{vertexState.result.projectId && ( >
<div className="key-value-item"> {vertexState.fileName || t('vertex_import.file_placeholder')}
<span className="key">{t('vertex_import.result_project')}</span> </div>
<span className="value">{vertexState.result.projectId}</span>
</div>
)}
{vertexState.result.email && (
<div className="key-value-item">
<span className="key">{t('vertex_import.result_email')}</span>
<span className="value">{vertexState.result.email}</span>
</div>
)}
{vertexState.result.location && (
<div className="key-value-item">
<span className="key">{t('vertex_import.result_location')}</span>
<span className="value">{vertexState.result.location}</span>
</div>
)}
{vertexState.result.authFile && (
<div className="key-value-item">
<span className="key">{t('vertex_import.result_file')}</span>
<span className="value">{vertexState.result.authFile}</span>
</div>
)}
</div> </div>
<div className={styles.cardHintSecondary}>{t('vertex_import.file_hint')}</div>
<input
ref={vertexFileInputRef}
type="file"
accept=".json,application/json"
style={{ display: 'none' }}
onChange={handleVertexFileChange}
/>
</div> </div>
)} {vertexState.error && (
<div className="status-badge error">
{vertexState.error}
</div>
)}
{vertexState.result && (
<div className={styles.connectionBox}>
<div className={styles.connectionLabel}>{t('vertex_import.result_title')}</div>
<div className={styles.keyValueList}>
{vertexState.result.projectId && (
<div className={styles.keyValueItem}>
<span className={styles.keyValueKey}>{t('vertex_import.result_project')}</span>
<span className={styles.keyValueValue}>{vertexState.result.projectId}</span>
</div>
)}
{vertexState.result.email && (
<div className={styles.keyValueItem}>
<span className={styles.keyValueKey}>{t('vertex_import.result_email')}</span>
<span className={styles.keyValueValue}>{vertexState.result.email}</span>
</div>
)}
{vertexState.result.location && (
<div className={styles.keyValueItem}>
<span className={styles.keyValueKey}>{t('vertex_import.result_location')}</span>
<span className={styles.keyValueValue}>{vertexState.result.location}</span>
</div>
)}
{vertexState.result.authFile && (
<div className={styles.keyValueItem}>
<span className={styles.keyValueKey}>{t('vertex_import.result_file')}</span>
<span className={styles.keyValueValue}>{vertexState.result.authFile}</span>
</div>
)}
</div>
</div>
)}
</div>
</Card> </Card>
{/* iFlow Cookie 登录 */} {/* iFlow Cookie 登录 */}
@@ -547,60 +551,61 @@ 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>
{t('auth_login.iflow_cookie_key_hint')} <div className={styles.cardHintSecondary}>
</div> {t('auth_login.iflow_cookie_key_hint')}
<div className="form-item" style={{ marginTop: 12 }}>
<label className="label">{t('auth_login.iflow_cookie_label')}</label>
<Input
value={iflowCookie.cookie}
onChange={(e) => setIflowCookie((prev) => ({ ...prev, cookie: e.target.value }))}
placeholder={t('auth_login.iflow_cookie_placeholder')}
/>
</div>
{iflowCookie.error && (
<div
className={`status-badge ${iflowCookie.errorType === 'warning' ? 'warning' : 'error'}`}
style={{ marginTop: 8 }}
>
{iflowCookie.errorType === 'warning'
? t('auth_login.iflow_cookie_status_duplicate')
: t('auth_login.iflow_cookie_status_error')}{' '}
{iflowCookie.error}
</div> </div>
)} <div className={styles.formItem}>
{iflowCookie.result && iflowCookie.result.status === 'ok' && ( <label className={styles.formItemLabel}>{t('auth_login.iflow_cookie_label')}</label>
<div className="connection-box" style={{ marginTop: 12 }}> <Input
<div className="label">{t('auth_login.iflow_cookie_result_title')}</div> value={iflowCookie.cookie}
<div className="key-value-list"> onChange={(e) => setIflowCookie((prev) => ({ ...prev, cookie: e.target.value }))}
{iflowCookie.result.email && ( placeholder={t('auth_login.iflow_cookie_placeholder')}
<div className="key-value-item"> />
<span className="key">{t('auth_login.iflow_cookie_result_email')}</span> </div>
<span className="value">{iflowCookie.result.email}</span> {iflowCookie.error && (
</div> <div
)} className={`status-badge ${iflowCookie.errorType === 'warning' ? 'warning' : 'error'}`}
{iflowCookie.result.expired && ( >
<div className="key-value-item"> {iflowCookie.errorType === 'warning'
<span className="key">{t('auth_login.iflow_cookie_result_expired')}</span> ? t('auth_login.iflow_cookie_status_duplicate')
<span className="value">{iflowCookie.result.expired}</span> : t('auth_login.iflow_cookie_status_error')}{' '}
</div> {iflowCookie.error}
)}
{iflowCookie.result.saved_path && (
<div className="key-value-item">
<span className="key">{t('auth_login.iflow_cookie_result_path')}</span>
<span className="value">{iflowCookie.result.saved_path}</span>
</div>
)}
{iflowCookie.result.type && (
<div className="key-value-item">
<span className="key">{t('auth_login.iflow_cookie_result_type')}</span>
<span className="value">{iflowCookie.result.type}</span>
</div>
)}
</div> </div>
</div> )}
)} {iflowCookie.result && iflowCookie.result.status === 'ok' && (
<div className={styles.connectionBox}>
<div className={styles.connectionLabel}>{t('auth_login.iflow_cookie_result_title')}</div>
<div className={styles.keyValueList}>
{iflowCookie.result.email && (
<div className={styles.keyValueItem}>
<span className={styles.keyValueKey}>{t('auth_login.iflow_cookie_result_email')}</span>
<span className={styles.keyValueValue}>{iflowCookie.result.email}</span>
</div>
)}
{iflowCookie.result.expired && (
<div className={styles.keyValueItem}>
<span className={styles.keyValueKey}>{t('auth_login.iflow_cookie_result_expired')}</span>
<span className={styles.keyValueValue}>{iflowCookie.result.expired}</span>
</div>
)}
{iflowCookie.result.saved_path && (
<div className={styles.keyValueItem}>
<span className={styles.keyValueKey}>{t('auth_login.iflow_cookie_result_path')}</span>
<span className={styles.keyValueValue}>{iflowCookie.result.saved_path}</span>
</div>
)}
{iflowCookie.result.type && (
<div className={styles.keyValueItem}>
<span className={styles.keyValueKey}>{t('auth_login.iflow_cookie_result_type')}</span>
<span className={styles.keyValueValue}>{iflowCookie.result.type}</span>
</div>
)}
</div>
</div>
)}
</div>
</Card> </Card>
</div> </div>
</div> </div>