Update UI styles and add new features for API configurations

coolcline · Feb 15, 2025 · 2dbb62e · 2dbb62e
1 parent 306bde8
commit 2dbb62e
Show file tree

Hide file tree

Showing 12 changed files with 235 additions and 214 deletions.
diff --git a/webview-ui/src/components/common/LanguageSelector.tsx b/webview-ui/src/components/common/LanguageSelector.tsx
@@ -10,7 +10,7 @@ const LanguageSelector = () => {
 
 	return (
 		<div style={{ marginBottom: "20px" }}>
-			<div style={{ marginBottom: "4px", fontWeight: "600" }}>{String(t("prompts.settings.language.title"))}</div>
+			<div style={{ marginBottom: "4px" }}>{String(t("prompts.settings.language.title"))}</div>
 			<select
 				value={preferredLanguage}
 				onChange={(e) => {

diff --git a/webview-ui/src/components/history/HistoryView.tsx b/webview-ui/src/components/history/HistoryView.tsx
@@ -155,7 +155,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 						alignItems: "center",
 						padding: "10px 17px 10px 20px",
 					}}>
-					<h3 style={{ color: "var(--vscode-foreground)", margin: 0 }}>{String(t("history.title"))}</h3>
+					<h3 style={{ fontWeight: "800", fontSize: 15, margin: 0 }}>{String(t("history.title"))}</h3>
 					<VSCodeButton onClick={onDone}>{String(t("common.done"))}</VSCodeButton>
 				</div>
 				<div style={{ padding: "5px 17px 6px 17px" }}>

diff --git a/webview-ui/src/components/mcp/McpView.tsx b/webview-ui/src/components/mcp/McpView.tsx
@@ -48,7 +48,7 @@ const McpView = ({ onDone }: McpViewProps) => {
 					alignItems: "center",
 					padding: "10px 17px 10px 20px",
 				}}>
-				<h3 style={{ color: "var(--vscode-foreground)", margin: 0 }}>{String(t("mcp.title"))}</h3>
+				<h3 style={{ fontWeight: "800", fontSize: 15, margin: 0 }}>{String(t("mcp.title"))}</h3>
 				<VSCodeButton onClick={onDone}>{String(t("common.done"))}</VSCodeButton>
 			</div>
 

diff --git a/webview-ui/src/components/prompts/PromptsView.tsx b/webview-ui/src/components/prompts/PromptsView.tsx
@@ -341,7 +341,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 					alignItems: "center",
 					padding: "10px 17px 10px 20px",
 				}}>
-				<h3 style={{ color: "var(--vscode-foreground)", margin: 0, fontWeight: "600" }}>
+				<h3 style={{ margin: 0, fontWeight: "800", fontSize: 15 }}>
 					{String(t("prompts.settings.modePrompts.title"))}
 				</h3>
 				<VSCodeButton onClick={onDone}>{String(t("common.done"))}</VSCodeButton>
@@ -350,7 +350,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 			<div style={{ flex: 1, overflow: "auto", padding: "0 20px" }}>
 				{/* 基础设置部分 */}
 				<div style={{ paddingBottom: "20px", borderBottom: "1px solid var(--vscode-input-border)" }}>
-					<h3 style={{ color: "var(--vscode-foreground)", margin: "0 0 20px 0", fontWeight: "600" }}>
+					<h3 style={{ margin: "0 0 20px 0", fontWeight: "500" }}>
 						{String(t("prompts.settings.sections.general"))}
 					</h3>
 					<LanguageSelector />
@@ -416,7 +416,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 
 				{/* 角色模式部分 */}
 				<div style={{ marginTop: "20px" }}>
-					<h3 style={{ color: "var(--vscode-foreground)", margin: "0 0 20px 0", fontWeight: "600" }}>
+					<h3 style={{ margin: "0 0 20px 0", fontWeight: "500" }}>
 						{String(t("prompts.settings.sections.modes"))}
 					</h3>
 					<div
@@ -713,7 +713,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 								<div
 									style={{
 										fontSize: "13px",
-										color: "var(--vscode-foreground)",
+
 										marginBottom: "8px",
 										lineHeight: "1.4",
 									}}>
@@ -878,7 +878,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 						paddingBottom: "60px",
 						borderBottom: "1px solid var(--vscode-input-border)",
 					}}>
-					<h3 style={{ color: "var(--vscode-foreground)", margin: "0 0 20px 0", fontWeight: "600" }}>
+					<h3 style={{ margin: "0 0 20px 0", fontWeight: "600" }}>
 						{String(t("prompts.settings.sections.tools"))}
 					</h3>
 					<div
@@ -961,7 +961,6 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 								<div>
 									<div
 										style={{
-											color: "var(--vscode-foreground)",
 											fontSize: "13px",
 											marginBottom: "20px",
 											marginTop: "5px",

diff --git a/webview-ui/src/components/settings/ApiConfigManager.tsx b/webview-ui/src/components/settings/ApiConfigManager.tsx
@@ -90,8 +90,9 @@ const ApiConfigManager = ({
 					display: "flex",
 					flexDirection: "column",
 					gap: "2px",
+					color: "var(--vscode-foreground)",
 				}}>
-				<label htmlFor="config-profile">
+				<label htmlFor="config-profile" style={{ fontWeight: 500 }}>
 					<span>{String(t("settings.provider.configProfile.title"))}</span>
 				</label>
 
@@ -159,7 +160,7 @@ const ApiConfigManager = ({
 									onSelectConfig((value as DropdownOption).value)
 								}}
 								style={{
-									minWidth: 130,
+									width: "100%",
 									zIndex: 1002,
 								}}
 								role="combobox"