chore: build script of broswer plugin

Author: happice0746

.eslintrc.cjs

@@ -5,4 +5,5 @@ module.exports = {
     'no-console': ['error', { allow: ['warn', 'error', 'debug'] }],
     'vue/v-on-event-hyphenation': 'off',
   },
+  ignorePatterns: ['node_modules/', 'dist/', 'browserPlugin/'],
 }

.gitignore

@@ -2,7 +2,7 @@
 node_modules
 bun.lockb
 /dist
-
+/browserPlugin
 
 # local env files
 .env.local

package.json

@@ -7,12 +7,14 @@
     "prepare": "simple-git-hooks",
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
+    "build:plugin": "npm run build && node ./scripts/build-plugin.mjs",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix"
   },
   "dependencies": {
     "ant-design-vue": "^4.0.3",
     "axios": "^1.5.0",
+    "chalk": "^4.0.0",
     "url-loader": "^4.1.1",
     "vue": "^3.2.13",
     "vue-grid-layout": "npm:@nrr/[email protected]",

scripts/build-plugin.mjs

@@ -0,0 +1,102 @@
+import fs from 'node:fs/promises'
+import { statSync } from 'node:fs'
+import path from 'node:path'
+import process from 'node:process'
+import chalk from 'chalk'
+
+const sourceSrc = path.join(process.cwd(), 'dist')
+const targetSrc = path.join(process.cwd(), 'browserPlugin')
+// fs/promises写法
+function move(sourceRoot, targetRoot) {
+  console.debug(chalk.green(`开始移动${sourceRoot}中的文件至${targetRoot}`))
+  fs.readdir(sourceRoot)
+    .then((files) => {
+      files.forEach((file) => {
+        const sourceFile = path.join(sourceRoot, file)
+        const targetFile = path.join(targetRoot, file)
+
+        if (statSync(sourceFile).isDirectory()) {
+          fs.stat(targetFile)
+            .catch((err) => {
+              if (err.code === 'ENOENT') {
+                // 在targetSrc中新建同名文件夹
+                fs.mkdir(targetFile)
+                  .then(() => {
+                    console.debug(chalk.green(`新建${targetFile}文件夹成功`))
+                  })
+                  .catch((err) => {
+                    console.debug(chalk.red(`新建失败ERROR:${err}`))
+                  })
+              }
+              else {
+                console.debug(chalk.red(`新建失败ERROR:${err}`))
+              }
+            })
+          move(sourceFile, targetFile)
+        }
+        else {
+          const copyFn = () => {
+            fs.copyFile(sourceFile, targetFile)
+              .catch(() => {
+                console.debug(chalk.red('复制失败'))
+              })
+          }
+          fs.unlink(targetFile)
+            .then(() => {
+              copyFn()
+            })
+            .catch(() => {
+              copyFn()
+            })
+        }
+      })
+    })
+  console.debug(chalk.green('复制成功'))
+}
+// fs写法
+// fs.readdir(sourceSrc, (err, files) => {
+//     if (err) {
+//         console.debug("读取文件夹失败");
+//     } else {
+//         files.forEach((file) => {
+//             const sourceFile = path.join(sourceSrc, file);
+//             const targetFile = path.join(targetSrc, file);
+//             fs.unlink(targetFile, (err) => {
+//                 if (!err || err.code !== "ENOENT") {
+//                     fs.copyFile(sourceFile, targetFile, (err) => {
+//                         if (err) {
+//                             console.debug("复制失败");
+//                         } else {
+//                             console.debug("复制成功")
+//                         }
+//                     })
+//                 } else {
+//                     console.debug("删除失败");
+//                 }
+//             })
+
+//         });
+//     }
+// })
+fs.stat(targetSrc)
+  .then((result) => {
+    if (result.isDirectory())
+      move(sourceSrc, targetSrc)
+    else
+      console.debug(chalk.red('browserPlugin不是一个文件夹'))
+  })
+  .catch((err) => {
+    if (err.code === 'ENOENT') {
+      // 新建browserPlugin文件夹
+      fs.mkdir('browserPlugin')
+        .then(() => {
+          move(sourceSrc, targetSrc)
+        })
+        .catch((err) => {
+          console.debug(chalk.red(`新建失败ERROR:${err}`))
+        })
+    }
+    else {
+      console.error(chalk.red('发生错误:', err))
+    }
+  })

src/components/TagsBox.vue

@@ -3,8 +3,6 @@ import { GridItem, GridLayout } from 'vue3-drr-grid-layout'
 import 'vue3-drr-grid-layout/dist/style.css'
 import { nextTick } from 'vue'
 
-import Kxz from '@/assets/ico/kxz.png'
-
 export default ({
   components: {
     GridLayout,
@@ -66,11 +64,11 @@ export default ({
       localStorage.setItem('vuex-state', JSON.stringify(this.$store.state))
       this.layout = JSON.parse(localStorage.getItem('vuex-state')).tagList
     }
-    const tagRadius = lsState.tagRadius
-    const tagOpacity = lsState.tagOpacity / 100
     nextTick().then(() => {
       // 在下一个 tick 中执行操作
       const tagIcons = document.querySelectorAll('.tagIcon')
+      const tagRadius = lsState.tagRadius
+      const tagOpacity = lsState.tagOpacity / 100
       tagIcons.forEach((item) => {
         item.style.borderRadius = `${tagRadius}%`
         item.style.opacity = `${tagOpacity}`
@@ -85,21 +83,6 @@ export default ({
     showModal() {
       this.open = true
     },
-    handleOk() {
-      if (this.url === '')
-        return
-      const newTag = {}
-      newTag.url = `https://${this.url}`
-      newTag.name = this.name
-      newTag.key = 0
-      newTag.icon = Kxz
-      this.url = ''
-      this.name = ''
-      // this.tags.push(newTag)
-      this.tags.push(newTag)
-      this.$store.commit('updateTagList', this.tags)
-      this.open = false
-    },
     rightClick(tag) {
       console.debug(tag)
       this.tags = this.tags.filter(item => item !== tag)

src/components/UserBox.vue

@@ -1,7 +1,7 @@
 <script>
 import { nextTick } from 'vue'
 
-// import Avatar from '@/assets/ico/Avatar.png'
+import Kxz from '@/assets/ico/kxz.png'
 
 export default {
   data() {
@@ -21,7 +21,7 @@ export default {
       bgPicList: [],
       activeKey: 1,
       imgUrl: [],
-      newTabIconIndex: 0,
+      newTabIconIndex: -1,
       tagRadius: this.$store.state.tagRadius,
       tagOpacity: this.$store.state.tagRadius,
       searchBoxSize: this.$store.state.searchBoxSize,
@@ -215,9 +215,12 @@ export default {
       newTag.url = `https://${this.newTabUrl}`
       newTag.name = this.newTabName
       newTag.key = 0
-      newTag.icon = this.imgUrl[this.newTabIconIndex]
+      if (this.newTabIconIndex === -1)
+        newTag.icon = Kxz
+      else
+        newTag.icon = this.imgUrl[this.newTabIconIndex]
       this.imgUrl = []
-      this.newTabIconIndex = 0
+      this.newTabIconIndex = -1
       const tags = this.$store.state.tagList
       let x = 2
       let y = 0