Skip to content

Commit 02b8707

Browse files
QAbot-zhQAbot-zh
committed
style: 优化供应商模态框和设置页输入框布局
1 parent bd9d666 commit 02b8707

File tree

4 files changed

+141
-29
lines changed

4 files changed

+141
-29
lines changed

‎app/components/custom-provider.module.scss‎

Lines changed: 84 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1350,45 +1350,49 @@
13501350
.keyListContainer {
13511351
width: 100%;
13521352
box-sizing: border-box;
1353-
padding: 0 24px;
1353+
padding: 0;
1354+
margin-top: 8px;
13541355
}
13551356
.keyInputContainer {
13561357
display: flex;
13571358
margin-bottom: 16px;
13581359
width: 100%;
1359-
1360+
13601361
.keyInput {
1361-
max-width: unset;
1362+
max-width: unset !important;
1363+
min-width: 200px !important;
13621364
flex-grow: 1;
13631365
margin-right: 10px;
13641366
padding: 10px 16px;
13651367
border: 1px solid #e5e7eb;
13661368
border-radius: 8px;
13671369
font-size: var(--text-sm);
1368-
1370+
13691371
&:focus {
13701372
outline: none;
13711373
border-color: #2563eb;
13721374
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
13731375
}
13741376
}
1375-
1377+
13761378
.actions {
13771379
display: flex;
1378-
1380+
13791381
button:not(:last-child) {
13801382
margin-right: 10px;
13811383
}
13821384
}
1383-
1385+
13841386
@media screen and (max-width: 768px) {
13851387
flex-direction: column;
1386-
1388+
13871389
.keyInput {
13881390
margin-right: 0;
13891391
margin-bottom: 10px;
1392+
min-width: 0 !important;
1393+
width: 100% !important;
13901394
}
1391-
1395+
13921396
.actions {
13931397
display: flex;
13941398
flex-wrap: wrap;
@@ -1559,7 +1563,7 @@
15591563

15601564
@media screen and (max-width: 768px) {
15611565
.keyListContainer {
1562-
padding: 0 2vw;
1566+
padding: 0;
15631567
}
15641568
.keyInputContainer {
15651569
flex-direction: column;
@@ -1606,6 +1610,8 @@
16061610
background-color: #f9fafb;
16071611
border-radius: 6px;
16081612
border: 1px solid #e5e7eb;
1613+
flex-wrap: wrap;
1614+
gap: 8px;
16091615
}
16101616

16111617
.testModelLabel {
@@ -1617,12 +1623,32 @@
16171623

16181624
.testModelInput {
16191625
flex: 1;
1626+
min-width: 120px !important;
1627+
max-width: unset !important;
16201628
padding: 8px 10px;
16211629
margin-right: 10px;
16221630
border: 1px solid #d1d5db;
16231631
border-radius: 4px;
16241632
font-size: var(--text-sm);
16251633
}
1634+
1635+
@media screen and (max-width: 600px) {
1636+
.testConfigContainer {
1637+
flex-direction: column;
1638+
align-items: stretch;
1639+
}
1640+
1641+
.testModelLabel {
1642+
margin-right: 0;
1643+
margin-bottom: 4px;
1644+
}
1645+
1646+
.testModelInput {
1647+
width: 100%;
1648+
margin-right: 0;
1649+
margin-bottom: 8px;
1650+
}
1651+
}
16261652
// Update the test result styles in custom-provider.module.scss
16271653
.testResult {
16281654
margin-left: 8px;
@@ -1682,3 +1708,51 @@
16821708
margin-bottom: 10px;
16831709
}
16841710
}
1711+
1712+
// ===== 13. Provider Modal Form Inputs =====
1713+
// 供应商模态框中的输入框样式 - 需要覆盖 ui-lib 中 .list-item input[type="text"] 的限制
1714+
.providerFormInput {
1715+
width: 300px !important;
1716+
max-width: 100% !important;
1717+
min-width: 200px !important;
1718+
padding: 8px 12px;
1719+
border: 1px solid #e5e7eb;
1720+
border-radius: 6px;
1721+
font-size: var(--text-sm);
1722+
box-sizing: border-box;
1723+
1724+
&:focus {
1725+
outline: none;
1726+
border-color: #2563eb;
1727+
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
1728+
}
1729+
}
1730+
1731+
// 普通视图下的 API Key 输入容器
1732+
.apiKeyNormalView {
1733+
width: 340px;
1734+
max-width: 100%;
1735+
1736+
// 覆盖全局 password-input 的宽度限制
1737+
:global(.password-input-container) {
1738+
width: 100%;
1739+
1740+
:global(.password-input) {
1741+
width: 100% !important;
1742+
max-width: 100% !important;
1743+
min-width: 0 !important;
1744+
}
1745+
}
1746+
}
1747+
1748+
// 小屏响应式
1749+
@media screen and (max-width: 600px) {
1750+
.providerFormInput {
1751+
width: 100% !important;
1752+
min-width: 0 !important;
1753+
}
1754+
1755+
.apiKeyNormalView {
1756+
width: 100%;
1757+
}
1758+
}

‎app/components/provider-modal.tsx‎

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useState, useEffect, useMemo, useCallback } from "react";
22
import { IconButton } from "./button";
33
import styles from "./custom-provider.module.scss";
4+
import uiStyles from "./ui-lib.module.scss";
45
import { useAccessStore } from "../store";
56
import { Model, userCustomProvider, ApiPaths } from "../client/api";
67
import Locale from "../locales";
@@ -1847,14 +1848,15 @@ export function ProviderModal(props: ProviderModalProps) {
18471848
);
18481849
} else {
18491850
return (
1850-
<PasswordInput
1851-
style={{ width: "340px" }}
1852-
value={formData.apiKey}
1853-
type="text"
1854-
placeholder={Locale.CustomProvider.ApiKeyPlaceholder}
1855-
onChange={(e) => handleChange("apiKey", e.currentTarget.value)}
1856-
required
1857-
/>
1851+
<div className={styles.apiKeyNormalView}>
1852+
<PasswordInput
1853+
value={formData.apiKey}
1854+
type="text"
1855+
placeholder={Locale.CustomProvider.ApiKeyPlaceholder}
1856+
onChange={(e) => handleChange("apiKey", e.currentTarget.value)}
1857+
required
1858+
/>
1859+
</div>
18581860
);
18591861
}
18601862
};
@@ -2236,9 +2238,10 @@ export function ProviderModal(props: ProviderModalProps) {
22362238
<ListItem
22372239
title={Locale.CustomProvider.Name}
22382240
subTitle={Locale.CustomProvider.NameSubtitle}
2241+
vertical={isMobileScreen}
22392242
>
22402243
<input
2241-
style={{ width: "300px" }}
2244+
className={styles.providerFormInput}
22422245
type="text"
22432246
value={formData.name}
22442247
placeholder={Locale.CustomProvider.NamePlaceholder}
@@ -2249,9 +2252,10 @@ export function ProviderModal(props: ProviderModalProps) {
22492252
<ListItem
22502253
title={Locale.CustomProvider.CustomAPIService}
22512254
subTitle={Locale.CustomProvider.ApiUrlSubtitle}
2255+
vertical={isMobileScreen}
22522256
>
22532257
<input
2254-
style={{ width: "300px" }}
2258+
className={styles.providerFormInput}
22552259
type="text"
22562260
value={formData.baseUrl}
22572261
placeholder={providerTypeDefaultUrls[formData.type]}
@@ -2276,10 +2280,11 @@ export function ProviderModal(props: ProviderModalProps) {
22762280
<ListItem
22772281
title={Locale.CustomProvider.chatPath.title}
22782282
subTitle={Locale.CustomProvider.chatPath.subtitle}
2283+
vertical={isMobileScreen}
22792284
>
22802285
<input
22812286
type="text"
2282-
style={{ width: "300px" }}
2287+
className={styles.providerFormInput}
22832288
value={formData.paths?.ChatPath || ""}
22842289
placeholder="/v1/chat/completions"
22852290
onChange={(e) =>
@@ -2294,20 +2299,20 @@ export function ProviderModal(props: ProviderModalProps) {
22942299
>
22952300
<input
22962301
type="text"
2297-
style={{ width: "300px" }}
2302+
className={styles.providerFormInput}
22982303
value={formData.paths?.SpeechPath || ""}
22992304
placeholder="/v1/audio/speech"
23002305
onChange={(e) => handlePathChange("SpeechPath", e.target.value)}
23012306
/>
23022307
</ListItem>
2303-
2308+
23042309
<ListItem
23052310
title={Locale.CustomProvider.imagePath.title}
23062311
subTitle={Locale.CustomProvider.imagePath.subtitle}
23072312
>
23082313
<input
23092314
type="text"
2310-
style={{ width: "300px" }}
2315+
className={styles.providerFormInput}
23112316
value={formData.paths?.ImagePath || ""}
23122317
placeholder="/v1/images/generations"
23132318
onChange={(e) => handlePathChange("ImagePath", e.target.value)}
@@ -2317,10 +2322,11 @@ export function ProviderModal(props: ProviderModalProps) {
23172322
<ListItem
23182323
title={Locale.CustomProvider.listModelPath.title}
23192324
subTitle={Locale.CustomProvider.listModelPath.subtitle}
2325+
vertical={isMobileScreen}
23202326
>
23212327
<input
23222328
type="text"
2323-
style={{ width: "300px" }}
2329+
className={styles.providerFormInput}
23242330
value={formData.paths?.ListModelPath || ""}
23252331
placeholder="/v1/models"
23262332
onChange={(e) =>
@@ -2351,7 +2357,8 @@ export function ProviderModal(props: ProviderModalProps) {
23512357
<ListItem
23522358
title="API Key"
23532359
subTitle={Locale.CustomProvider.ApiKeySubtitle}
2354-
vertical={isKeyListViewMode}
2360+
vertical={isKeyListViewMode || isMobileScreen}
2361+
className={isKeyListViewMode ? uiStyles["force-vertical"] : ""}
23552362
>
23562363
{renderApiKeysSection()}
23572364
</ListItem>

‎app/components/ui-lib.module.scss‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@
9595

9696
input[type="text"] {
9797
min-width: 70px;
98-
max-width: 120px;
98+
max-width: 180px;
9999
padding: 6px 8px;
100100
}
101101

@@ -183,6 +183,37 @@
183183
max-width: 200px;
184184
}
185185
}
186+
187+
// 强制使用 mobile vertical 布局（大屏下也生效）
188+
&.force-vertical {
189+
.list-item-desktop {
190+
display: none;
191+
}
192+
193+
.list-item-mobile {
194+
display: flex;
195+
flex-direction: column;
196+
align-items: stretch;
197+
}
198+
199+
.list-header {
200+
width: 100%;
201+
}
202+
203+
.list-item-sub-title {
204+
margin-top: 6px;
205+
}
206+
207+
.list-item-control {
208+
width: 100%;
209+
margin-left: 0;
210+
margin-top: 8px;
211+
}
212+
213+
input[type="text"] {
214+
max-width: 100%;
215+
}
216+
}
186217
}
187218
}
188219

‎app/styles/globals.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -470,9 +470,9 @@ pre {
470470
}
471471

472472
.password-input {
473-
width: 100px;
473+
width: 180px;
474474
min-width: 80px;
475-
max-width: 120px;
475+
max-width: 180px;
476476
}
477477
}
478478

0 commit comments

Comments
 (0)