✨ 支持插件分离，增加开发者工具功能

rubickCenter · Jan 4, 2022 · 19cd77b · 19cd77b
1 parent c69be6c
commit 19cd77b
Show file tree

Hide file tree

Showing 29 changed files with 13,717 additions and 15 deletions.
diff --git a/detach/.gitignore b/detach/.gitignore
@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/detach/README.md b/detach/README.md
@@ -0,0 +1,24 @@
+# detach
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/detach/babel.config.js b/detach/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@vue/cli-plugin-babel/preset"],
+};
diff --git a/detach/package-lock.json b/detach/package-lock.json
diff --git a/detach/package.json b/detach/package.json
@@ -0,0 +1,57 @@
+{
+  "name": "detach",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "lodash.throttle": "^4.1.1",
+    "vue": "^3.0.0",
+    "vue-router": "^4.0.0-0",
+    "vuex": "^4.0.0-0"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^4.18.0",
+    "@typescript-eslint/parser": "^4.18.0",
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-typescript": "~4.5.0",
+    "@vue/cli-plugin-vuex": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/compiler-sfc": "^3.0.0",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/eslint-config-typescript": "^7.0.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-vue": "^7.0.0",
+    "prettier": "^2.2.1",
+    "typescript": "~4.1.5"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended",
+      "@vue/typescript/recommended",
+      "@vue/prettier",
+      "@vue/prettier/@typescript-eslint"
+    ],
+    "parserOptions": {
+      "ecmaVersion": 2020
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}
diff --git a/detach/public/favicon.ico b/detach/public/favicon.ico
diff --git a/detach/public/index.html b/detach/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/detach/src/App.vue b/detach/src/App.vue
@@ -0,0 +1,150 @@
+<template>
+  <div :class="[platform, 'detach']">
+    <div class="info">
+      <img :src="plugInfo.logo" />
+      <input
+        autofocus
+        @input="changeValue"
+        v-if="showInput"
+        :value="plugInfo.subInput?.value"
+        :placeholder="plugInfo.subInput?.placeholder"
+      />
+      <span v-else>{{ plugInfo.pluginName }}</span>
+    </div>
+    <div class="handle">
+      <div class="devtool" @click="openDevTool" title="开发者工具"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import throttle from "lodash.throttle";
+import { ref } from "vue";
+
+const { ipcRenderer } = window.require("electron");
+const platform = ref(window.process.platform);
+const plugInfo = ref({});
+const showInput = ref(false);
+window.initDetach = (pluginInfo) => {
+  plugInfo.value = pluginInfo;
+  showInput.value =
+    pluginInfo.subInput &&
+    (!!pluginInfo.subInput.value || !!pluginInfo.subInput.placeholder);
+  console.log(showInput.value);
+};
+
+const changeValue = throttle((e) => {
+  ipcRenderer.send("msg-trigger", {
+    type: "detachInputChange",
+    data: {
+      text: e.target.value,
+    },
+  });
+}, 500);
+
+const openDevTool = () => {
+  ipcRenderer.send("msg-trigger", { type: "openPluginDevTools" });
+};
+
+Object.assign(window, {
+  setSubInputValue: ({ value }) => {
+    plugInfo.value.subInput.value = value;
+  },
+  setSubInput: (placeholder) => {
+    plugInfo.value.subInput.placeholder = placeholder;
+  },
+  removeSubInput: () => {
+    plugInfo.value.subInput = null;
+  },
+});
+</script>
+
+<style>
+html, body {
+  margin: 0;
+  padding: 0;
+  font-family: system-ui, "PingFang SC", "Helvetica Neue", "Microsoft Yahei", sans-serif;
+  user-select: none;
+  overflow: hidden;
+}
+
+.detach {
+  width: 100%;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  background: #eee;
+}
+
+.detach {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  font-size: 18px;
+  padding-left: 10px;
+  font-weight: 500;
+  box-sizing: border-box;
+  justify-content: space-between;
+}
+
+.detach.darwin {
+  padding-left: 80px;
+  -webkit-app-region: drag;
+}
+
+.detach.win32 {
+  -webkit-app-region: drag;
+}
+
+.detach img {
+  width: 36px;
+  height: 36px;
+  margin-right: 10px;
+}
+
+.detach input {
+  background-color: #FFFFFF;
+  color: #333333;
+  width: 360px;
+  height: 36px;
+  line-height: 36px;
+  border-radius: 4px;
+  font-size: 14px;
+  border: none;
+  padding: 0 10px;
+  outline: none;
+  -webkit-app-region: no-drag;
+}
+
+.detach input::-webkit-input-placeholder {
+  color: #aaa;
+  user-select: none;
+}
+
+.detach .info {
+  display: flex;
+  align-items: center;
+}
+
+.handle {
+  display: flex;
+  -webkit-app-region: no-drag;
+}
+
+.handle > div {
+  width: 36px;
+  height: 36px;
+  border-radius: 18px;
+  cursor: pointer;
+  margin-right: 6px;
+}
+
+.handle > div:hover {
+  background-color: #dee2e6;
+}
+
+.detach .devtool {
+  background: center / 18px no-repeat url("./assets/devtool.svg");
+}
+
+</style>
diff --git a/detach/src/assets/devtool.svg b/detach/src/assets/devtool.svg
diff --git a/detach/src/main.ts b/detach/src/main.ts
@@ -0,0 +1,4 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+
+createApp(App).mount("#app");
diff --git a/detach/src/shims-vue.d.ts b/detach/src/shims-vue.d.ts
@@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/detach/tsconfig.json b/detach/tsconfig.json
@@ -0,0 +1,39 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env"
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
diff --git a/detach/vue.config.js b/detach/vue.config.js
@@ -0,0 +1,13 @@
+const path = require("path");
+
+module.exports = {
+  css: { // 配置css模块
+    loaderOptions: { // 向预处理器 Loader 传递配置选项
+      less: { // 配置less（其他样式解析用法一致）
+        javascriptEnabled: true, // 设置为true
+      },
+    },
+  },
+  outputDir: path.join(__dirname, "../public/detach"),
+  publicPath: process.env.NODE_ENV === "production" ? "" : "/",
+};
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rubick",
-  "version": "2.0.1-beta.10",
+  "version": "2.0.1-beta.11",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

diff --git a/public/detach/css/app.9d15d34b.css b/public/detach/css/app.9d15d34b.css
diff --git a/public/detach/favicon.ico b/public/detach/favicon.ico
diff --git a/public/detach/img/devtool.87e078f5.svg b/public/detach/img/devtool.87e078f5.svg
diff --git a/public/detach/index.html b/public/detach/index.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>detach</title><link href="css/app.9d15d34b.css" rel="preload" as="style"><link href="js/app.a7b22972.js" rel="preload" as="script"><link href="js/chunk-vendors.c073804a.js" rel="preload" as="script"><link href="css/app.9d15d34b.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but detach doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.c073804a.js"></script><script src="js/app.a7b22972.js"></script></body></html>
diff --git a/public/detach/js/app.a7b22972.js b/public/detach/js/app.a7b22972.js
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>detach</title><link href="css/app.9d15d34b.css" rel="preload" as="style"><link href="js/app.a7b22972.js" rel="preload" as="script"><link href="js/chunk-vendors.c073804a.js" rel="preload" as="script"><link href="css/app.9d15d34b.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but detach doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.c073804a.js"></script><script src="js/app.a7b22972.js"></script></body></html>