pengyejiatu/IC-Coder-Plugin
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style:修改侧边栏的打开的样式

Browse Source 
- 新增侧边栏的蓝色渐变的背景色
- 添加了logo展示
- 添加了开启对话的按钮并且具备打开对话框的功能
This commit is contained in:
Roe-xin
2025-12-11 11:36:10 +08:00
parent b3c8344d82
commit 05cbe7d6fd
3 changed files with 39 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
media/IC Coder主页标志.png → media/ICCoder主页标志.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 160 KiB

After

Width:  |  Height:  |  Size: 160 KiB

2
src/extension.ts
View File

@ -22,7 +22,7 @@ export function activate(context: vscode.ExtensionContext) {
); );
// 注册侧边栏视图 // 注册侧边栏视图
const viewProvider = new ICViewProvider(); const viewProvider = new ICViewProvider(context.extensionUri);
const viewRegistration = vscode.window.registerWebviewViewProvider( const viewRegistration = vscode.window.registerWebviewViewProvider(
"ic-coder.mainView", "ic-coder.mainView",
viewProvider viewProvider

52
src/views/ICViewProvider.ts
View File

@ -4,12 +4,15 @@ import * as vscode from "vscode";
* 侧边栏视图提供者 * 侧边栏视图提供者
*/ */
export class ICViewProvider implements vscode.WebviewViewProvider { export class ICViewProvider implements vscode.WebviewViewProvider {
constructor(private readonly extensionUri: vscode.Uri) {}
resolveWebviewView(webviewView: vscode.WebviewView) { resolveWebviewView(webviewView: vscode.WebviewView) {
webviewView.webview.options = { webviewView.webview.options = {
enableScripts: true, enableScripts: true,
localResourceRoots: [vscode.Uri.joinPath(this.extensionUri, "media")],
}; };
webviewView.webview.html = this.getWebviewContent(); webviewView.webview.html = this.getWebviewContent(webviewView.webview);
// 处理侧边栏的消息 // 处理侧边栏的消息
webviewView.webview.onDidReceiveMessage((message) => { webviewView.webview.onDidReceiveMessage((message) => {
@ -19,19 +22,46 @@ export class ICViewProvider implements vscode.WebviewViewProvider {
}); });
} }
private getWebviewContent(): string { private getWebviewContent(webview: vscode.Webview): string {
const logoUri = webview.asWebviewUri(
vscode.Uri.joinPath(this.extensionUri, "media", "ICCoder主页标志.png")
);
return ` return `
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<style> <style>
body { body {
padding: 10px; margin: 0;
padding: 0;
font-family: var(--vscode-font-family); font-family: var(--vscode-font-family);
color: var(--vscode-foreground); color: var(--vscode-foreground);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg,
var(--vscode-editor-background) 0%,
color-mix(in srgb, var(--vscode-editor-background) 85%, var(--vscode-button-background) 15%) 50%,
color-mix(in srgb, var(--vscode-editor-background) 90%, var(--vscode-button-background) 10%) 100%);
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px;
}
.container img {
margin-bottom: 16px;
}
.container h2 {
margin: 0 0 16px 0;
} }
.btn { .btn {
width: 100%; width: 200px;
padding: 8px 12px; padding: 8px 12px;
margin: 4px 0; margin: 4px 0;
background: var(--vscode-button-background); background: var(--vscode-button-background);
@ -44,9 +74,6 @@ export class ICViewProvider implements vscode.WebviewViewProvider {
.btn:hover { .btn:hover {
background: var(--vscode-button-hoverBackground); background: var(--vscode-button-hoverBackground);
} }
.section {
margin: 15px 0;
}
h3 { h3 {
margin: 0 0 8px 0; margin: 0 0 8px 0;
font-size: 12px; font-size: 12px;
@ -55,13 +82,10 @@ export class ICViewProvider implements vscode.WebviewViewProvider {
</style> </style>
</head> </head>
<body> <body>
<button class="btn" onclick="openChat()">💬 打开聊天助手</button> <div class="container">
<img src="${logoUri}" alt="IC Coder" width="120" />
<div class="section"> <h2>欢迎使用 IC Coder</h2>
<h3>快速生成</h3> <button class="btn" onclick="openChat()">开始创作</button>
<button class="btn" onclick="generateCode('counter')">🔢 计数器</button>
<button class="btn" onclick="generateCode('fsm')">🔄 状态机</button>
<button class="btn" onclick="generateCode('fifo')">📦 FIFO</button>
</div> </div>
<script> <script>