feat: DockingPanel

packages/client/components.d.ts

@@ -18,6 +18,7 @@ declare module 'vue' {
     CodeSnippets: typeof import('./src/components/code/CodeSnippets.vue')['default']
     ComponentTreeNode: typeof import('./src/components/components/ComponentTreeNode.vue')['default']
     DevToolsLogo: typeof import('./src/components/common/DevToolsLogo.vue')['default']
+    DockingPanel: typeof import('./src/components/common/DockingPanel.vue')['default']
     Empty: typeof import('./src/components/basic/Empty.vue')['default']
     FilepathItem: typeof import('./src/components/assets/FilepathItem.vue')['default']
     GraphDrawer: typeof import('./src/components/graph/GraphDrawer.vue')['default']

packages/client/src/components/SideNav.vue

@@ -1,11 +1,7 @@
 <script setup lang="ts">
-import { VueButton, VueDropdown, VueIcon } from '@vue/devtools-ui'
+import { VueDropdown } from '@vue/devtools-ui'
 import Logo from '/icon.png'
 import type { Tab } from '~/constants/tab'
-
-async function handleClick() {
-  await trpc.openInBrowser.query(window.location.href)
-}
 </script>
 
 <template>
@@ -28,12 +24,7 @@ async function handleClick() {
           <!-- <img :src="Icon" alt=""> -->
         </button>
         <template #popper>
-          <div flex="~ gap-2" px3 py2>
-            <VueButton outlined type="primary" @click="handleClick">
-              <VueIcon icon="i-carbon-launch" />
-              在浏览器打开
-            </VueButton>
-          </div>
+          <DockingPanel />
         </template>
       </VueDropdown>
     </div>

packages/client/src/components/common/DockingPanel.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { VueButton, VueIcon } from '@vue/devtools-ui'
+
+async function opeInBrowser() {
+  await trpc.openInBrowser.query(window.location.href)
+}
+async function openInClient() {
+  await trpc.openInClient.query()
+}
+function refreshPage() {
+  location.reload()
+}
+</script>
+
+<template>
+  <div>
+    <div px3 py2 border="b base" flex="~ gap-2">
+      <VueButton outlined type="primary" @click="opeInBrowser">
+        <VueIcon icon="i-icon-park-outline:browser-safari" />
+        在浏览器打开
+      </VueButton>
+      <VueButton outlined type="primary" @click="openInClient">
+        <VueIcon icon="i-material-symbols:desktop-windows-outline-sharp" />
+        在客户端打开
+      </VueButton>
+    </div>
+    <div px3 py2 flex="~ gap2">
+      <VueButton outlined type="primary" @click="refreshPage">
+        <VueIcon icon="i-lucide:refresh-cw" />
+        刷新页面
+      </VueButton>
+    </div>
+  </div>
+</template>

packages/client/vite.config.ts

@@ -58,6 +58,9 @@ export default defineConfig({
 
     Components({
       dts: true,
+      dirs: [
+        'src/components',
+      ],
     }),
 
     UnoCSS(),

packages/plugin/src/devtoolServer/index.ts

@@ -12,7 +12,7 @@ import type { ResolvedConfig } from 'vite'
 import { DIR_CLIENT, DIR_TMP_INSPECT } from '../dir'
 import { uniDevToolsPrint } from '../utils/print'
 import type { Options } from '../types'
-import { openInDevtools } from '../openCommands'
+import { openInDevtools, savePort } from '../openCommands'
 import createAppRouter from './rpc/index'
 
 const eventEmitter = new EventEmitter()
@@ -49,8 +49,9 @@ export function createDevtoolServe(
   detectPort(port).then((rightPort) => {
     app.listen(rightPort, () => {
       uniDevToolsPrint(rightPort)
+      savePort(rightPort)
       if (options?.client) {
-        openInDevtools(rightPort)
+        openInDevtools()
       }
     })
   })

packages/plugin/src/devtoolServer/rpc/index.ts

@@ -14,6 +14,7 @@ import { componentRouter } from './component'
 import { piniaRouter } from './pinia'
 import { ConfigRouter } from './config'
 import { GraphRouter } from './graph'
+import { OpenRouter } from './open'
 
 export default function (
   config: ResolvedConfig,
@@ -23,14 +24,6 @@ export default function (
   const { input, subscription } = publicProcedure
 
   const routes = router({
-    openInEditor: input(z.string()).query((opts) => {
-      openInEditor(opts.input, options?.launchEditor ?? 'code')
-    }),
-    openInBrowser: input(z.string()).query(async (opts) => {
-      await openInBrowser(opts.input)
-
-      return { success: true }
-    }),
     sendConsole: input(
       z.object({
         type: z.string(),
@@ -66,6 +59,7 @@ export default function (
 
   return mergeRouters(
     routes,
+    OpenRouter(options),
     GraphRouter(),
     AssetsRouter(config),
     versionRouter(eventEmitter),

packages/plugin/src/devtoolServer/rpc/open.ts

@@ -0,0 +1,23 @@
+import { z } from 'zod'
+import { openInBrowser, openInDevtools, openInEditor } from '../../openCommands'
+import { publicProcedure, router } from './../trpc'
+import type { Options } from './../../types'
+
+export function OpenRouter(options?: Partial<Options>) {
+  const { input, query } = publicProcedure
+
+  return router({
+    openInEditor: input(z.string()).query((opts) => {
+      openInEditor(opts.input, options?.launchEditor ?? 'code')
+    }),
+    openInBrowser: input(z.string()).query(async (opts) => {
+      await openInBrowser(opts.input)
+
+      return { success: true }
+    }),
+    openInClient: query(() => {
+      console.log('openInClien')
+      openInDevtools()
+    }),
+  })
+}

packages/plugin/src/openCommands/index.ts

@@ -25,8 +25,13 @@ export function openInEditor(
   )
 }
 
-export function openInDevtools(port: number) {
-  exec(`ud client ${port}`, (error, stdout, stderr) => {
+let PORT = 5015
+export function savePort(port: number) {
+  PORT = port
+}
+
+export function openInDevtools() {
+  exec(`ud client ${PORT}`, (error, stdout, stderr) => {
     if (error) {
       console.error(`exec error: ${error}`)
       return