feat:设置最小宽度

- 小于最小宽度就自动关闭面板并且提供提示
This commit is contained in:
Roe-xin
2026-01-10 09:18:00 +08:00
parent feff8ea4d3
commit 4687c3faa6
2 changed files with 138 additions and 27 deletions

View File

@ -33,10 +33,10 @@ function getTierIconUri(
}
const tierIconMap: Record<string, string> = {
'BASIC': 'free.png',
'TRIAL': 'PRO-Try.png',
'ADVANCED': 'PRO.png',
'PROFESSIONAL': 'PRO+.png'
BASIC: "free.png",
TRIAL: "PRO-Try.png",
ADVANCED: "PRO.png",
PROFESSIONAL: "PRO+.png",
};
const iconFile = tierIconMap[tierCode];
@ -45,7 +45,13 @@ function getTierIconUri(
}
const iconUri = webview.asWebviewUri(
vscode.Uri.joinPath(context.extensionUri, 'src', 'assets', 'titleIcon', iconFile)
vscode.Uri.joinPath(
context.extensionUri,
"src",
"assets",
"titleIcon",
iconFile
)
);
return iconUri.toString();
@ -94,7 +100,7 @@ export async function showICHelperPanel(
retainContextWhenHidden: true,
localResourceRoots: [
vscode.Uri.joinPath(context.extensionUri, "media"),
vscode.Uri.joinPath(context.extensionUri, "src", "assets")
vscode.Uri.joinPath(context.extensionUri, "src", "assets"),
],
}
);
@ -119,16 +125,40 @@ export async function showICHelperPanel(
// 获取模型图标URI
const autoIconUri = panel.webview.asWebviewUri(
vscode.Uri.joinPath(context.extensionUri, "src", "assets", "model", "Auto.png")
vscode.Uri.joinPath(
context.extensionUri,
"src",
"assets",
"model",
"Auto.png"
)
);
const liteIconUri = panel.webview.asWebviewUri(
vscode.Uri.joinPath(context.extensionUri, "src", "assets", "model", "lite.png")
vscode.Uri.joinPath(
context.extensionUri,
"src",
"assets",
"model",
"lite.png"
)
);
const syIconUri = panel.webview.asWebviewUri(
vscode.Uri.joinPath(context.extensionUri, "src", "assets", "model", "Sy.png")
vscode.Uri.joinPath(
context.extensionUri,
"src",
"assets",
"model",
"Sy.png"
)
);
const maxIconUri = panel.webview.asWebviewUri(
vscode.Uri.joinPath(context.extensionUri, "src", "assets", "model", "Max.png")
vscode.Uri.joinPath(
context.extensionUri,
"src",
"assets",
"model",
"Max.png"
)
);
// 设置HTML内容
@ -147,16 +177,20 @@ export async function showICHelperPanel(
if (userInfo) {
// 使用缓存的用户信息
console.log('[ICHelperPanel] 使用缓存的用户信息:', userInfo);
const tierIconUrl = getTierIconUri(panel.webview, context, userInfo.membership?.tierCode);
console.log("[ICHelperPanel] 使用缓存的用户信息:", userInfo);
const tierIconUrl = getTierIconUri(
panel.webview,
context,
userInfo.membership?.tierCode
);
panel.webview.postMessage({
command: 'updateUserInfo',
command: "updateUserInfo",
userInfo: {
userId: userInfo.userId,
nickname: userInfo.nickname,
username: userInfo.username
username: userInfo.username,
},
tierIconUrl: tierIconUrl
tierIconUrl: tierIconUrl,
});
} else {
// 如果没有缓存,从 session 中获取
@ -164,19 +198,22 @@ export async function showICHelperPanel(
createIfNone: false,
});
if (session) {
console.log('[ICHelperPanel] 从 session 获取用户信息, account:', session.account);
console.log(
"[ICHelperPanel] 从 session 获取用户信息, account:",
session.account
);
panel.webview.postMessage({
command: 'updateUserInfo',
command: "updateUserInfo",
userInfo: {
userId: session.account.id,
nickname: session.account.label,
username: session.account.label
}
username: session.account.label,
},
});
}
}
} catch (error) {
console.error('[ICHelperPanel] 获取用户信息失败:', error);
console.error("[ICHelperPanel] 获取用户信息失败:", error);
}
// 处理消息
@ -213,7 +250,7 @@ export async function showICHelperPanel(
historyManager.switchToPanelTask(panelId);
// 显示进度条
panel.webview.postMessage({ type: 'showProgress' });
panel.webview.postMessage({ type: "showProgress" });
handleUserMessage(
panel,
@ -249,7 +286,10 @@ export async function showICHelperPanel(
case "openWaveformViewer":
// 在新列中打开波形查看器
if (message.vcdFilePath) {
vscode.commands.executeCommand('ic-coder.openVCDViewer', message.vcdFilePath);
vscode.commands.executeCommand(
"ic-coder.openVCDViewer",
message.vcdFilePath
);
}
break;
case "getVCDInfo":
@ -392,7 +432,11 @@ export async function showICHelperPanel(
try {
const items = fs.readdirSync(dir, { withFileTypes: true });
for (const item of items) {
if (item.isDirectory() && item.name !== "node_modules" && !item.name.startsWith(".")) {
if (
item.isDirectory() &&
item.name !== "node_modules" &&
!item.name.startsWith(".")
) {
const fullPath = path.join(dir, item.name);
const relativePath = path.relative(baseDir, fullPath);
folders.push({ path: fullPath, relativePath });
@ -421,7 +465,7 @@ export async function showICHelperPanel(
canSelectMany: true,
openLabel: "选择图片",
filters: {
"图片文件": ["png", "jpg", "jpeg", "gif", "bmp", "svg", "webp"],
: ["png", "jpg", "jpeg", "gif", "bmp", "svg", "webp"],
},
});
if (imageUris && imageUris.length > 0) {
@ -441,8 +485,8 @@ export async function showICHelperPanel(
canSelectMany: true,
openLabel: "选择文档",
filters: {
"文档文件": ["pdf", "doc", "docx", "txt", "md"],
"所有文件": ["*"],
: ["pdf", "doc", "docx", "txt", "md"],
: ["*"],
},
});
if (docUris && docUris.length > 0) {
@ -478,6 +522,29 @@ export async function showICHelperPanel(
hasWorkspace: hasWorkspace,
});
break;
// 新增:处理面板宽度不足
case "panelWidthInsufficient":
// 关闭面板
panel.dispose();
vscode.window.showWarningMessage(
"聊天面板宽度不足(最小 200px已自动关闭"
);
break;
}
},
undefined,
context.subscriptions
);
// 监听面板状态变化,检查宽度
panel.onDidChangeViewState(
(e) => {
if (e.webviewPanel.visible) {
// 请求前端检查宽度
panel.webview.postMessage({
command: "checkPanelWidth",
minWidth: 200,
});
}
},
undefined,

View File

@ -632,6 +632,21 @@ export function getWebviewContent(
}
break;
case 'checkPanelWidth':
// 检查面板宽度
const minWidth = message.minWidth || 200;
const currentWidth = document.body.clientWidth;
console.log('[WebView] 检查面板宽度:', currentWidth, '最小宽度:', minWidth);
if (currentWidth < minWidth) {
// 宽度不足,通知后端关闭面板
vscode.postMessage({
command: 'panelWidthInsufficient',
currentWidth: currentWidth,
minWidth: minWidth
});
}
break;
case 'vcdInfo':
// 渲染迷你波形预览信息
try {
@ -742,6 +757,35 @@ export function getWebviewContent(
}
});
// 监听窗口大小变化,检查面板宽度
let resizeTimer;
const MIN_PANEL_WIDTH = 500;
function checkPanelWidth() {
const currentWidth = document.body.clientWidth;
if (currentWidth < MIN_PANEL_WIDTH) {
console.log('[WebView] 面板宽度不足:', currentWidth, 'px最小要求:', MIN_PANEL_WIDTH, 'px');
vscode.postMessage({
command: 'panelWidthInsufficient',
currentWidth: currentWidth,
minWidth: MIN_PANEL_WIDTH
});
}
}
window.addEventListener('resize', () => {
// 使用防抖,避免频繁检查
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
checkPanelWidth();
}, 300);
});
// 初始加载时也检查一次
setTimeout(() => {
checkPanelWidth();
}, 500);
${getMessageAreaScript()}
${getAgentCardScript()}
${getWaveformPreviewScript()}