文档支持从工作区获取

补全文档tab页开发文档关键代码记录

doc/文档tab页.md

@@ -2,6 +2,26 @@
 
 ## 文档页面实现功能
 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)
     - 左侧为标题目录
@@ -126,7 +146,9 @@
                 return { document, editor }
             }
             ```
-若需要改为标题或列表, 修改 renderer 的对应方法以及触发跳转
 
-https://marked.nodejs.cn/using_pro#hooks
-![alt text](image-1.png)
+
+1. 插件信息与修改: 若需要改为标题或列表, 修改 renderer 的对应方法以及触发跳转, 渲染的元素添加类名
+
+    [marked使用文档](https://marked.nodejs.cn/using_pro#hooks)
+    ![alt text](image-1.png)

src/extension/ChatViewProvider.ts

@@ -538,7 +538,23 @@ export class ChatViewProvider implements vscode.WebviewViewProvider {
   fetchMdFile(message: ListenerParam, webview: WebviewViewIns): false | void {
     if (message.type !== 'loadMd') { return false }
     if (message.mdPath) {
-      const filePath = path.join(this._extensionUri.fsPath, 'webview', 'dist', message.mdPath!.replace('__localWebViewPath/', ''))
+      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路径')
       try {
         const content = fs.readFileSync(filePath, 'utf-8')
         webview.postMessage({ type: 'mdContent', data: content })

webview/src/components/DocCodePanel.vue

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

webview/src/components/MarkdownViewer.vue

@@ -185,7 +185,7 @@ const loadMarkdownFile = async () => {
     loading.value = true;
     error.value = null;
     let fetchMdPms
-    if (filePath.startsWith('__localWebViewPath/')) {
+    if (filePath.startsWith('__localWebViewPath/') || filePath.startsWith('__localWorkspacePath/')) {
       if (!window.vscodeApi) {
         console.error('获取__localWebViewPath的md文档时, 无法获取VSCode API')
         return