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(
"ic-coder.mainView",
viewProvider

52
src/views/ICViewProvider.ts
View File

@ -4,12 +4,15 @@ import * as vscode from "vscode";
* 侧边栏视图提供者
*/
export class ICViewProvider implements vscode.WebviewViewProvider {
constructor(private readonly extensionUri: vscode.Uri) {}
resolveWebviewView(webviewView: vscode.WebviewView) {
webviewView.webview.options = {
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) => {
@ -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 `
<!DOCTYPE html>
<html>
<head>
<style>
body {
padding: 10px;
margin: 0;
padding: 0;
font-family: var(--vscode-font-family);
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 {
width: 100%;
width: 200px;
padding: 8px 12px;
margin: 4px 0;
background: var(--vscode-button-background);
@ -44,9 +74,6 @@ export class ICViewProvider implements vscode.WebviewViewProvider {
.btn:hover {
background: var(--vscode-button-hoverBackground);
}
.section {
margin: 15px 0;
}
h3 {
margin: 0 0 8px 0;
font-size: 12px;
@ -55,13 +82,10 @@ export class ICViewProvider implements vscode.WebviewViewProvider {
</style>
</head>
<body>
<button class="btn" onclick="openChat()">💬 打开聊天助手</button>
<div class="section">
<h3>快速生成</h3>
<button class="btn" onclick="generateCode('counter')">🔢 计数器</button>
<button class="btn" onclick="generateCode('fsm')">🔄 状态机</button>
<button class="btn" onclick="generateCode('fifo')">📦 FIFO</button>
<div class="container">
<img src="${logoUri}" alt="IC Coder" width="120" />
<h2>欢迎使用 IC Coder</h2>
<button class="btn" onclick="openChat()">开始创作</button>
</div>
<script>