ishangsf/DeepCodeGenius-vscode
2
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: ishangsf:main
Branches Tags
ishangsf:main
jiajun.song:main
..
compare: jiajun.song:main
Branches Tags
jiajun.song:main
ishangsf:main

1 Commits
main ... main

Author SHA1 Message Date
jiajun.song
76c084c38c 添加文档tab页 2025-04-26 13:15:30 +08:00
8 changed files with 42 additions and 308 deletions
Show Stats Expand all files Collapse all files

BIN
doc/image-1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 79 KiB

BIN
doc/image.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 130 KiB

154
doc/文档tab页.md
View File

@ -1,154 +0,0 @@
# 文档页面开发记录
## 文档页面实现功能
1. 文档分页获取文件为markdown格式
代码示例
```html
<!-- webview\src\components\DocCodePanel.vue -->
<template>
<MarkdownViewer :file-path="filePath"/>
</template>
<script>
// 文档路径
// const filePath = ref('__localWebViewPath/ruanjian.md')
const filePath = ref('__localWorkspacePath/ruanjian.md')
</script>
```
- 文件支持的路径及修改方式
1. 支持插件自身目录
filePath的值以 `__localWebViewPath/` 开头
2. 支持工作区目录
filePath的值以 `__localWorkspacePath/` 开头
2. 布局:
![alt 布局](image.png)
- 左侧为标题目录
1. 支持折叠展开
1. 支持点击时 右侧文档滚动到对应位置
- 右侧为文档主题
1. 支持展示图片
1. 支持特殊标记实现点击时打开工作区内文件中的某个函数
目前暂定格式与示例\
示例:
[打开vscode中的src/test.js:testFunction](__workspace/src/test.js?functionName=resolveTripleslashReference)
格式:
[显示文字](__workspace/[文件的相对路径]?functionName=[函数名])
关键代码:
``` js
///webview\src\components\MarkdownViewer.vue
/// ...
const renderLink = renderer.link
const handleDelegateClick = (event) => {
// 通过事件冒泡捕获目标元素
const target = event.target.closest('.openFileAndGoToFunction')
if (target) {
const { filepath, functionname } = target.dataset
console.log(filepath, functionname, '_**=== filepath, functionname');
console.log(target.dataset, '_**=== target.dataset');
if (window.acquireVsCodeApi && window.vscodeApi) {
window.vscodeApi.postMessage({
type: 'openFileAndGoToFunction',
filePath: filepath,
functionName: functionname
});
}
}
}
renderer.link = function (src) {
// 工作区跳转
if (src.href.startsWith("__workspace/")) {
const { href, title, tokens } = src
const text = renderer.parser.parseInline(tokens);
// const cleanHref = cleanUrl(href);
const titleTip = href.slice("__workspace/".length);
const [filePath, functionName] = titleTip.split('?functionName=')
console.log(filePath, functionName, '_**=== filePath, functionName');
return `<a href="javascript:void 0" class="openFileAndGoToFunction" title="点击打开关联文件函数: ${titleTip}" data-href="${href}" data-filepath="${filePath}" data-functionname="${functionName}">${text}</a>`
}
return renderLink.call(renderer, src);
}
```
```typescript
// src\extension\ChatViewProvider.ts
async openFileAndGoToFunction(message: ListenerParam): Promise<void | false> {
if (message.type !== 'openFileAndGoToFunction') { return false };
const rootUri = vscode.workspace.workspaceFolders?.[0]?.uri;
const filePath = message.filePath; // 确保路径正确，相对于工作区
this._logger(rootUri + '#####' + filePath)
const targetFunc = message.functionName
if (!filePath || !targetFunc) {
vscode.window.showWarningMessage(`未提供文件: ${filePath} 或函数: ${targetFunc}`)
return
}
try {
// 打开文件
const docInfo = await this.openWorkspaceFile(filePath);
if (!docInfo) {
vscode.window.showWarningMessage(`无法打开或创建文件: ${filePath}`)
return
}
const { editor, document } = docInfo
// 获取文档符号
const symbols = await vscode.commands.executeCommand<vscode.DocumentSymbol[]>(
'vscode.executeDocumentSymbolProvider',
document.uri
)
if (symbols) {
const funcSymbol = this.findFunction(symbols, targetFunc)
if (funcSymbol) {
// 跳转到目标位置
editor.revealRange(funcSymbol.range, vscode.TextEditorRevealType.InCenter)
editor.selection = new vscode.Selection(funcSymbol.range.start, funcSymbol.range.end)
} else {
vscode.window.showWarningMessage(`未找到函数 ${targetFunc}`)
}
}
} catch (error) {
vscode.window.showErrorMessage(`无法打开文件: ${error}`)
}
}
// 打开工作区的文件
async openWorkspaceFile(relativePath: string) {
// 1. 获取工作区根路径
const workspaceRoot = vscode.workspace.workspaceFolders?.[0]?.uri;
if (!workspaceRoot) {
vscode.window.showErrorMessage(" 未检测到工作区");
return;
}
// 2. 拼接完整路径（自动处理跨平台路径）
const targetUri = vscode.Uri.joinPath(workspaceRoot, relativePath);
// 3. 文件存在性检测
try {
await vscode.workspace.fs.stat(targetUri);
} catch {
const createNew = await vscode.window.showInformationMessage(
"文件不存在，是否创建？",
"创建", "取消"
);
if (createNew === "创建") {
await vscode.workspace.fs.writeFile(targetUri, Buffer.from(""));
} else {
return;
}
}
this._logger(targetUri + ':::targetUri')
// 4. 打开文件编辑器
const document = await vscode.workspace.openTextDocument(targetUri);
const editor = await vscode.window.showTextDocument(document);
return { document, editor }
}
```
1. 插件信息与修改: 若需要改为标题或列表, 修改 renderer 的对应方法以及触发跳转, 渲染的元素添加类名
[marked使用文档](https://marked.nodejs.cn/using_pro#hooks)
![alt text](image-1.png)

82
src/extension/ChatViewProvider.ts
View File

@ -486,38 +486,34 @@ export class ChatViewProvider implements vscode.WebviewViewProvider {
}
findFunction(symbols: vscode.DocumentSymbol[], name: string): vscode.DocumentSymbol | false {
for (const symbol of symbols) {
if (symbol.kind === vscode.SymbolKind.Function && symbol.name === name) {
return symbol;
}
if (symbol.children) {
const found = this.findFunction(symbol.children, name);
if (found) return found;
}
if (symbol.kind === vscode.SymbolKind.Function && symbol.name === name) {
return symbol;
}
if (symbol.children) {
const found = this.findFunction(symbol.children, name);
if (found) return found;
}
}
return false;
}
async openFileAndGoToFunction(message: ListenerParam): Promise<void | false> {
if (message.type !== 'openFileAndGoToFunction') { return false };
const rootUri = vscode.workspace.workspaceFolders?.[0]?.uri;
const filePath = message.filePath; // 确保路径正确，相对于工作区
this._logger(rootUri + '#####' + filePath)
const filePath = message.filePath; // 确保路径正确，可以是绝对路径或相对于工作区
const targetFunc = message.functionName
if (!filePath || !targetFunc) {
if (!filePath || !targetFunc){
vscode.window.showWarningMessage(`未提供文件: ${filePath} 或函数: ${targetFunc}`)
return
}
try {
// 打开文件
const docInfo = await this.openWorkspaceFile(filePath);
if (!docInfo) {
vscode.window.showWarningMessage(`无法打开或创建文件: ${filePath}`)
return
}
const { editor, document } = docInfo
const uri = vscode.Uri.file(filePath)
const doc = await vscode.workspace.openTextDocument(uri)
const editor = await vscode.window.showTextDocument(doc)
// 获取文档符号
const symbols = await vscode.commands.executeCommand<vscode.DocumentSymbol[]>(
'vscode.executeDocumentSymbolProvider',
document.uri
doc.uri
)
if (symbols) {
@ -538,23 +534,7 @@ export class ChatViewProvider implements vscode.WebviewViewProvider {
fetchMdFile(message: ListenerParam, webview: WebviewViewIns): false | void {
if (message.type !== 'loadMd') { return false }
if (message.mdPath) {
let filePath
const isFromWorkspace = message.mdPath.startsWith('__localWorkspacePath/')
if (isFromWorkspace) {
// 1. 获取工作区根路径
const workspaceRoot = vscode.workspace.workspaceFolders?.[0]?.uri;
if (!workspaceRoot) {
vscode.window.showErrorMessage(" 未检测到工作区");
return;
}
// 2. 拼接完整路径（自动处理跨平台路径）
filePath = vscode.Uri.joinPath(workspaceRoot, message.mdPath.replace('__localWorkspacePath/', '')).fsPath;
// filePath = path.join(workspaceRoot.toString(), message.mdPath.replace('__localWorkspacePath/', ''))
} else {
filePath = path.join(this._extensionUri.fsPath, 'webview', 'dist', message.mdPath.replace('__localWebViewPath/', ''))
}
this._logger(filePath + '::: 当前md路径')
const filePath = path.join(this._extensionUri.fsPath, 'webview', 'dist', message.mdPath!.replace('__localWebViewPath/', ''))
try {
const content = fs.readFileSync(filePath, 'utf-8')
webview.postMessage({ type: 'mdContent', data: content })
@ -566,36 +546,4 @@ export class ChatViewProvider implements vscode.WebviewViewProvider {
}
webview.postMessage({ type: 'mdContent', data: '未正确传入md文件路径' })
}
// 打开工作区的文件
async openWorkspaceFile(relativePath: string) {
// 1. 获取工作区根路径
const workspaceRoot = vscode.workspace.workspaceFolders?.[0]?.uri;
if (!workspaceRoot) {
vscode.window.showErrorMessage(" 未检测到工作区");
return;
}
// 2. 拼接完整路径（自动处理跨平台路径）
const targetUri = vscode.Uri.joinPath(workspaceRoot, relativePath);
// 3. 文件存在性检测
try {
await vscode.workspace.fs.stat(targetUri);
} catch {
const createNew = await vscode.window.showInformationMessage(
"文件不存在，是否创建？",
"创建", "取消"
);
if (createNew === "创建") {
await vscode.workspace.fs.writeFile(targetUri, Buffer.from(""));
} else {
return;
}
}
this._logger(targetUri + ':::targetUri')
// 4. 打开文件编辑器
const document = await vscode.workspace.openTextDocument(targetUri);
const editor = await vscode.window.showTextDocument(document);
return { document, editor }
}
}

7
webview/public/ruanjian.md
View File

@ -37,9 +37,4 @@
- **快速主题与滤镜**
- 全局主题与滤镜：支持全局主题设置，用户可以一键切换不同的主题风格，包括颜色、字体、背景等元素，快速调整数据可视化的整体视觉效果。同时，提供滤镜功能，用户可以对图表进行美化处理，如添加阴影、渐变色等效果，提升数据可视化的美观度。
![image](https://img-s.msn.cn/tenant/amp/entityid/AA1DBjm3.img?w=768&h=512&m=6)
示例:
[打开vscode中的src/test.js:testFunction](__workspace/src/test.js?functionName=resolveTripleslashReference)
格式:
[显示文字](__workspace/[文件的相对路径]?functionName=[函数名])
![image-20250420143847485](./assets/image-20250420143847485.png)

15
webview/src/components/DocCodePanel.vue
View File

@ -11,14 +11,11 @@
import { ref } from 'vue';
import Header from './Header.vue';
import MarkdownViewer from './MarkdownViewer.vue';
// 文档路径
// const filePath = ref('__localWebViewPath/ruanjian.md')
const filePath = ref('__localWorkspacePath/ruanjian.md')
// if(!window.acquireVsCodeApi){
// filePath.value = '/ruanjian.md'
// }
/*
//#region 支持ws请求大模型获取doc文档
// 输入框的值
const filePath = ref('__localWebViewPath/ruanjian.md')
if(!window.acquireVsCodeApi){
filePath.value = '/ruanjian.md'
}
if(window.vscodeApi){
window.vscodeApi.postMessage({
type: 'ws:connect',
@ -52,8 +49,6 @@ if(window.vscodeApi){
}
})
}
//#endregion
*/
</script>
<style module lang="scss">

80
webview/src/components/MarkdownViewer.vue
View File

@ -7,12 +7,12 @@
<h2>目录</h2>
</div>
<div class="toc-content">
<MDOutlineTree :data="tocTreeData" />
<MDOutlineTree :data="tocTreeData"/>
</div>
</aside>
<!-- 主内容区域 -->
<main class="content" ref="content" @click="handleDelegateClick">
<main class="content" ref="content">
<div v-if="loading" class="loading-indicator">加载中...</div>
<div v-else-if="error" class="error-message">{{ error }}</div>
<div v-else v-html="renderedContent" class="markdown-content"></div>
@ -74,9 +74,9 @@ renderer.heading = ({ text, depth }) => {
toc.value.push({
id: escapedText,
level: depth,
title: text,
anchor: escapedText
})
title: text,
anchor: escapedText
})
const node = {
key: escapedText,
title: text
@ -106,61 +106,11 @@ renderer.heading = ({ text, depth }) => {
${text}
</h${depth}>`;
};
// 渲染列表
const renderList = renderer.listitem
// 若需改为列表跳转, 可改此函数
renderer.listitem = (src) => {
let renderList = renderer.listitem
renderer.listitem = (src)=>{
return renderList.call(renderer, src);
}
const handleDelegateClick = (event) => {
// 通过事件冒泡捕获目标元素
const target = event.target.closest('.openFileAndGoToFunction')
if (target) {
const { filepath, functionname } = target.dataset
console.log(filepath, functionname, '_**=== filepath, functionname');
console.log(target.dataset, '_**=== target.dataset');
if (window.acquireVsCodeApi && window.vscodeApi) {
window.vscodeApi.postMessage({
type: 'openFileAndGoToFunction',
filePath: filepath,
functionName: functionname
});
}
}
}
const renderLink = renderer.link
renderer.link = function (src) {
/*
{
"type": "link",
"raw": "[打开vscode中的文件1](__workspace/)",
"href": "__workspace/",
"title": null,
"text": "打开vscode中的文件1",
"tokens": [
{
"type": "text",
"raw": "打开vscode中的文件1",
"text": "打开vscode中的文件1",
"escaped": false
}
]
}
*/
// 工作区跳转
if (src.href.startsWith("__workspace/")) {
const { href, title, tokens } = src
const text = renderer.parser.parseInline(tokens);
// const cleanHref = cleanUrl(href);
const titleTip = href.slice("__workspace/".length);
const [filePath, functionName] = titleTip.split('?functionName=')
console.log(filePath, functionName, '_**=== filePath, functionName');
return `<a href="javascript:void 0" class="openFileAndGoToFunction" title="点击打开关联文件函数: ${titleTip}" data-href="${href}" data-filepath="${filePath}" data-functionname="${functionName}">${text}</a>`
}
return renderLink.call(renderer, src);
}
marked.setOptions({
renderer,
highlight: (code, lang) => {
@ -185,8 +135,9 @@ const loadMarkdownFile = async () => {
loading.value = true;
error.value = null;
let fetchMdPms
if (filePath.startsWith('__localWebViewPath/') || filePath.startsWith('__localWorkspacePath/')) {
if (!window.vscodeApi) {
if(filePath.startsWith('__localWebViewPath/')){
if(!window.vscodeApi){
console.error('获取__localWebViewPath的md文档时, 无法获取VSCode API')
return
}
@ -207,7 +158,7 @@ const loadMarkdownFile = async () => {
markdownText.value = event.data.data
}
});
} else {
}else{
fetchMdPms = fetch(props.filePath);
const response = await fetchMdPms
if (!response.ok) throw new Error('无法加载Markdown文件');
@ -227,6 +178,8 @@ const loadMarkdownFile = async () => {
// 渲染Markdown
const renderMarkdown = () => {
console.log(markdownText.value);
toc.value = []; // 清空目录
renderedContent.value = marked(markdownText.value);
// 等待DOM更新后初始化高亮
@ -234,7 +187,6 @@ const renderMarkdown = () => {
document.querySelectorAll('pre code').forEach(block => {
hljs.highlightElement(block);
});
// 懒加载, todo 兼容跳转
// setupHeadingObservers();
});
};
@ -292,7 +244,7 @@ const handleResize = throttle(() => {
}, props.debounceTime);
// 生命周期钩子
onBeforeMount(() => {
onBeforeMount(()=>{
loadMarkdownFile();
})
onMounted(() => {
@ -357,11 +309,9 @@ onUnmounted(() => {
margin: 0;
font-size: 1.2rem;
}
.toc-content {
height: calc(100vh - 200px);
}
.toc-content ul {
list-style: none;
padding: 0;