Merge pull request #318 from ccagml/main

ccagml · web-flow · commit f5cb63688b49 · 2024-04-10T09:36:07.000+08:00
fix(打开webview的相关界面): 修改加载css样式的写法
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+# version 3.1.22
+
+- 修改预览题目、题解的样式加载方式,原本的方式在高版本的 VS Code 会加载失败 401 错误,导致界面很乱
+
 # version 3.1.21
 
 - 修改国际站修改登录方式 cRUL 方式登录,解决国际站不能提交使用的问题
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
     "name": "vscode-leetcode-problem-rating",
     "displayName": "LeetCode",
     "description": "%main.description%",
-    "version": "3.1.21",
+    "version": "3.1.22",
     "author": "ccagml",
     "publisher": "ccagml",
     "license": "MIT",
diff --git a/src/commitResult/CommitResultModule.ts b/src/commitResult/CommitResultModule.ts
@@ -89,7 +89,7 @@ class SubmissionService extends BaseWebViewService {
   }
 
   protected getWebviewContent(): string {
-    const styles: string = markdownService.getStyles();
+    const styles: string = markdownService.getStyles(this.panel);
     const title: string = `## ${this.result.messages[0]}`;
     if (this.result?.costTime && this.result?.costTime.length > 0) {
       this.result.messages.push(this.result?.costTime[0]);
diff --git a/src/preView/PreviewModule.ts b/src/preView/PreviewModule.ts
@@ -110,7 +110,7 @@ class PreviewService extends BaseWebViewService {
             <html>
             <head>
                 <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src https:; script-src vscode-resource: 'unsafe-inline'; style-src vscode-resource: 'unsafe-inline';"/>
-                ${markdownService.getStyles()}
+                ${markdownService.getStyles(this.panel)}
                 ${!this.sideMode ? button.style : ""}
                 <style>
                     code { white-space: pre-wrap; }
diff --git a/src/service/MarkdownService.ts b/src/service/MarkdownService.ts
@@ -50,30 +50,29 @@ class MarkdownService implements vscode.Disposable {
     return this.engine.render(md, env);
   }
 
-  public getStyles(): string {
-    return [this.getBuiltinStyles(), this.getSettingsStyles()].join(os.EOL);
+  public getStyles(panel: vscode.WebviewPanel | undefined): string {
+    return [this.getBuiltinStyles(panel), this.getDefaultStyle()].join(os.EOL);
   }
 
-  private getBuiltinStyles(): string {
+  private getBuiltinStyles(panel: vscode.WebviewPanel | undefined): string {
     let styles: vscode.Uri[] = [];
     try {
       const stylePaths: string[] = require(path.join(this.config.extRoot, "package.json"))["contributes"][
         "markdown.previewStyles"
       ];
       styles = stylePaths.map((p: string) =>
-        vscode.Uri.file(path.join(this.config.extRoot, p)).with({
-          scheme: "vscode-resource",
-        })
+        vscode.Uri.file(path.join(this.config.extRoot, p))
       );
     } catch (error) {
       BABA.getProxy(BabaStr.LogOutputProxy).get_log().appendLine("[Error] Fail to load built-in markdown style file.");
     }
-    return styles
-      .map((style: vscode.Uri) => `<link rel="stylesheet" type="text/css" href="${style.toString()}">`)
+    let bbb = styles
+      .map((style: vscode.Uri) => `<link rel="stylesheet" type="text/css" href="${panel?.webview.asWebviewUri(style)}">`)
       .join(os.EOL);
+    return bbb
   }
 
-  private getSettingsStyles(): string {
+  private getDefaultStyle(): string {
     return [
       `<style>`,
       `body {`,
diff --git a/src/solution/SolutionModule.ts b/src/solution/SolutionModule.ts
@@ -7,7 +7,7 @@
  * Copyright (c) 2022 ccagml . All rights reserved.
  */
 
-import { ViewColumn } from "vscode";
+import { ViewColumn, Uri } from "vscode";
 import { BaseWebViewService } from "../service/BaseWebviewService";
 import { markdownService } from "../service/MarkdownService";
 import { IWebViewOption } from "../model/ConstDefind";
@@ -59,7 +59,7 @@ class SolutionService extends BaseWebViewService {
   }
 
   private getHintsContent(): string {
-    const styles: string = markdownService.getStyles();
+    const styles: string = markdownService.getStyles(this.panel);
     let h = this.hints;
     let body: Array<any> = [];
     if (h.length == 0) {
@@ -71,21 +71,25 @@ class SolutionService extends BaseWebViewService {
         body.push(hint_body);
       }
     }
+
+    let kates_css_path = path.join(
+      __dirname,
+      "..",
+      "..",
+      "..",
+      "resources",
+      "katexcss",
+      "kates.min.css"
+    )
+    const catGifSrc = this.panel?.webview.asWebviewUri(Uri.file(kates_css_path));
+
     return `
             <!DOCTYPE html>
             <html>
             <head>
                 <meta http-equiv="Content-Security-Policy" content="default-src self; img-src vscode-resource:; script-src vscode-resource: 'self' 'unsafe-inline'; style-src vscode-resource: 'self' 'unsafe-inline'; "/>
                 ${styles}
-                <link rel="stylesheet" type="text/css" href= "vscode-resource:${path.join(
-                  __dirname,
-                  "..",
-                  "..",
-                  "..",
-                  "resources",
-                  "katexcss",
-                  "kates.min.css"
-                )}">
+                <link rel="stylesheet" type="text/css" href= "${catGifSrc}">
             </head>
             <body class="vscode-body 'scrollBeyondLastLine' 'wordWrap' 'showEditorSelection'" style="tab-size:4">
                 ${body.join("\n")}
@@ -95,7 +99,7 @@ class SolutionService extends BaseWebViewService {
   }
 
   private getSolutionContent(): string {
-    const styles: string = markdownService.getStyles();
+    const styles: string = markdownService.getStyles(this.panel);
     const { title, url, lang, author, votes } = this.solution;
     const head: string = markdownService.render(`# [${title}](${url})`);
     const auth: string = this.solution.is_cn
@@ -120,22 +124,16 @@ class SolutionService extends BaseWebViewService {
     });
     // "<link rel=\"stylesheet\" type=\"text/css\" href=\"vscode-resource:/home/cc/.vscode-server/bin/30d9c6cd9483b2cc586687151bcbcd635f373630/extensions/markdown-language-features/media/markdown.css\">\n<link rel=\"stylesheet\" type=\"text/css\" href=\"vscode-resource:/home/cc/.vscode-server/bin/30d9c6cd9483b2cc586687151bcbcd635f373630/extensions/markdown-language-features/media/highlight.css\">\n<style>\nbody {\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, 'Ubuntu', 'Droid Sans', sans-serif;\n    font-size: 14px;\n    line-height: 1.6;\n}\n</style>"
     // <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src https:; script-src vscode-resource:; style-src vscode-resource:;"/>
+    let kates_css_path = path.join(__dirname, "..", "..", "..", "resources", "katexcss", "kates.min.css")
+    const catGifSrc = this.panel?.webview.asWebviewUri(Uri.file(kates_css_path));
 
     return `
             <!DOCTYPE html>
             <html>
             <head>
                 <meta http-equiv="Content-Security-Policy" content="default-src self; img-src vscode-resource:; script-src vscode-resource: 'self' 'unsafe-inline'; style-src vscode-resource: 'self' 'unsafe-inline'; "/>
                 ${styles}
-                <link rel="stylesheet" type="text/css" href= "vscode-resource:${path.join(
-                  __dirname,
-                  "..",
-                  "..",
-                  "..",
-                  "resources",
-                  "katexcss",
-                  "kates.min.css"
-                )}">
+                <link rel="stylesheet" type="text/css" href= "${catGifSrc}">
             </head>
             <body class="vscode-body 'scrollBeyondLastLine' 'wordWrap' 'showEditorSelection'" style="tab-size:4">
                 ${head}

Original file line number	Diff line number	Diff line change
`@@ -89,7 +89,7 @@ class SubmissionService extends BaseWebViewService {`
`89`	`89`	`}`
`90`	`90`
`91`	`91`	`protected getWebviewContent(): string {`
`92`		`- const styles: string = markdownService.getStyles();`
	`92`	`+ const styles: string = markdownService.getStyles(this.panel);`
`93`	`93`	const title: string = `## ${this.result.messages[0]}`;
`94`	`94`	`if (this.result?.costTime && this.result?.costTime.length > 0) {`
`95`	`95`	`this.result.messages.push(this.result?.costTime[0]);`