T2-SD0403/2026Technology-Competition
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: redesign review panel UI + use VS Code theme variables in setup view

Browse Source
This commit is contained in:
范智鹏
2026-07-21 20:35:25 +08:00
parent c96c543cfa
commit d4c3fb9df7
3 changed files with 282 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/panel/webview.ts
+244 -115
View File
@@ -8,6 +8,32 @@ interface PanelMessage {
source?: 'linter' | 'custom' | 'ai';
}
function esc(str: string): string {
return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&quot;').replace(/"/g, '&quot;');
}
function svgIcon(): string {
return `<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#61AFEF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2"/><rect x="9" y="3" width="6" height="4" rx="1"/><path d="M9 14l2 2 4-4"/></svg>`;
}
const SVG_HEADER_ICON = svgIcon();
const BADGE_CLASS: Record<string, string> = { linter: 'badge-linter', custom: 'badge-custom', ai: 'badge-ai' };
const BADGE_LABEL: Record<string, string> = { linter: 'Linter', custom: '自定义', ai: 'AI' };
function badgeHtml(source: string): string {
return `<span class="item-badge ${BADGE_CLASS[source] || 'badge-linter'}">${BADGE_LABEL[source] || source}</span>`;
}
function severityClass(severity: string): string {
switch (severity) {
case 'error': return 'severity-error';
case 'warning': return 'severity-warning';
case 'info': return 'severity-info';
default: return 'severity-info';
}
}
export class ReviewPanel {
public static currentPanel: ReviewPanel | undefined;
private readonly panel: vscode.WebviewPanel;
@@ -19,7 +45,7 @@ export class ReviewPanel {
) {
this.panel = vscode.window.createWebviewPanel(
'codeReviewer.reviewPanel',
'代码审查报告',
'净码特工 · 代码审查报告',
column,
{
enableScripts: true,
@@ -52,23 +78,46 @@ export class ReviewPanel {
}
private buildHtml(report: MergedReport): string {
const total = report.linterCount + report.customRuleCount + report.aiCount;
const errorCount = report.linterDiagnostics.filter(d => d.severity === 'error').length
+ report.customRuleDiagnostics.filter(d => d.severity === 'error').length
+ report.aiFindings.filter(f => f.severity === 'error').length;
const warnCount = report.linterDiagnostics.filter(d => d.severity === 'warning').length
+ report.customRuleDiagnostics.filter(d => d.severity === 'warning').length
+ report.aiFindings.filter(f => f.severity === 'warning').length;
const infoCount = total - errorCount - warnCount;
const fileName = report.filePath.split(/[/\\]/).pop() ?? '';
const errorBanner = report.errors.length > 0
? `<div class="banner banner-error">⚠ ${report.errors.join('; ')}</div>`
const linterErrors = report.linterDiagnostics.filter(d => d.severity === 'error').length;
const linterWarnings = report.linterDiagnostics.filter(d => d.severity === 'warning').length;
const linterInfos = report.linterDiagnostics.filter(d => d.severity === 'info').length;
const customErrors = report.customRuleDiagnostics.filter(d => d.severity === 'error').length;
const customWarnings = report.customRuleDiagnostics.filter(d => d.severity === 'warning').length;
const customInfos = report.customRuleDiagnostics.filter(d => d.severity === 'info').length;
const aiErrors = report.aiFindings.filter(f => f.severity === 'error').length;
const aiWarnings = report.aiFindings.filter(f => f.severity === 'warning').length;
const aiInfos = report.aiFindings.filter(f => f.severity === 'info').length;
const total = report.linterCount + report.customRuleCount + report.aiCount;
const totalErrors = linterErrors + customErrors + aiErrors;
const totalWarnings = linterWarnings + customWarnings + aiWarnings;
const totalInfos = linterInfos + customInfos + aiInfos;
const errorBox = report.errors.length > 0
? `<div class="errors-box"><div class="errors-box-title">✖ 执行错误</div>${report.errors.map(e => `<div class="errors-box-item">${esc(e)}</div>`).join('')}</div>`
: '';
const banner = report.errors.length > 0
? '<div class="banner banner-error">⚠ AI 审查未完成，报告仅包含部分结果</div>'
: report.degraded
? '<div class="banner banner-warn">⚠ 部分 AI 功能不可用</div>'
? '<div class="banner banner-warning">⚠ 部分 AI 功能不可用，报告已降级</div>'
: '';
const fixableLinterSet = new Set(report.fixableLinterIndices);
const fixableCustomSet = new Set(report.fixableCustomIndices);
const tabCount = (e: number, w: number, i: number) => {
const pts: string[] = [];
if (e > 0) { pts.push(`<span class="tab-count tab-count-error">${e}</span>`); }
if (w > 0) { pts.push(`<span class="tab-count tab-count-warning">${w}</span>`); }
if (i > 0) { pts.push(`<span class="tab-count tab-count-info">${i}</span>`); }
return pts.join(' ');
};
const linterToolName = report.adapterNames.length > 0 ? report.adapterNames.join(' + ') : '静态分析';
return `<!DOCTYPE html>
<html lang="zh">
<head>
@@ -77,157 +126,237 @@ export class ReviewPanel {
<title>代码审查报告</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--vscode-font-family); font-size: var(--vscode-font-size); color: var(--vscode-foreground); background: var(--vscode-editor-background); padding: 16px; }
.header { margin-bottom: 16px; }
.header h1 { font-size: 18px; margin-bottom: 4px; }
.header .meta { font-size: 12px; color: var(--vscode-descriptionForeground); }
.banner { padding: 8px 12px; border-radius: 4px; margin-bottom: 12px; font-size: 13px; }
.banner-warn { background: #332B00; border: 1px solid #665C00; color: #FFF3B0; }
.banner-error { background: #330000; border: 1px solid #660000; color: #FFB0B0; }
.stats { display: flex; gap: 12px; margin-bottom: 16px; }
.stat-card { flex: 1; padding: 12px; border-radius: 6px; text-align: center; background: var(--vscode-sideBar-background); }
.stat-card .num { font-size: 24px; font-weight: 600; }
.stat-card .label { font-size: 12px; color: var(--vscode-descriptionForeground); margin-top: 2px; }
.stat-total .num { color: var(--vscode-foreground); }
body { font-family: var(--vscode-font-family); font-size: var(--vscode-font-size); color: var(--vscode-foreground); background: var(--vscode-editor-background); }
.header { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 12px; border-bottom: 1px solid var(--vscode-panel-border); }
.header h2 { font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 8px; color: var(--vscode-foreground); }
.header .meta { color: var(--vscode-descriptionForeground); font-size: 12px; margin-top: 2px; }
.banner { margin: 12px 16px 0; padding: 8px 12px; border-radius: 6px; font-size: 12px; display: flex; align-items: center; gap: 6px; }
.banner-warning { background: rgba(200,160,0,0.15); border: 1px solid rgba(200,160,0,0.35); color: #cca700; }
.banner-error { background: rgba(248,81,73,0.15); border: 1px solid rgba(248,81,73,0.35); color: #f48771; }
.errors-box { margin: 12px 16px 0; padding: 10px 12px; background: rgba(248,81,73,0.1); border: 1px solid rgba(248,81,73,0.3); border-radius: 6px; }
.errors-box-title { font-weight: 600; color: #f48771; font-size: 12px; margin-bottom: 4px; }
.errors-box-item { font-size: 12px; color: #f48771; padding: 2px 0; }
.summary { display: flex; gap: 8px; padding: 12px 16px 0; flex-wrap: wrap; }
.stat-card { flex: 1; min-width: 100px; padding: 10px 12px; border: 1px solid var(--vscode-panel-border); border-radius: 8px; background: var(--vscode-sideBar-background); text-align: center; }
.stat-card .num { font-size: 24px; font-weight: 700; line-height: 1.2; }
.stat-card .label { font-size: 11px; color: var(--vscode-descriptionForeground); margin-top: 1px; }
.stat-error .num { color: #E06C75; }
.stat-warn .num { color: #D19A66; }
.stat-warning .num { color: #D19A66; }
.stat-info .num { color: #61AFEF; }
.tabs { display: flex; gap: 0; margin-bottom: 12px; border-bottom: 1px solid var(--vscode-panel-border); }
.tab { padding: 8px 16px; cursor: pointer; border: none; background: none; color: var(--vscode-descriptionForeground); font-family: var(--vscode-font-family); font-size: 13px; border-bottom: 2px solid transparent; }
.stat-total .num { color: var(--vscode-foreground); }
.tab-bar { display: flex; align-items: stretch; margin: 16px 16px 0; border-bottom: 1px solid var(--vscode-panel-border); }
.tab { position: relative; display: flex; align-items: center; gap: 6px; padding: 8px 16px; font-size: 13px; font-weight: 500; color: var(--vscode-descriptionForeground); cursor: pointer; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; user-select: none; white-space: nowrap; background: none; border-top: none; border-left: none; border-right: none; font-family: var(--vscode-font-family); }
.tab:hover { color: var(--vscode-foreground); }
.tab.active { color: var(--vscode-foreground); border-bottom-color: #7C3AED; }
.tab .count { margin-left: 6px; font-size: 11px; opacity: 0.7; }
.issue-list { display: none; }
.issue-list.active { display: block; }
.issue { padding: 8px 12px; border-radius: 4px; margin-bottom: 6px; background: var(--vscode-sideBar-background); cursor: pointer; display: flex; justify-content: space-between; align-items: flex-start; }
.issue:hover { background: var(--vscode-list-hoverBackground); }
.issue-left { flex: 1; }
.issue-title { font-size: 13px; margin-bottom: 2px; }
.issue-detail { font-size: 12px; color: var(--vscode-descriptionForeground); }
.issue-actions { display: flex; gap: 4px; flex-shrink: 0; }
.btn { padding: 2px 8px; border-radius: 3px; border: 1px solid var(--vscode-button-border); background: var(--vscode-button-secondaryBackground); color: var(--vscode-button-secondaryForeground); cursor: pointer; font-size: 11px; }
.tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 11px; font-weight: 500; line-height: 1; }
.tab-count-error { background: rgba(224,108,117,0.2); color: #E06C75; }
.tab-count-warning { background: rgba(209,154,102,0.2); color: #D19A66; }
.tab-count-info { background: rgba(97,175,239,0.2); color: #61AFEF; }
.tab-content { display: none; padding: 8px 16px 20px; }
.tab-content.active { display: block; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; padding-top: 12px; }
.section-header:first-child { padding-top: 0; }
.section-header-title { font-size: 12px; font-weight: 600; color: var(--vscode-descriptionForeground); text-transform: uppercase; letter-spacing: .03em; }
.item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; margin-top: 6px; border: 1px solid var(--vscode-panel-border); border-radius: 8px; background: var(--vscode-sideBar-background); cursor: pointer; transition: border-color .15s, background .15s; }
.item:first-child { margin-top: 0; }
.item:hover { border-color: var(--vscode-focusBorder); background: var(--vscode-list-hoverBackground); }
.item.expanded { border-color: var(--vscode-focusBorder); }
.item-severity { flex-shrink: 0; width: 5px; align-self: stretch; border-radius: 3px; margin: -10px 0 -10px -12px; border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.item-severity-error { background: #E06C75; }
.item-severity-warning { background: #D19A66; }
.item-severity-info { background: #61AFEF; }
.item-body { flex: 1; min-width: 0; }
.item-row1 { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.item-icon { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.icon-error { background: #E06C75; }
.icon-warning { background: #D19A66; }
.icon-info { background: #61AFEF; }
.item-badge { display: inline-flex; align-items: center; padding: 0 7px; height: 20px; border-radius: 5px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; flex-shrink: 0; line-height: 1; }
.badge-linter { background: rgba(139,148,158,0.15); color: var(--vscode-descriptionForeground); }
.badge-custom { background: rgba(191,133,255,0.15); color: #ce93d8; }
.badge-ai { background: rgba(79,195,247,0.15); color: #4dd0e1; }
.item-message { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--vscode-foreground); font-size: 14px; }
.item-line { flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--vscode-descriptionForeground); font-family: 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace; background: rgba(139,148,158,0.08); padding: 1px 6px; border-radius: 4px; line-height: 20px; cursor: pointer; }
.item-line:hover { background: rgba(139,148,158,0.2); }
.item-rule { flex-shrink: 0; font-size: 12px; color: var(--vscode-descriptionForeground); font-family: 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-fix { flex-shrink: 0; padding: 2px 8px; border: 1px solid var(--vscode-panel-border); background: var(--vscode-button-secondaryBackground); color: var(--vscode-button-secondaryForeground); border-radius: 4px; cursor: pointer; font-size: 11px; transition: background .15s; line-height: 18px; }
.item-fix:hover { background: var(--vscode-button-secondaryHoverBackground); }
.item-fix:disabled { opacity: .4; cursor: not-allowed; }
.item-detail { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--vscode-panel-border); }
.item.expanded .item-detail { display: block; animation: fadeSlideIn .2s ease; }
@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.detail-text { color: var(--vscode-descriptionForeground); font-size: 13px; line-height: 1.7; }
.detail-text code { font-family: 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 13px; }
.detail-suggestion { margin-top: 8px; padding: 8px 12px; background: rgba(97,175,239,0.08); border: 1px solid rgba(97,175,239,0.2); border-radius: 6px; font-size: 13px; color: #79c0ff; }
.detail-original { margin-top: 6px; font-size: 12px; color: var(--vscode-descriptionForeground); font-style: italic; }
.detail-category { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; background: rgba(139,148,158,0.1); color: var(--vscode-descriptionForeground); margin-top: 6px; }
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 20px; color: var(--vscode-descriptionForeground); text-align: center; font-style: italic; font-size: 13px; }
.actions { display: flex; gap: 8px; padding: 16px 16px 20px; border-top: 1px solid var(--vscode-panel-border); }
.btn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border: 1px solid var(--vscode-panel-border); background: var(--vscode-button-secondaryBackground); color: var(--vscode-button-secondaryForeground); border-radius: 6px; cursor: pointer; font-size: 12px; transition: background .15s, border-color .15s; font-family: var(--vscode-font-family); }
.btn:hover { background: var(--vscode-button-secondaryHoverBackground); }
.btn-primary { background: #7C3AED; border-color: #7C3AED; color: #fff; }
.btn-primary { background: #7C3AED; color: #fff; border-color: #7C3AED; }
.btn-primary:hover { background: #6D28D9; }
.severity { display: inline-block; width: 16px; text-align: center; }
.actions { display: flex; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--vscode-panel-border); }
.empty { text-align: center; padding: 24px; color: var(--vscode-descriptionForeground); font-size: 13px; }
</style>
</head>
<body>
<div class="header">
<h1>📋 代码审查报告</h1>
<div class="meta">${fileName} · ${report.language} · ${(report.duration / 1000).toFixed(1)}s</div>
<div>
<h2>${SVG_HEADER_ICON} 净码特工 · 代码审查报告</h2>
<div class="meta">${esc(fileName)} · ${esc(report.language)} · ${(report.duration / 1000).toFixed(1)}s</div>
</div>
</div>
${errorBanner}
<div class="stats">
<div class="stat-card stat-total"><div class="num">${total}</div><div class="label">总计</div></div>
<div class="stat-card stat-error"><div class="num">${errorCount}</div><div class="label">错误</div></div>
<div class="stat-card stat-warn"><div class="num">${warnCount}</div><div class="label">警告</div></div>
<div class="stat-card stat-info"><div class="num">${infoCount}</div><div class="label">建议</div></div>
${banner}
${errorBox}
<div class="summary">
<div class="stat-card stat-total"><div class="num">${total}</div><div class="label">总计问题</div></div>
<div class="stat-card stat-error"><div class="num">${totalErrors}</div><div class="label">错误</div></div>
<div class="stat-card stat-warning"><div class="num">${totalWarnings}</div><div class="label">警告</div></div>
<div class="stat-card stat-info"><div class="num">${totalInfos}</div><div class="label">建议</div></div>
</div>
<div class="tabs">
<button class="tab active" onclick="switchTab('linter')">🔧 静态分析 <span class="count">${report.linterCount}</span></button>
<button class="tab" onclick="switchTab('custom')">📋 自定义规则 <span class="count">${report.customRuleCount}</span></button>
<button class="tab" onclick="switchTab('ai')">🤖 AI 审查 <span class="count">${report.aiCount}</span></button>
<div class="tab-bar">
<button class="tab active" data-tab="linter" onclick="switchTab('linter')">🔧 ${report.adapterNames.length > 0 ? report.adapterNames.join(' + ') : '静态分析'} ${tabCount(linterErrors, linterWarnings, linterInfos)}</button>
<button class="tab" data-tab="custom" onclick="switchTab('custom')">📋 自定义规则 ${tabCount(customErrors, customWarnings, customInfos)}</button>
<button class="tab" data-tab="ai" onclick="switchTab('ai')">🤖 AI 审查 ${tabCount(aiErrors, aiWarnings, aiInfos)}</button>
</div>
<div id="tab-linter" class="issue-list active">
${this.buildLinterList(report)}
<div class="tab-content active" id="tab-linter">
${this.buildLinterList(report, fixableLinterSet)}
</div>
<div id="tab-custom" class="issue-list">
${this.buildCustomList(report)}
<div class="tab-content" id="tab-custom">
${this.buildCustomList(report, fixableCustomSet)}
</div>
<div id="tab-ai" class="issue-list">
<div class="tab-content" id="tab-ai">
${this.buildAIList(report)}
</div>
<div class="actions">
<button class="btn btn-primary" onclick="send('rerun')">🔄 重新审查</button>
<button class="btn" onclick="send('export')">📄 导出</button>
<button class="btn" onclick="send('export')">📄 导出报告</button>
<button class="btn" onclick="send('settings')">⚙️ 设置</button>
<button class="btn" onclick="send('fixAll')">🔧 批量修复</button>
</div>
<script>
const vscode = acquireVsCodeApi();
function send(type, line, ruleId, source) {
vscode.postMessage({ type, line, ruleId, source });
}
function switchTab(name) {
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
document.querySelectorAll('.issue-list').forEach(l => l.classList.remove('active'));
event.target.classList.add('active');
document.getElementById('tab-' + name).classList.add('active');
function switchTab(tabId) {
document.querySelectorAll('.tab').forEach(function(t) { t.classList.remove('active'); });
document.querySelectorAll('.tab-content').forEach(function(tc) { tc.classList.remove('active'); });
document.querySelector('.tab[data-tab="' + tabId + '"]').classList.add('active');
document.getElementById('tab-' + tabId).classList.add('active');
}
function toggleItem(el) {
if (event.target.closest('button')) return;
if (event.target.closest('.item-line')) return;
el.classList.toggle('expanded');
}
</script>
</body>
</html>`;
}
private buildLinterList(report: MergedReport): string {
private buildLinterList(report: MergedReport, fixableSet: Set<number>): string {
if (report.linterDiagnostics.length === 0) {
return '<div class="empty">✅ 静态分析未发现问题</div>';
return '<div class="empty">未发现任何问题</div>';
}
return report.linterDiagnostics.map((d, i) => `
<div class="issue" onclick="send('navigate', ${d.range.start.line}, '${this.escape(d.ruleId)}', 'linter')">
<div class="issue-left">
<div class="issue-title"><span class="severity">${this.sevIcon(d.severity)}</span> <code>${this.escape(d.ruleId)}</code> L${d.range.start.line + 1}</div>
<div class="issue-detail">${this.escape(d.message)}</div>
${d.suggestion ? `<div class="issue-detail">建议: ${this.escape(d.suggestion)}</div>` : ''}
</div>
<div class="issue-actions">
<button class="btn" onclick="event.stopPropagation();send('fix', ${d.range.start.line}, '${this.escape(d.ruleId)}', 'linter')">修复</button>
</div>
</div>`).join('');
const toolName = report.adapterNames.length > 0 ? report.adapterNames.join(' + ') : '静态分析';
const hasFixable = fixableSet.size > 0;
return `<div class="section-header"><span class="section-header-title">${esc(toolName)} · ${report.linterCount} 个问题</span>${hasFixable ? '<button class="btn" onclick="send(\'fixAll\')">全部修复</button>' : ''}</div>`
+ report.linterDiagnostics.map((d, i) => this.buildIssueItem(d.severity, d.ruleId, d.message, d.range.start.line, 'linter', d.suggestion, fixableSet.has(i), undefined, false)).join('');
}
private buildCustomList(report: MergedReport): string {
private buildCustomList(report: MergedReport, fixableSet: Set<number>): string {
if (report.customRuleDiagnostics.length === 0) {
return '<div class="empty">✅ 自定义规则未发现问题</div>';
return '<div class="empty">未发现规则违规</div>';
}
return report.customRuleDiagnostics.map((d, i) => `
<div class="issue" onclick="send('navigate', ${d.range.start.line}, '${this.escape(d.ruleId)}', 'custom')">
<div class="issue-left">
<div class="issue-title"><span class="severity">${this.sevIcon(d.severity)}</span> <code>${this.escape(d.ruleId)}</code> L${d.range.start.line + 1}</div>
<div class="issue-detail">${this.escape(d.message)}</div>
</div>
<div class="issue-actions">
<button class="btn" onclick="event.stopPropagation();send('fix', ${d.range.start.line}, '${this.escape(d.ruleId)}', 'custom')">修复</button>
</div>
</div>`).join('');
const hasFixable = fixableSet.size > 0;
return `<div class="section-header"><span class="section-header-title">自定义规则 · ${report.customRuleCount} 个问题</span>${hasFixable ? '<button class="btn" onclick="send(\'fixAll\')">全部修复</button>' : ''}</div>`
+ report.customRuleDiagnostics.map((d, i) => this.buildIssueItem(d.severity, d.ruleId, d.message, d.range.start.line, 'custom', d.suggestion, fixableSet.has(i), undefined, false)).join('');
}
private buildAIList(report: MergedReport): string {
if (report.aiFindings.length === 0) {
return '<div class="empty">🤖 AI 审查未发现新问题</div>';
return '<div class="empty">无 AI 审查建议</div>';
}
const parts: string[] = [];
const parts: string[] = ['<div class="section-header"><span class="section-header-title">AI 审查建议 · ' + report.aiCount + ' 条</span></div>'];
for (const f of report.aiFindings) {
parts.push(`
<div class="issue" onclick="send('navigate', ${f.line}, '${this.escape(f.ruleId)}', 'ai')">
<div class="issue-left">
<div class="issue-title"><span class="severity">${this.sevIcon(f.severity)}</span> [${f.category}] <strong>${this.escape(f.title)}</strong></div>
<div class="issue-detail">${this.escape(f.description)}</div>
${f.suggestion ? `<div class="issue-detail">建议: ${this.escape(f.suggestion)}</div>` : ''}
</div>
<div class="issue-actions">
<button class="btn" onclick="event.stopPropagation();send('fix', ${f.line}, '${this.escape(f.ruleId)}', 'ai')">修复</button>
</div>
</div>`);
const details: string[] = [];
details.push(`<div class="detail-text">${esc(f.description)}</div>`);
if (f.category) {
details.push(`<span class="detail-category">🎯 ${esc(f.category)}</span>`);
}
if (f.suggestion) {
details.push(`<div class="detail-suggestion">💡 ${esc(f.suggestion)}</div>`);
}
parts.push(this.buildIssueItem(f.severity, f.ruleId, f.title, f.line, 'ai', f.suggestion, true, details.join('')));
}
return parts.join('');
}
private sevIcon(severity: string): string {
switch (severity) {
case 'error': return '🔴';
case 'warning': return '🟡';
case 'info': return '🔵';
default: return '⚪';
}
}
private buildIssueItem(
severity: string,
ruleId: string,
message: string,
line: number,
source: string,
suggestion?: string,
fixable?: boolean,
detailHtml?: string,
expandable: boolean = true
): string {
const sevCls = severityClass(severity);
const lineNum = line + 1;
const parts: string[] = [];
private escape(str: string): string {
return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
parts.push(`<div class="item"${expandable ? ' onclick="toggleItem(this)"' : ''}>`);
parts.push(`<div class="item-severity item-severity-${sevCls.replace('severity-', '')}"></div>`);
parts.push('<div class="item-body">');
parts.push('<div class="item-row1">');
parts.push(`<span class="item-icon icon-${sevCls.replace('severity-', '')}"></span>`);
parts.push(badgeHtml(source));
parts.push(`<span class="item-rule">${esc(ruleId)}</span>`);
parts.push(`<span class="item-message">${esc(message)}</span>`);
parts.push(`<span class="item-line" onclick="event.stopPropagation();send('navigate', ${line}, '${esc(ruleId)}', '${source}')">L${lineNum}</span>`);
if (fixable) {
parts.push(`<button class="item-fix" onclick="event.stopPropagation(); this.disabled=true; this.textContent='⏳...';send('fix', ${line}, '${esc(ruleId)}', '${source}')">🔧 修复</button>`);
}
parts.push('</div>');
if (expandable && (detailHtml || (suggestion && suggestion !== message))) {
parts.push('<div class="item-detail">');
if (detailHtml) {
parts.push(detailHtml);
} else if (suggestion) {
parts.push(`<div class="detail-suggestion">💡 ${esc(suggestion)}</div>`);
}
parts.push('</div>');
}
parts.push('</div>');
parts.push('</div>');
return parts.join('');
}
private handleMessage(message: PanelMessage): void {
src/views/setupView.ts
+35 -34
View File
@@ -280,11 +280,12 @@ export class SetupViewProvider implements vscode.WebviewViewProvider {
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--vscode-sideBar-background, var(--vscode-editor-background)); }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #0d1117;
color: #c9d1d9;
font-size: 13px;
font-family: var(--vscode-font-family);
font-size: var(--vscode-font-size);
color: var(--vscode-foreground);
background: var(--vscode-sideBar-background, var(--vscode-editor-background));
line-height: 1.5;
padding: 12px;
}
@@ -293,42 +294,42 @@ body {
/* Header */
.panel-header {
display: flex; align-items: center; gap: 8px;
padding: 10px 0 14px; font-size: 15px; font-weight: 600; color: #e6edf3;
border-bottom: 1px solid #21262d; margin-bottom: 12px;
padding: 10px 0 14px; font-size: 15px; font-weight: 600; color: var(--vscode-foreground);
border-bottom: 1px solid var(--vscode-panel-border); margin-bottom: 12px;
}
/* Section */
.section { margin-bottom: 16px; }
.section-title {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; color: #8b949e; margin-bottom: 8px;
letter-spacing: .04em; color: var(--vscode-descriptionForeground); margin-bottom: 8px;
}
/* Getting Started */
.getting-started {
background: #0d1117; border: 1px solid #21262d;
background: var(--vscode-sideBar-background, var(--vscode-editor-background)); border: 1px solid var(--vscode-panel-border);
border-radius: 8px; padding: 12px;
}
.gs-title {
display: flex; align-items: center; gap: 8px;
font-size: 13px; font-weight: 600; color: #e6edf3;
font-size: 13px; font-weight: 600; color: var(--vscode-foreground);
margin-bottom: 10px;
}
.gs-title-dot {
width: 8px; height: 8px; border-radius: 50%; background: #8b5cf6;
}
.gs-steps { display: flex; flex-direction: column; gap: 10px; }
.gs-step { display: flex; gap: 8px; font-size: 13px; color: #c9d1d9; line-height: 1.6; }
.gs-step { display: flex; gap: 8px; font-size: 13px; color: var(--vscode-foreground); line-height: 1.6; }
.gs-step-num {
flex-shrink: 0;
width: 20px; height: 20px; border-radius: 50%;
background: #21262d; color: #8b949e;
background: var(--vscode-panel-border); color: var(--vscode-descriptionForeground);
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700;
margin-top: 1px;
}
.gs-step-body { display: flex; flex-direction: column; gap: 4px; }
.gs-step-hint { font-size: 11px; color: #8b949e; }
.gs-step-hint { font-size: 11px; color: var(--vscode-descriptionForeground); }
.gs-step-done .gs-step-num { background: #3fb950; color: #fff; }
.gs-step-skip .gs-step-num { background: #f0883e; color: #fff; }
@@ -336,19 +337,19 @@ body {
.engines { display: flex; flex-direction: row; gap: 6px; }
.engine-tab {
flex: 1; display: flex; flex-direction: column; gap: 4px;
padding: 10px; border: 1px solid #21262d;
border-radius: 6px; background: #0d1117;
padding: 10px; border: 1px solid var(--vscode-panel-border);
border-radius: 6px; background: var(--vscode-sideBar-background, var(--vscode-editor-background));
}
.engine-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot-purple { background: #8b5cf6; }
.dot-amber { background: #d29922; }
.dot-green { background: #3fb950; }
.engine-label { font-size: 13px; color: #e6edf3; }
.engine-desc { font-size: 11px; color: #8b949e; }
.engine-label { font-size: 13px; color: var(--vscode-foreground); }
.engine-desc { font-size: 11px; color: var(--vscode-descriptionForeground); }
/* Card */
.card {
background: #0d1117; border: 1px solid #21262d;
background: var(--vscode-sideBar-background, var(--vscode-editor-background)); border: 1px solid var(--vscode-panel-border);
border-radius: 8px; padding: 10px 12px;
}
.card-row {
@@ -356,7 +357,7 @@ body {
justify-content: space-between; margin-bottom: 6px;
}
.card-row:last-child { margin-bottom: 0; }
.card-label { font-size: 12px; color: #8b949e; }
.card-label { font-size: 12px; color: var(--vscode-descriptionForeground); }
/* Badge */
.badge {
@@ -365,18 +366,18 @@ body {
font-size: 11px; font-weight: 600; line-height: 18px;
}
.badge-configured { background: rgba(35, 134, 54, 0.15); color: #3fb950; }
.badge-unconfigured { background: rgba(139, 148, 158, 0.12); color: #8b949e; }
.badge-unconfigured { background: rgba(139, 148, 158, 0.12); color: var(--vscode-descriptionForeground); }
/* Field */
.field { margin-bottom: 8px; }
.field:last-child { margin-bottom: 0; }
.field-label {
display: block; font-size: 12px; color: #8b949e; margin-bottom: 3px;
display: block; font-size: 12px; color: var(--vscode-descriptionForeground); margin-bottom: 3px;
}
select, input[type="text"], input[type="password"] {
width: 100%; padding: 6px 10px;
background: #0d1117; border: 1px solid #30363d;
border-radius: 6px; color: #e6edf3;
background: var(--vscode-input-background); border: 1px solid var(--vscode-input-border, var(--vscode-panel-border));
border-radius: 6px; color: var(--vscode-input-foreground);
font-size: 13px; font-family: inherit; outline: none;
}
select:focus, input:focus { border-color: #8b5cf6; }
@@ -386,8 +387,8 @@ select {
background-repeat: no-repeat; background-position: right 8px center;
padding-right: 30px; cursor: pointer;
}
input::placeholder { color: #484f58; }
.field-hint { font-size: 11px; color: #484f58; margin-top: 4px; }
input::placeholder { color: var(--vscode-input-placeholderForeground, var(--vscode-descriptionForeground)); }
.field-hint { font-size: 11px; color: var(--vscode-descriptionForeground); margin-top: 4px; }
/* Input group */
.input-group { display: flex; gap: 4px; }
@@ -397,13 +398,13 @@ input::placeholder { color: #484f58; }
/* Buttons */
.btn {
display: inline-flex; align-items: center; gap: 4px;
padding: 5px 12px; border: 1px solid #30363d;
background: #21262d; color: #c9d1d9;
padding: 5px 12px; border: 1px solid var(--vscode-panel-border);
background: var(--vscode-button-secondaryBackground); color: var(--vscode-button-secondaryForeground);
border-radius: 6px; cursor: pointer; font-size: 12px;
transition: background .15s, border-color .15s; white-space: nowrap;
justify-content: center;
}
.btn:hover { background: #30363d; }
.btn:hover { background: var(--vscode-button-secondaryHoverBackground); }
.btn-primary { background: #7c3aed; color: #fff; border-color: #7c3aed; }
.btn-primary:hover { background: #8b5cf6; }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }
@@ -417,13 +418,13 @@ input::placeholder { color: #484f58; }
.switch input { display: none; }
.switch-track {
width: 100%; height: 100%; border-radius: 9px;
background: #30363d; transition: background .2s;
background: var(--vscode-panel-border); transition: background .2s;
}
.switch input:checked + .switch-track { background: #7c3aed; }
.switch-thumb {
position: absolute; top: 2px; left: 2px;
width: 14px; height: 14px; border-radius: 50%;
background: #e6edf3; transition: transform .2s;
background: var(--vscode-foreground); transition: transform .2s;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.switch input:checked ~ .switch-thumb { transform: translateX(14px); }
@@ -432,19 +433,19 @@ input::placeholder { color: #484f58; }
.rule-item {
display: flex; align-items: center; gap: 8px;
padding: 6px 8px; margin-top: 4px;
border: 1px solid #21262d; border-radius: 6px;
background: #0d1117;
border: 1px solid var(--vscode-panel-border); border-radius: 6px;
background: var(--vscode-sideBar-background, var(--vscode-editor-background));
}
.rule-item:first-child { margin-top: 0; }
.rule-name {
flex: 1; font-size: 13px;
font-family: 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
color: #e6edf3; overflow: hidden;
color: var(--vscode-foreground); overflow: hidden;
text-overflow: ellipsis; white-space: nowrap;
}
.rule-del {
flex-shrink: 0; width: 20px; height: 20px; border-radius: 4px;
border: none; background: transparent; color: #8b949e;
border: none; background: transparent; color: var(--vscode-descriptionForeground);
font-size: 14px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: color .15s, background .15s;
@@ -452,7 +453,7 @@ input::placeholder { color: #484f58; }
.rule-del:hover { color: #f48771; background: rgba(248,81,73,0.15); }
/* Actions */
.actions { display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid #21262d; }
.actions { display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid var(--vscode-panel-border); }
.actions .btn { flex: 1; justify-content: center; }
/* Toast */