feat: document

packages/client/components.d.ts

@@ -17,6 +17,7 @@ declare module 'vue' {
     CodeBlock: typeof import('./src/components/code/CodeBlock.vue')['default']
     CodeSnippets: typeof import('./src/components/code/CodeSnippets.vue')['default']
     ComponentTreeNode: typeof import('./src/components/components/ComponentTreeNode.vue')['default']
+    DevToolsHeader: typeof import('./src/components/basic/DevToolsHeader.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']
@@ -43,6 +44,7 @@ declare module 'vue' {
     StateFieldViewer: typeof import('./src/components/state/StateFieldViewer.vue')['default']
     TabIcon: typeof import('./src/components/TabIcon.vue')['default']
     ToggleExpanded: typeof import('./src/components/basic/ToggleExpanded.vue')['default']
+    TopNav: typeof import('./src/components/basic/TopNav.vue')['default']
     TreeViewer: typeof import('./src/components/tree/TreeViewer.vue')['default']
   }
 }

packages/client/src/components/basic/DevToolsHeader.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { defineProps } from 'vue'
+
+defineProps<{
+  githubRepoLink?: string
+  docLink: string
+}>()
+</script>
+
+<template>
+  <div border="b base" class="flex items-center justify-between px3">
+    <div>
+      <slot>
+        <i class="i-ep:back cursor-pointer op70 text-base hover:op100" />
+      </slot>
+    </div>
+    <div>
+      <a class="pr2" :href="docLink" target="_blank" title="View Documentation">
+        <i class="i-clarity:document-line cursor-pointer op70 text-base hover:op100" />
+      </a>
+      <a v-if="githubRepoLink" :href="githubRepoLink" target="_blank" title="Star on GitHub">
+        <i class="i-mdi:github cursor-pointer op70 text-base hover:op100" />
+      </a>
+    </div>
+  </div>
+</template>

packages/client/src/components/basic/TopNav.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+defineProps<{
+  data: {
+    icon: string
+    label: string
+    path: string
+    id: string
+  }[]
+}>()
+
+defineEmits(['change'])
+const modelValue = defineModel<string>()
+</script>
+
+<template>
+  <ul class="flex gap3">
+    <li
+      v-for="(item, index) in data"
+      :key="index"
+      class="h-10 flex cursor-pointer items-center justify-center border-b-[2px] border-solid text-size-sm leading-none hover:op100"
+      :class="modelValue === item.id ? 'op-100 font-medium text-primary-400 border-primary-400' : 'border-transparent op-70'"
+      @click="modelValue = item.id"
+    >
+      {{ item.label }}
+    </li>
+  </ul>
+</template>

packages/client/src/constants/tab.ts

@@ -48,6 +48,13 @@ export const builtinTab = [
   [
     'advanced',
     [
+      {
+        icon: 'i-lucide:swatch-book',
+        name: 'documents',
+        order: -100,
+        path: '/documents',
+        title: 'Documents',
+      },
       {
         icon: 'i-tabler:terminal',
         name: 'console',

packages/client/src/pages/[...all].vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <Empty>
     Not Found
-  </div>
+  </Empty>
 </template>

packages/client/src/pages/documents.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const baseDocumentData = [
+  {
+    icon: 'i-icon-park-outline:document-text',
+    label: 'uni-app',
+    path: 'https://uniapp.dcloud.net.cn/',
+    id: 'uni',
+  },
+  {
+    icon: 'i-logos-vue',
+    label: 'Vue',
+    path: 'https://developers.weixin.qq.com/miniprogram/dev/framework/',
+    id: 'vue',
+  },
+]
+const checkedId = ref('vue')
+const docLink = computed(() => {
+  return baseDocumentData.find(item => item.id === checkedId.value)!.path
+})
+</script>
+
+<template>
+  <div class="relative h-full flex flex-col">
+    <DevToolsHeader :doc-link="docLink">
+      <TopNav v-model="checkedId" :data="baseDocumentData" />
+    </DevToolsHeader>
+
+    <IframeView :src="docLink" />
+  </div>
+</template>

packages/client/src/pages/overview.vue

@@ -6,8 +6,12 @@ const { versionState } = useInitState()
 
 const pages = await trpc.getPages.query()
 const modules = await trpc.getModules.query()
-
 const vueModules = modules?.filter(module => module.id.endsWith('vue')).length
+
+// 打开浏览器地址
+function openInNewTab(url: string) {
+  trpc.openInBrowser.query(url)
+}
 </script>
 
 <template>
@@ -26,11 +30,11 @@ const vueModules = modules?.filter(module => module.id.endsWith('vue')).length
 
       <!-- Main Grid -->
       <div flex="~ gap2 wrap">
-        <div p4 theme-card-green flex="~ col auto">
+        <div cursor-pointer p4 theme-card-green flex="~ col auto" @click="openInNewTab('https://uniapp.dcloud.net.cn/')">
           <img :src="UniIcon" h-7.5 w-7.5>
           <code>v{{ versionState?.uniVersion }}</code>
         </div>
-        <div p4 theme-card-green flex="~ col auto">
+        <div cursor-pointer p4 theme-card-green flex="~ col auto" @click="openInNewTab('https://cn.vuejs.org/')">
           <div i-logos-vue text-3xl />
           <code>v{{ versionState?.vueVersion }}</code>
         </div>

packages/client/typed-router.d.ts

@@ -23,6 +23,7 @@ declare module 'vue-router/auto-routes' {
     '/assets': RouteRecordInfo<'/assets', '/assets', Record<never, never>, Record<never, never>>,
     '/components': RouteRecordInfo<'/components', '/components', Record<never, never>, Record<never, never>>,
     '/console': RouteRecordInfo<'/console', '/console', Record<never, never>, Record<never, never>>,
+    '/documents': RouteRecordInfo<'/documents', '/documents', Record<never, never>, Record<never, never>>,
     '/graph': RouteRecordInfo<'/graph', '/graph', Record<never, never>, Record<never, never>>,
     '/inspect': RouteRecordInfo<'/inspect', '/inspect', Record<never, never>, Record<never, never>>,
     '/overview': RouteRecordInfo<'/overview', '/overview', Record<never, never>, Record<never, never>>,

packages/plugin/inspect/UniDevTools.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { getCurrentInstance, onMounted, ref } from 'vue'
+import { getCurrentInstance, ref } from 'vue'
 import { setCurrentPage } from './initMPClient'
 
 console.log('====================================================')

packages/plugin/package.json

@@ -61,7 +61,7 @@
     "@uni-helper/devtools-shared": "workspace:*",
     "@uni-helper/devtools-types": "workspace:*",
     "@uni-helper/trpc-client": "workspace:*",
-    "@uni-helper/uni-env": "^0.1.1",
+    "@uni-helper/uni-env": "^0.1.7",
     "@vue/compiler-sfc": "^3.5.13",
     "@vue/devtools-kit": "^7.6.7",
     "@webviewjs/webview": "^0.1.3",

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, savePort } from '../openCommands'
+import { openInBrowser, openInDevtools, savePort } from '../openCommands'
 import createAppRouter from './rpc/index'
 
 const eventEmitter = new EventEmitter()
@@ -50,7 +50,10 @@ export function createDevtoolServe(
     app.listen(rightPort, () => {
       uniDevToolsPrint(rightPort)
       savePort(rightPort)
-      if (options?.client) {
+      if (options?.openBrowser) {
+        openInBrowser(`http://localhost:${rightPort}`)
+      }
+      if (options?.openClient) {
         openInDevtools()
       }
     })

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

@@ -1,4 +1,5 @@
 import type { ResolvedConfig } from 'vite'
+import { platform } from '@uni-helper/uni-env'
 import { publicProcedure, router } from './../trpc'
 
 export function ConfigRouter(config: ResolvedConfig) {
@@ -8,5 +9,8 @@ export function ConfigRouter(config: ResolvedConfig) {
     getRoot: query(() => {
       return config.root
     }),
+    getPlatform: query(() => {
+      return platform
+    }),
   })
 }

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

@@ -4,7 +4,6 @@ import { z } from 'zod'
 import { observable } from '@trpc/server/observable'
 import { parseStack } from 'error-stack-parser-es/lite'
 import { extractPathByStack, sourceFile } from '../../utils/sourceFile'
-import { openInBrowser, openInEditor } from '../../openCommands'
 import type { ConsoleInfo, Options } from './../../types'
 import { mergeRouters, publicProcedure, router } from './../trpc'
 import { AssetsRouter } from './assets'

packages/plugin/src/types.ts

@@ -49,7 +49,12 @@ export interface Options {
    * 客户端
    * @default false
    */
-  client: boolean
+  openClient: boolean
+  /**
+   * 打开浏览器
+   * @default false
+   */
+  openBrowser: boolean
 }
 
 export interface ModuleInfo {

packages/trpc-client/src/createTRPCClient.ts

@@ -50,7 +50,7 @@ export interface TRPCClient<TRouter extends AnyRouter> {
     path: TPath,
     input: TInput,
     opts: Partial<TRPCSubscriptionObserver<TOutput, TRPCClientError<TRouter>>> &
-    TRPCRequestOptions,
+      TRPCRequestOptions,
   ) => Unsubscribable
 }
 /**

packages/trpc-client/src/shared/transformResult.ts

@@ -69,7 +69,7 @@ export function transformResult<TRouter extends AnyRouter, TOutput>(
   if (
     !result.ok
     && (!isObject(result.error.error)
-    || typeof result.error.error.code !== 'number')
+      || typeof result.error.error.code !== 'number')
   ) {
     throw new TransformResultError()
   }