feat(vscode-extension): add varlet documentation and varlet playground btns

packages/varlet-vscode-extension/package.json

@@ -15,6 +15,10 @@
   ],
   "contributes": {
     "commands": [
+      {
+        "command": "varlet.open-documentation",
+        "title": "Varlet: Open Varlet UI Documentation"
+      },
       {
         "command": "varlet.open-playground",
         "title": "Varlet: Open Varlet UI Playground"
@@ -26,6 +30,11 @@
     ],
     "menus": {
       "editor/context": [
+        {
+          "command": "varlet.open-documentation",
+          "group": "navigation",
+          "when": "editorHasSelection"
+        },
         {
           "command": "varlet.open-playground",
           "group": "navigation",
@@ -81,4 +90,4 @@
     "@types/vscode": "^1.56.0",
     "typescript": "^4.4.4"
   }
-}
+}

packages/varlet-vscode-extension/src/commands.ts

@@ -1,5 +1,6 @@
-import { PLAYGROUND } from './constant'
+import { PLAYGROUND, DOCUMENTATION_EN, DOCUMENTATION_ZH } from './constant'
 import { commands, window, Selection, env, Uri, Range } from 'vscode'
+import { getLanguage } from './env'
 
 function openPlayground(wrapTemplate = false) {
   const { activeTextEditor } = window
@@ -26,6 +27,11 @@ function openPlayground(wrapTemplate = false) {
   env.openExternal(Uri.parse(`${PLAYGROUND}#${hash}`))
 }
 
+function openDocumentation() {
+  const language = getLanguage()
+  env.openExternal(Uri.parse(language === 'en-US' ? DOCUMENTATION_EN : DOCUMENTATION_ZH))
+}
+
 export function registerCommands() {
   commands.registerCommand('varlet.move-cursor', (characterDelta: number) => {
     const active = window.activeTextEditor!.selection.active!
@@ -37,6 +43,10 @@ export function registerCommands() {
     openPlayground()
   })
 
+  commands.registerCommand('varlet.open-documentation', () => {
+    openDocumentation()
+  })
+
   commands.registerCommand('varlet.open-playground-and-wrap-template-tag', () => {
     openPlayground(true)
   })

packages/varlet-vscode-extension/src/extension.ts

@@ -1,12 +1,14 @@
 import { registerCompletions } from './completions'
 import { registerCommands } from './commands'
 import { registerHover } from './hover'
-import { type ExtensionContext } from 'vscode'
+import { registerStatusBarItems } from './statusBarItems'
+import type { ExtensionContext } from 'vscode'
 
 export function activate(context: ExtensionContext) {
   registerCommands()
   registerCompletions(context)
   registerHover(context)
+  registerStatusBarItems()
 }
 
 export function deactivate() {}

packages/varlet-vscode-extension/src/statusBarItems.ts

@@ -0,0 +1,25 @@
+import { StatusBarAlignment, window } from 'vscode'
+
+export function registerStatusBarItems() {
+  const statusBarList = [
+    {
+      name: 'Varlet Documentation',
+      priority: 0,
+      command: 'varlet.open-documentation',
+      tooltip: 'Open Varlet Documentation',
+    },
+    {
+      name: 'Varlet Playground',
+      priority: 0,
+      command: 'varlet.open-playground',
+      tooltip: 'Open Varlet Playground',
+    },
+  ]
+  statusBarList.forEach((item) => {
+    const statusBar = window.createStatusBarItem(StatusBarAlignment.Left, item.priority)
+    statusBar.command = item.command
+    statusBar.text = item.name
+    statusBar.tooltip = item.tooltip
+    statusBar.show()
+  })
+}