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

文档tab页支持跳转, 暂定link格式跳转, 格式 [显示文字](__workspace/[文件的相对路径]?functionName=[函数名])

Browse Source
This commit is contained in:
jiajun.song 2025-05-05 12:58:26 +08:00
parent 58682bfb4d
commit f79d071b48
7 changed files with 259 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
doc/image-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

BIN
doc/image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 130 KiB

132
doc/文档tab页.md Normal file
View File

@ -0,0 +1,132 @@
# 文档页面开发记录
## 文档页面实现功能
1. 文档分页获取文件为markdown格式
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 }
}
```
若需要改为标题或列表, 修改 renderer 的对应方法以及触发跳转
https://marked.nodejs.cn/using_pro#hooks
![alt text](image-1.png)

48
src/extension/ChatViewProvider.ts
View File

@ -498,7 +498,9 @@ export class ChatViewProvider implements vscode.WebviewViewProvider {
} }
async openFileAndGoToFunction(message: ListenerParam): Promise<void | false> { async openFileAndGoToFunction(message: ListenerParam): Promise<void | false> {
if (message.type !== 'openFileAndGoToFunction') { return false }; if (message.type !== 'openFileAndGoToFunction') { return false };
const filePath = message.filePath; // 确保路径正确，可以是绝对路径或相对于工作区 const rootUri = vscode.workspace.workspaceFolders?.[0]?.uri;
const filePath = message.filePath; // 确保路径正确，相对于工作区
this._logger(rootUri + '#####' + filePath)
const targetFunc = message.functionName const targetFunc = message.functionName
if (!filePath || !targetFunc) { if (!filePath || !targetFunc) {
vscode.window.showWarningMessage(`未提供文件: ${filePath} 或函数: ${targetFunc}`) vscode.window.showWarningMessage(`未提供文件: ${filePath} 或函数: ${targetFunc}`)
@ -506,14 +508,16 @@ export class ChatViewProvider implements vscode.WebviewViewProvider {
} }
try { try {
// 打开文件 // 打开文件
const uri = vscode.Uri.file(filePath) const docInfo = await this.openWorkspaceFile(filePath);
const doc = await vscode.workspace.openTextDocument(uri) if (!docInfo) {
const editor = await vscode.window.showTextDocument(doc) vscode.window.showWarningMessage(`无法打开或创建文件: ${filePath}`)
return
}
const { editor, document } = docInfo
// 获取文档符号 // 获取文档符号
const symbols = await vscode.commands.executeCommand<vscode.DocumentSymbol[]>( const symbols = await vscode.commands.executeCommand<vscode.DocumentSymbol[]>(
'vscode.executeDocumentSymbolProvider', 'vscode.executeDocumentSymbolProvider',
doc.uri document.uri
) )
if (symbols) { if (symbols) {
@ -546,4 +550,36 @@ export class ChatViewProvider implements vscode.WebviewViewProvider {
} }
webview.postMessage({ type: 'mdContent', data: '未正确传入md文件路径' }) 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,4 +37,9 @@
- **快速主题与滤镜** - **快速主题与滤镜**
- 全局主题与滤镜：支持全局主题设置，用户可以一键切换不同的主题风格，包括颜色、字体、背景等元素，快速调整数据可视化的整体视觉效果。同时，提供滤镜功能，用户可以对图表进行美化处理，如添加阴影、渐变色等效果，提升数据可视化的美观度。 - 全局主题与滤镜：支持全局主题设置，用户可以一键切换不同的主题风格，包括颜色、字体、背景等元素，快速调整数据可视化的整体视觉效果。同时，提供滤镜功能，用户可以对图表进行美化处理，如添加阴影、渐变色等效果，提升数据可视化的美观度。
![image-20250420143847485](./assets/image-20250420143847485.png) ![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=[函数名])

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

@ -12,7 +12,7 @@
</aside> </aside>
<!-- 主内容区域 --> <!-- 主内容区域 -->
<main class="content" ref="content"> <main class="content" ref="content" @click="handleDelegateClick">
<div v-if="loading" class="loading-indicator">加载中...</div> <div v-if="loading" class="loading-indicator">加载中...</div>
<div v-else-if="error" class="error-message">{{ error }}</div> <div v-else-if="error" class="error-message">{{ error }}</div>
<div v-else v-html="renderedContent" class="markdown-content"></div> <div v-else v-html="renderedContent" class="markdown-content"></div>
@ -106,11 +106,61 @@ renderer.heading = ({ text, depth }) => {
${text} ${text}
</h${depth}>`; </h${depth}>`;
}; };
let renderList = renderer.listitem // 渲染列表
const renderList = renderer.listitem
// 若需改为列表跳转, 可改此函数
renderer.listitem = (src) => { renderer.listitem = (src) => {
return renderList.call(renderer, 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({ marked.setOptions({
renderer, renderer,
highlight: (code, lang) => { highlight: (code, lang) => {
@ -135,7 +185,6 @@ const loadMarkdownFile = async () => {
loading.value = true; loading.value = true;
error.value = null; error.value = null;
let fetchMdPms let fetchMdPms
if (filePath.startsWith('__localWebViewPath/')) { if (filePath.startsWith('__localWebViewPath/')) {
if (!window.vscodeApi) { if (!window.vscodeApi) {
console.error('获取__localWebViewPath的md文档时, 无法获取VSCode API') console.error('获取__localWebViewPath的md文档时, 无法获取VSCode API')
@ -178,8 +227,6 @@ const loadMarkdownFile = async () => {
// 渲染Markdown // 渲染Markdown
const renderMarkdown = () => { const renderMarkdown = () => {
console.log(markdownText.value);
toc.value = []; // 清空目录 toc.value = []; // 清空目录
renderedContent.value = marked(markdownText.value); renderedContent.value = marked(markdownText.value);
// 等待DOM更新后初始化高亮 // 等待DOM更新后初始化高亮
@ -187,6 +234,7 @@ const renderMarkdown = () => {
document.querySelectorAll('pre code').forEach(block => { document.querySelectorAll('pre code').forEach(block => {
hljs.highlightElement(block); hljs.highlightElement(block);
}); });
// 懒加载, todo 兼容跳转
// setupHeadingObservers(); // setupHeadingObservers();
}); });
}; };
@ -309,9 +357,11 @@ onUnmounted(() => {
margin: 0; margin: 0;
font-size: 1.2rem; font-size: 1.2rem;
} }
.toc-content { .toc-content {
height: calc(100vh - 200px); height: calc(100vh - 200px);
} }
.toc-content ul { .toc-content ul {
list-style: none; list-style: none;
padding: 0; padding: 0;