mirror of
https://github.com/QwenLM/qwen-code.git
synced 2025-12-19 09:33:53 +00:00
refactor(vscode-ide-companion): 重构 WebViewProvider 初始化逻辑
- 抽离初始化代理连接逻辑到单独的方法中 - 优化面板恢复时的代理连接流程 - 移除 EmptyState 组件中的信息横幅 - 在 App 组件中添加可关闭的信息横幅 - 调整输入表单样式,移除冗余样式
This commit is contained in:
@@ -3,18 +3,18 @@
|
|||||||
* Copyright 2025 Qwen Team
|
* Copyright 2025 Qwen Team
|
||||||
* SPDX-License-Identifier: Apache-2.0
|
* SPDX-License-Identifier: Apache-2.0
|
||||||
*
|
*
|
||||||
* Styles inspired by Claude Code's UI design
|
* Styles inspired by Claude Code's UI design, adapted for Qwen
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/* ===========================
|
/* ===========================
|
||||||
CSS Variables (Root Level)
|
CSS Variables (Root Level)
|
||||||
=========================== */
|
=========================== */
|
||||||
:root {
|
:root {
|
||||||
/* Colors from Claude Code */
|
/* Qwen Brand Colors */
|
||||||
--app-claude-orange: #d97757;
|
--app-qwen-orange: #615fff;
|
||||||
--app-claude-clay-button-orange: #c6613f;
|
--app-qwen-clay-button-orange: #4f46e5;
|
||||||
--app-claude-ivory: #faf9f5;
|
--app-qwen-ivory: #f5f5ff;
|
||||||
--app-claude-slate: #141413;
|
--app-qwen-slate: #141420;
|
||||||
|
|
||||||
/* Spacing */
|
/* Spacing */
|
||||||
--app-spacing-small: 4px;
|
--app-spacing-small: 4px;
|
||||||
@@ -109,6 +109,7 @@ body {
|
|||||||
color: var(--app-primary-foreground);
|
color: var(--app-primary-foreground);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
font-size: var(--vscode-chat-font-size, 13px);
|
font-size: var(--vscode-chat-font-size, 13px);
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
@@ -338,8 +339,8 @@ button {
|
|||||||
=========================== */
|
=========================== */
|
||||||
.input-form {
|
.input-form {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: var(--app-spacing-medium);
|
/* gap: var(--app-spacing-medium); */
|
||||||
padding: 16px;
|
/* padding: 16px; */
|
||||||
background-color: var(--app-primary-background);
|
background-color: var(--app-primary-background);
|
||||||
border-top: 1px solid var(--app-primary-border-color);
|
border-top: 1px solid var(--app-primary-border-color);
|
||||||
}
|
}
|
||||||
@@ -358,7 +359,7 @@ button {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.input-field:focus {
|
.input-field:focus {
|
||||||
border-color: var(--app-claude-orange);
|
border-color: var(--app-qwen-orange);
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-field:disabled {
|
.input-field:disabled {
|
||||||
@@ -372,8 +373,8 @@ button {
|
|||||||
|
|
||||||
.send-button {
|
.send-button {
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
background-color: var(--app-claude-clay-button-orange);
|
background-color: var(--app-qwen-clay-button-orange);
|
||||||
color: var(--app-claude-ivory);
|
color: var(--app-qwen-ivory);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: var(--corner-radius-small);
|
border-radius: var(--corner-radius-small);
|
||||||
font-size: var(--vscode-chat-font-size, 13px);
|
font-size: var(--vscode-chat-font-size, 13px);
|
||||||
@@ -630,7 +631,7 @@ button {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.banner-link {
|
.banner-link {
|
||||||
color: var(--app-claude-orange);
|
color: var(--app-qwen-orange);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
@@ -670,7 +671,7 @@ button {
|
|||||||
/* Outer container (.Me) */
|
/* Outer container (.Me) */
|
||||||
.input-form-container {
|
.input-form-container {
|
||||||
background-color: var(--app-primary-background);
|
background-color: var(--app-primary-background);
|
||||||
padding: 16px;
|
padding: 4px 16px 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Inner wrapper */
|
/* Inner wrapper */
|
||||||
@@ -699,8 +700,7 @@ button {
|
|||||||
|
|
||||||
/* Input wrapper (.fo) */
|
/* Input wrapper (.fo) */
|
||||||
.input-wrapper {
|
.input-wrapper {
|
||||||
/* padding: 16px; */
|
/* padding: 12px 12px 0; */
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Contenteditable input field (.d) */
|
/* Contenteditable input field (.d) */
|
||||||
@@ -708,7 +708,7 @@ button {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 40px;
|
min-height: 40px;
|
||||||
max-height: 200px;
|
max-height: 200px;
|
||||||
padding: 10px 12px;
|
padding: 8px 10px;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: var(--app-input-foreground);
|
color: var(--app-input-foreground);
|
||||||
border: none;
|
border: none;
|
||||||
@@ -739,8 +739,7 @@ button {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
padding: 12px 16px;
|
/* padding: 8px 12px 12px; */
|
||||||
padding-top: 8px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Edit mode button (.l) */
|
/* Edit mode button (.l) */
|
||||||
|
|||||||
@@ -526,7 +526,7 @@ export const App: React.FC = () => {
|
|||||||
role="textbox"
|
role="textbox"
|
||||||
aria-label="Message input"
|
aria-label="Message input"
|
||||||
aria-multiline="true"
|
aria-multiline="true"
|
||||||
data-placeholder="Ask Claude to edit…"
|
data-placeholder="Ask qwen to edit…"
|
||||||
onInput={(e) => {
|
onInput={(e) => {
|
||||||
const target = e.target as HTMLDivElement;
|
const target = e.target as HTMLDivElement;
|
||||||
setInputText(target.textContent || '');
|
setInputText(target.textContent || '');
|
||||||
@@ -544,7 +544,7 @@ export const App: React.FC = () => {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="action-button edit-mode-button"
|
className="action-button edit-mode-button"
|
||||||
title="Claude will ask before each edit. Click to switch modes."
|
title="Qwen will ask before each edit. Click to switch modes."
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
|||||||
Reference in New Issue
Block a user