fix: some bug

examples/cra-app/package.json

@@ -14,7 +14,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
-    "visual-dev": "0.1.0",
+    "visual-dev": "0.3.0",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

examples/umi-app/.umirc.ts

@@ -6,13 +6,9 @@ export default defineConfig({
   },
   routes: [{ path: '/', component: '@/pages/index' }],
   fastRefresh: {},
-  // plugins:[require.resolve('./node_modules/visual-dev/dist/plugins/umi'),],
-
-  plugins:['visual-dev/plugins/umi'],
-
-  resolve:{
-    includes:['components']
-  },
+  plugins:[require.resolve('../../packages/visual-dev/src/plugins/umi/index.ts'),],
+  // visualDev:{}
+  // plugins:['visual-dev/plugins/umi'],
   // chainWebpack(memo) {
   //   memo.plugin('web-devtools').use(WebpackDevtoolPlugin);
   // },

examples/umi-app/package.json

@@ -25,7 +25,7 @@
     "react": "17.x",
     "react-dom": "17.x",
     "umi": "^3.5.17",
-    "visual-dev": "0.1.8"
+    "visual-dev": "0.3.1"
   },
   "devDependencies": {
     "@types/react": "^17.0.0",

packages/dev-ui/src/App.vue

@@ -1,13 +1,39 @@
 <script setup lang="ts">
 import { onMounted, ref, shallowRef, defineAsyncComponent, h } from 'vue';
-import { createPrefixContext, createDrawerContext } from './hooks';
+import { createPrefixContext, createDrawerContext, useHotkeys } from './hooks';
 import { getRequest } from './utils';
 
-createDrawerContext();
+const data = createDrawerContext();
 const prefix = createPrefixContext('vd');
 
 const AsyncApp = shallowRef<any>(h('span', {}));
 
+// 初始化快捷键
+useHotkeys({
+  toggle_drawer: {
+    keys: [
+      ['command', 'shift', 'z'],
+      ['ctrl', 'shift', 'z'],
+    ],
+    callback() {
+      if (data.visibile) {
+        data.closeDrawer();
+      } else {
+        data.openDrawer();
+      }
+    },
+  },
+  toggle_aim: {
+    keys: [
+      ['command', 'shift', 'x'],
+      ['ctrl', 'shift', 'x'],
+    ],
+    callback() {
+      data.setIsAimStatus(!data.isAimStatus);
+    },
+  },
+});
+
 onMounted(async () => {
   const { mode } = await getRequest('getConfig');
 
@@ -36,6 +62,7 @@ onMounted(async () => {
   transition: all 0.2s;
   cursor: pointer;
   color: var(--v-brand);
+  z-index: 999999999;
   &:hover {
     transform: rotateZ(90deg);
     left: 5px;

packages/dev-ui/src/Layout/Nav.vue

@@ -13,7 +13,7 @@ const router = useRoute();
     </div>
     <nav class="h-nav">
       <div
-        @click="router?.changeCurrentRoute(route)"
+        @click="router?.changeCurrentRoute(route as any)"
         class="nav-item"
         :class="router?.currentRoute.route === route.route && 'active'"
         :key="route.route"

packages/dev-ui/src/Pages/Docs/SliderLink.vue

@@ -52,7 +52,7 @@ const handleClick = (menuValue: any) => {
         v-for="(value, key, index) in data.sliderObjectOrContent"
         :key="String(key) + String(index || 0)"
       >
-        <li
+        <!-- <li
           :class="{ 'l-li': true, active: value === docsData?.docsContent }"
           v-if="key !== '__open'"
         >
@@ -69,7 +69,7 @@ const handleClick = (menuValue: any) => {
               :slider-object-or-content="value"
             />
           </transition>
-        </li>
+        </li> -->
       </template>
     </ul>
   </div>

packages/dev-ui/src/components/AimMode.vue

@@ -3,13 +3,7 @@ import { ref, watch, onMounted } from 'vue';
 import { usePrefix, useAim } from '../hooks';
 import SvgIcon from '../IconCompents/SvgIcon.vue';
 import { OverLayer } from './OverLayer';
-import {
-  getParentNode,
-  getElementDimensions,
-  getCompNameFromStringPath,
-  postRequest,
-  launchEditor,
-} from '../utils';
+import { getParentNode, getElementDimensions, launchEditor } from '../utils';
 
 interface MapPathdata {
   [key: string]: { path: string; componentName: string; frame: string };
@@ -19,16 +13,13 @@ const useAimData = useAim();
 
 const prefix = usePrefix();
 const OverLayerRef = ref<OverLayer>();
-const domMap = ref(new Map<Element, string>());
+const domMap = ref(new WeakMap<Element, string>());
 
 let previosDom: Element | null = null;
 
 onMounted(() => {
   // 收集全局带有 data-v-p 属性的 Dom
   const collectElement = () => {
-    const arr = document.querySelectorAll('[data-v-p]');
-    if (arr.length === 0) return;
-    domMap.value.clear();
     document.querySelectorAll('[data-v-p]').forEach((ele) => {
       const attr = ele.getAttribute('data-v-p');
       if (attr) {

packages/dev-ui/src/hooks/useRoute.ts

@@ -1,4 +1,4 @@
-import { defineAsyncComponent, reactive, provide, inject, shallowRef } from 'vue';
+import { reactive, provide, inject } from 'vue';
 
 export const useRouteNamespace = 'useRoute';
 
@@ -11,7 +11,7 @@ const rawData = {
   routes: [
     {
       route: 'Docs',
-      component: shallowRef(defineAsyncComponent(() => import('../Pages/Docs/index.vue'))),
+      // component: shallowRef(defineAsyncComponent(() => import('../Pages/Docs/index.vue'))),
     },
   ],
   currentRoute: {

packages/dev-ui/src/utils/index.ts

@@ -12,7 +12,7 @@ export const getParentNode = (ele: Element, cb: (ele: Element) => boolean) => {
 
   while (!cb(ele) && ele.parentNode && ele !== document.body) {
     // eslint-disable-next-line no-param-reassign
-    ele = ele.parentNode;
+    (ele as any) = ele.parentNode;
   }
   return ele;
 };

packages/dev-ui/src/utils/launchEditor.ts

@@ -24,13 +24,13 @@ export function launchEditor({
   line?: number | string;
   column?: number | string;
 }): string {
-  return EDITORS[editor].replace(/{(.*?)}/g, (_$, $1) => {
+  return EDITORS[editor].replace(/{(.*?)}/g, (_$: any, $1: any): string => {
     if ($1 === 'path') {
       return srcPath;
     }
     if ($1 === 'line') {
-      return line;
+      return String(line);
     }
-    return column;
+    return String(column);
   });
 }

packages/dev-ui/tsconfig.json

@@ -1,18 +1,26 @@
 {
   "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "moduleResolution": "node",
+    "allowJs": true,
     "strict": true,
+    "target": "ES2018",
+    "module": "ESNext",
+    "noImplicitAny": false,
+    "declaration": true,
+    "moduleResolution": "Node",
+    "esModuleInterop": true,
     "jsx": "preserve",
     "sourceMap": true,
+    "lib": ["ES2018", "DOM"],
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
     "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "lib": ["esnext", "dom"],
+    "baseUrl": "./src",
+    "rootDir": ".",
+    "typeRoots": ["node_modules/@types"],
     "paths": {
       "@": ["./src/*"]
     }
   },
+  "exclude": ["node_modules", "**/__test?__", "**/dist"],
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
 }

packages/visual-dev/package.json

@@ -1,6 +1,6 @@
 {
   "name": "visual-dev",
-  "version": "0.2.2",
+  "version": "0.3.9",
   "description": "plugin to facilitate project maintenance, provide document rendering, and the ability to locate components to ide",
   "main": "./plugins/index.js",
   "types": "./plugins/index.d.ts",

packages/visual-dev/src/server/MiddleWare/getConfig.ts

@@ -6,7 +6,7 @@ export const getConfig = (props: ServerOptions): RequestHandler => {
 
   if (props.resolve) {
     // 窗口模式
-    mode = 'drawer';
+    mode = 'aim';
   } else {
     // 仅显示瞄准
     mode = 'aim';

packages/visual-dev/src/server/createServer.ts

@@ -1,6 +1,5 @@
 import express, { json } from 'express';
 import cors from 'cors';
-import launchEditor from '@umijs/launch-editor';
 import { SERVER_PORT } from '../index';
 import { getMenu, injectFile, pathMapMid, getConfig } from './MiddleWare';
 
@@ -26,15 +25,10 @@ export const createServer = async (options: ServerOptions = {}) => {
 
   app.get('/web-devtools/getMenu', getMenu({ includes: resolve.includes }));
 
-  app.post('/web-devtools/launchEditor', async (req, res) => {
-    await launchEditor(process.cwd() + req.body.filePath);
-    res.send({});
-  });
-
   app.post('/web-devtools/injectFile', injectFile);
 
   app.listen(port, () => {
     // eslint-disable-next-line
-    console.log(`dev-plugin is listening ${port}`);
+    console.log(`visual-dev is listening on port : ${port}`);
   });
 };

packages/visual-dev/src/umi/index.ts

@@ -33,20 +33,16 @@ class WriteAndCopy {
 }
 
 export default (api: IApi) => {
-  api.describe({
-    key: 'resolve',
-    config: {
-      schema(joi) {
-        return joi.object({
-          includes: joi.array().items(joi.string()),
-        });
-      },
-      default: {
-        includes: [],
-      },
-    },
-    enableBy: api.EnableBy.config,
-  });
+  // api.describe({
+  //   key: 'visualDev',
+  //   config: {
+  //     schema(joi) {
+  //       return joi.object();
+  //     },
+  //     onChange: api.ConfigChangeType.regenerateTmpFiles,
+  //   },
+  //   enableBy: api.EnableBy.config,
+  // });
 
   api.modifyBabelOpts((babelOptions) => {
     babelOptions.plugins.unshift([insertJSXElementPathPlugin]);
@@ -64,8 +60,6 @@ export default (api: IApi) => {
   });
 
   api.onStart(() => {
-    createServer({
-      resolve: api.config.resolve,
-    });
+    createServer();
   });
 };

tsconfig.json

@@ -1,5 +1,4 @@
 {
-  "exclude": ["node_modules"],
   "compilerOptions": {
     "typeRoots": ["node_modules/@types"],
     "target": "ES2018",
@@ -10,5 +9,6 @@
     "noUnusedLocals": true,
     "skipLibCheck": true,
     "esModuleInterop": true
-  }
+  },
+  "exclude": ["node_modules", "**/__test?__", "**/dist"]
 }