From e3e42c804412186eec31a465d4fdeba4b01182fb Mon Sep 17 00:00:00 2001
From: xiahb <940382006@qq.com>
Date: Wed, 24 Jun 2026 15:11:45 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=AE=BE=E8=AE=A1=E8=AF=B4?=
=?UTF-8?q?=E6=98=8E=E5=92=8C=E6=B5=8B=E8=AF=95=E8=AF=B4=E6=98=8E=E6=96=87?=
=?UTF-8?q?=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
docs/14-工作台侧边栏设计说明.md | 329 ++++++++++++++++++
packages/dsp-core/docs/imgs/主界面.png | Bin 0 -> 60783 bytes
.../dsp-core/docs/imgs/工程属性配置.png | Bin 0 -> 176758 bytes
packages/dsp-core/docs/imgs/打开工程.png | Bin 0 -> 174833 bytes
packages/dsp-core/docs/imgs/打开工程1.png | Bin 0 -> 143589 bytes
.../dsp-core/docs/imgs/新建C6X工程.png | Bin 0 -> 136075 bytes
packages/dsp-core/docs/imgs/构建.png | Bin 0 -> 209719 bytes
packages/dsp-core/docs/imgs/构建1.png | Bin 0 -> 145639 bytes
packages/dsp-core/docs/imgs/调试.png | Bin 0 -> 152761 bytes
packages/dsp-core/docs/imgs/调试配置.png | Bin 0 -> 163563 bytes
.../dsp-core/docs/侧边栏测试说明.md | 200 +++++++++++
11 files changed, 529 insertions(+)
create mode 100644 docs/14-工作台侧边栏设计说明.md
create mode 100644 packages/dsp-core/docs/imgs/主界面.png
create mode 100644 packages/dsp-core/docs/imgs/工程属性配置.png
create mode 100644 packages/dsp-core/docs/imgs/打开工程.png
create mode 100644 packages/dsp-core/docs/imgs/打开工程1.png
create mode 100644 packages/dsp-core/docs/imgs/新建C6X工程.png
create mode 100644 packages/dsp-core/docs/imgs/构建.png
create mode 100644 packages/dsp-core/docs/imgs/构建1.png
create mode 100644 packages/dsp-core/docs/imgs/调试.png
create mode 100644 packages/dsp-core/docs/imgs/调试配置.png
create mode 100644 packages/dsp-core/docs/侧边栏测试说明.md
diff --git a/docs/14-工作台侧边栏设计说明.md b/docs/14-工作台侧边栏设计说明.md
new file mode 100644
index 0000000..a20c31a
--- /dev/null
+++ b/docs/14-工作台侧边栏设计说明.md
@@ -0,0 +1,329 @@
+# YHFT DSP 工作台侧边栏设计文档
+
+## 1. 概述
+
+YHFT DSP 工作台是 VSCode 侧边栏中的 Webview 面板,作为 DSP IDE 的统一入口,集中展示环境状态、工程信息和常用操作。用户无需记住命令名称,通过面板按钮即可完成工具安装、工程管理、构建和调试等操作。
+
+### 1.1 设计目标
+
+- **一站式入口**:将分散的 DSP 命令整合到一个可视化面板中
+- **状态感知**:实时显示工具链安装状态、工程上下文、芯片/模块配置
+- **操作引导**:根据当前状态提示下一步操作,降低使用门槛
+- **主题适配**:自动跟随 VSCode 深色/浅色主题
+
+### 1.2 技术栈
+
+- **渲染引擎**:Vue 2 Runtime(通过 `vue.min.js` 引入)
+- **构建工具**:自定义 `build-webview.js` 脚本,从 `.vue` 文件提取 `
+```
+
+### 4.3 命令映射
+
+| 按钮 | VSCode 命令 | 所属模块 |
+|------|-------------|----------|
+| 安装工具包 | `dsp.core.openInstaller` | dsp-core |
+| 修复工具包 | `dsp.core.openInstaller` | dsp-core |
+| 查看安装状态 | `dsp.core.installStatus` | dsp-core |
+| 新建 C6X 工程 | `dspide.project.createC6x` | dsp-mod-project |
+| 打开工程 | `dspide.project.open` | dsp-mod-project |
+| 工程属性配置 | `dspide.project.openPropertyConfig` | dsp-mod-project |
+| 调试配置 | `dspide.project.openDebugConfig` | dsp-mod-project |
+| 构建 | `dspide.build` | dsp-mod-build |
+| 调试 | `dspide.debugStartWithSavedConfig` | dsp-mod-debug |
+| AI 助手 | `ai.application` | dsp-mod-ai |
+
+## 5. 样式设计
+
+### 5.1 主题变量
+
+面板使用 VSCode 内置 CSS 变量,自动适配深色/浅色主题:
+
+| 变量 | 用途 |
+|------|------|
+| `--vscode-sideBar-background` | 页面背景 |
+| `--vscode-foreground` | 主文字颜色 |
+| `--vscode-descriptionForeground` | 描述文字颜色 |
+| `--vscode-badge-background` | 标签背景 |
+| `--vscode-badge-foreground` | 标签文字 |
+| `--vscode-button-background` | 主要按钮背景 |
+| `--vscode-button-foreground` | 主要按钮文字 |
+| `--vscode-button-secondaryBackground` | 次要按钮背景 |
+| `--vscode-button-secondaryForeground` | 次要按钮文字 |
+| `--vscode-textLink-foreground` | 链接颜色 |
+
+### 5.2 按钮样式
+
+- **主要按钮**(如"安装工具包"):使用 `--vscode-button-background`,突出显示
+- **次要按钮**:使用 `--vscode-button-secondaryBackground`,常规显示
+- **圆角**:6px
+- **内边距**:8px 10px
+- **标题**:13px 加粗
+- **描述**:11px,85% 透明度
+
+## 6. 安全设计
+
+### 6.1 CSP 策略
+
+```html
+
+```
+
+- `default-src 'none'`:禁止所有默认资源加载
+- `style-src __CSP_SOURCE__`:只允许扩展自身的样式
+- `script-src 'nonce-__NONCE__'`:只允许带 nonce 的脚本执行
+
+### 6.2 Nonce 机制
+
+每次渲染生成 32 位随机字符串,确保每次加载的 nonce 不同,防止 XSS 攻击。
+
+## 7. 构建流程
+
+### 7.1 构建脚本
+
+`webview/workbench/build-webview.js` 执行以下步骤:
+
+1. 读取 `webview/workbench/src/App.vue` 源码
+2. 提取 `