经过4天的努力总算把 两个模块开发出来了，经过一晚上的在云服务器的配置，总算可以发不了哈哈

.gitignore

@@ -12,6 +12,9 @@ dist
 dist-ssr
 *.local
 
+# 配置文件信息不能暴露
+.env.*
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

README.md

@@ -1,6 +1,6 @@
-# Vue 3 + Typescript + Vite + pinia + vue-router
+## Vue 3 + Typescript + Vite + pinia + vue-router
 
-# Create project document how to bulid a project
+## Create project document how to bulid a project
   before create project, you should install node to promit npm and node command is standy.
   npm -v
   node -v<br />
@@ -14,19 +14,62 @@
     cd g-home
     npm install
 
-# vue-router
+## vue-router
   
     npm install vue-router -S
 
-# pinia
+## pinia
     // instand of vuex
     npm install pinia -S
 
-# element-plus
+## element-plus
     npm install element-plus -S
 
-# js-cookie
+## js-cookie
     npm install js-cookie -S
 
+## 环境配置
+  前后端分离，所以前端单独服务器，所以生产环境需要装node.js
+  添加了.env.production .env.development 文件
+  对vite.config.ts做了修改。
+
+# 云服务器的那些坑
+    // node.js
+    nodejs 官网直接下载tar.gz 解压到/usr/local/lib/nodejs
+    
+    // nginx
+    nginx 这个坑就多了 同样是官网 下载tar.gz 二进制版本 需要编译,但是可能是版本比较新的缘故吧,在make那部出了好多错，最后一查都是云服务器的环境太老了导致的。
+    
+    // 首先是没有pcre 不用编译直接塞到 /usr/local/src/pcre-8.45 
+    https://sourceforge.net/projects/pcre/files/pcre/8.45/ 
+    
+    // 然后又提示 aclocal-1.16: command not found，结果一查就是automake和autoconf的版本问题了
+    
+    // automake
+    https://ftp.gnu.org/gnu/automake/ 下载
+    ./configure
+    make
+    make install
+    /usr/bin/autoconf -V
+
+    http://ftp.gnu.org/gnu/autoconf/ 下载 
+    ./configure --prefix=/usr/
+    make
+    make install
+    到这才把nginx装完 
+
+## 发布
+ - npm run build 生成dist 文件夹
+    把这个文件夹放到nginx的html文件夹下改名ghome
+    nginx那个 location /ghome 也要有。
+
+
+
+
+
+
+
+
+
 
   

package-lock.json

@@ -83,6 +83,32 @@
       "integrity": "sha512-7wg/8gfHltklehP+oyJnZrz9XBuX5ZPP4zB6UsI84utdlkRYLnOm2HfpLXazTwZA+fpGn0ir8tGNgVnMEleBGQ==",
       "dev": true
     },
+    "@types/lodash": {
+      "version": "4.14.181",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.181.tgz",
+      "integrity": "sha512-n3tyKthHJbkiWhDZs3DkhkCzt2MexYHXlX0td5iMplyfwketaOeKboEVBqzceH7juqvEg3q5oUoBFxSLu7zFag==",
+      "dev": true
+    },
+    "@types/lodash-es": {
+      "version": "4.17.6",
+      "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
+      "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "dev": true,
+      "requires": {
+        "@types/lodash": "*"
+      }
+    },
+    "@types/node": {
+      "version": "17.0.23",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.23.tgz",
+      "integrity": "sha512-UxDxWn7dl97rKVeVS61vErvw086aCYhDLyvRQZ5Rk65rZKepaFdm53GeqXaKBuOhED4e9uWq34IC3TdSdJJ2Gw=="
+    },
+    "@types/qs": {
+      "version": "6.9.7",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
+      "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
+      "dev": true
+    },
     "@vitejs/plugin-vue": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-2.3.1.tgz",
@@ -329,6 +355,14 @@
       "integrity": "sha512-TaTivMB6pYI1kXwrFlEhLeGfOqoDNdTxjCdwRfFFkEA30Eu+k48W34nlok2EYWJfFFzqaEmichdNM7th6M5HNw==",
       "dev": true
     },
+    "async": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
+      "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
+      "requires": {
+        "lodash": "^4.17.14"
+      }
+    },
     "async-validator": {
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.0.7.tgz",
@@ -355,7 +389,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
       "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "get-intrinsic": "^1.0.2"
@@ -464,6 +497,11 @@
         "domhandler": "^4.2.0"
       }
     },
+    "duplexer": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
+      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
+    },
     "element-plus": {
       "version": "2.1.7",
       "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.1.7.tgz",
@@ -678,11 +716,30 @@
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
+    "event-stream": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-4.0.1.tgz",
+      "integrity": "sha512-qACXdu/9VHPBzcyhdOWR5/IahhGMf0roTeZJfzz077GwylcDd90yOHLouhmv7GJ5XzPi6ekaQWd8AvPP2nOvpA==",
+      "requires": {
+        "duplexer": "^0.1.1",
+        "from": "^0.1.7",
+        "map-stream": "0.0.7",
+        "pause-stream": "^0.0.11",
+        "split": "^1.0.1",
+        "stream-combiner": "^0.2.2",
+        "through": "^2.3.8"
+      }
+    },
     "follow-redirects": {
       "version": "1.14.9",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
       "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w=="
     },
+    "from": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
+      "integrity": "sha1-g8YK/Fi5xWmXAH7Rp2izqzA6RP4="
+    },
     "fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -693,14 +750,12 @@
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
-      "dev": true
     },
     "get-intrinsic": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
       "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -719,7 +774,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1"
       }
@@ -727,8 +781,7 @@
     "has-symbols": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
-      "dev": true
     },
     "has-tostringtag": {
       "version": "1.0.0",
@@ -828,6 +881,11 @@
       "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.2.tgz",
       "integrity": "sha512-OGbEy+1P+UT26CYi4opY4gebD8cWRDxAT6MAObIVQMiqYdxZr1g3QHWCToVsm31x2NkLS4K3+MC2qInaRMa39g=="
     },
+    "lodash.assign": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
+      "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc="
+    },
     "lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -845,11 +903,21 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "map-stream": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.0.7.tgz",
+      "integrity": "sha1-ih8HiW2CsQkmvTdEokIACfiJdKg="
+    },
     "memoize-one": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
       "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
     },
+    "mingo": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/mingo/-/mingo-1.3.3.tgz",
+      "integrity": "sha1-aSLE0Ufvx3GgFCWixMj3eER4xUY="
+    },
     "moment": {
       "version": "2.29.1",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
@@ -871,12 +939,25 @@
       "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
       "dev": true
     },
+    "object-inspect": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.0.tgz",
+      "integrity": "sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g=="
+    },
     "path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "dev": true
     },
+    "pause-stream": {
+      "version": "0.0.11",
+      "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
+      "integrity": "sha1-/lo0sMvOErWqaitAPuLnO2AvFEU=",
+      "requires": {
+        "through": "~2.3"
+      }
+    },
     "picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -1034,6 +1115,14 @@
       "integrity": "sha512-yYELe9Q5q9IQhuvqsZNwA5hfPkMJ8u92bQLIMcsMxf/VADjNtEYptU+inlufAFYcWdHlwNfZOEnOOQrZrcyJCQ==",
       "dev": true
     },
+    "qs": {
+      "version": "6.10.3",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz",
+      "integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==",
+      "requires": {
+        "side-channel": "^1.0.4"
+      }
+    },
     "request-light": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/request-light/-/request-light-0.5.7.tgz",
@@ -1060,6 +1149,17 @@
         "fsevents": "~2.3.2"
       }
     },
+    "save": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/save/-/save-2.4.0.tgz",
+      "integrity": "sha512-wd5L2uVnsKYkIUaK6i8Ie66IOHaI328gMF0MPuTJtYOjXgUolC33LSIk7Qr8WVA55QHaGwfiVS8a7EFIeGOR3w==",
+      "requires": {
+        "async": "^2.6.2",
+        "event-stream": "^4.0.1",
+        "lodash.assign": "^4.2.0",
+        "mingo": "1"
+      }
+    },
     "select": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
@@ -1074,6 +1174,16 @@
         "lru-cache": "^6.0.0"
       }
     },
+    "side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "requires": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      }
+    },
     "source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -1089,12 +1199,34 @@
       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
     },
+    "split": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/split/-/split-1.0.1.tgz",
+      "integrity": "sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==",
+      "requires": {
+        "through": "2"
+      }
+    },
+    "stream-combiner": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.2.2.tgz",
+      "integrity": "sha1-rsjLrBd7Vrb0+kec7YwZEs7lKFg=",
+      "requires": {
+        "duplexer": "~0.1.1",
+        "through": "~2.3.4"
+      }
+    },
     "supports-preserve-symlinks-flag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
       "dev": true
     },
+    "through": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
+    },
     "tiny-emitter": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
@@ -1117,6 +1249,11 @@
       "integrity": "sha1-zCAOqyYT9BZtJ/+a/HylbUnfbrQ=",
       "dev": true
     },
+    "type-fest": {
+      "version": "2.12.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.12.2.tgz",
+      "integrity": "sha512-qt6ylCGpLjZ7AaODxbpyBZSs9fCI9SkL3Z9q2oxMBQhs/uyY+VD8jHA8ULCGmWQJlBgqvO3EJeAngOHD8zQCrQ=="
+    },
     "typescript": {
       "version": "4.6.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.3.tgz",

package.json

@@ -3,27 +3,37 @@
   "private": true,
   "version": "0.0.0",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vue-tsc --noEmit && vite build",
+    "development": "vite build --mode development",
     "preview": "vite preview"
   },
   "dependencies": {
     "@element-plus/icons-vue": "^1.1.4",
+    "@types/node": "^17.0.23",
     "axios": "^0.26.1",
     "clipboard": "^2.0.10",
     "copy-to-clipboard": "^3.3.1",
     "element-plus": "^2.1.7",
     "js-cookie": "^3.0.1",
+    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
+    "lodash-unified": "^1.0.2",
     "moment": "^2.29.1",
     "pinia": "^2.0.13",
+    "qs": "^6.10.3",
+    "save": "^2.4.0",
+    "type-fest": "^2.12.2",
     "vue": "^3.2.25",
     "vue-router": "^4.0.14"
   },
   "devDependencies": {
     "@types/js-cookie": "^3.0.1",
+    "@types/lodash-es": "^4.17.6",
+    "@types/qs": "^6.9.7",
     "@vitejs/plugin-vue": "^2.3.0",
     "typescript": "^4.5.4",
     "vite": "^2.9.0",
     "vue-tsc": "^0.29.8"
   }
-}
+}

src/api/bookmark.ts

@@ -1,10 +1,13 @@
 import request from '../utils/request'
+import Qs from 'qs'
 const search_bookmark = (params: Object) => {
   return request({
     url: '/bookmark',
     method: 'get',
-    headers: {},
+    params: params,
-    params: params
+    paramsSerializer: (params) => {
+      return Qs.stringify(params, { arrayFormat: 'repeat' })
+    },
   })
 }
 

src/utils/request.ts

@@ -2,20 +2,18 @@ import axios from 'axios'
 
 const service = axios.create(
   {
-    baseURL: 'http://localhost:8081',
+    // baseURL: 'http://localhost:8081',
+    baseURL: 'http://49.233.4.79:8081',
     timeout: 5000
   }
 )
 
-
-
-
 // service.interceptors.request.use(
 //   config => {
-//     if (true) {
+//     // if (true) {
-//       config.headers['Authorization'] = 'Bearer' + getToken('user-token')
+//     //   config.headers['Authorization'] = 'Bearer' + getToken('user-token')
-//     }
+//     // }
-//     return config
+//     // return config
 //   },
 //   error => {
 //     console.log(error)

src/view/bookmark/dialog.vue

@@ -2,11 +2,10 @@
   <div class="dashboard">
     <el-form :model="dialog_form">
       <el-form-item label="分类" :label-width="formLabelWidth">
-        <el-select v-model="dialog_form.bk_type_name" placeholder>
+        <el-select v-model="dialog_form.bk_type_id" placeholder>
           <el-option
-            v-for="(item, index) in types"
+            v-for="(item) in types"
-            :key="index"
+            :key="item.bk_type_id"
-            :selected="index == 1 ? 'selected' : ''"
             :value="item.bk_type_id"
             :label="item.bk_type_name"
           />

src/view/bookmark/index.vue

@@ -1,38 +1,28 @@
 <template>
-  <div class="dashboard">
+  <div class="bookmark">
     <el-form>
       <el-row>
         <el-col :span="6">
           <el-form-item>
-            <!-- <el-autocomplete
+            <el-input v-model="search_form.comment" placeholder="请输入" clearable />
-              v-model="search_data.drug"
-              poper-class="my-autocomplete"
-              :fetch-suggestions="query"
-              placeholder="xxx"
-              label=":"
-              :poper-append-to-body="false"
-            >
-              <template slot-scope="{item}">
-                <span class="value">{{ item.value }}</span>
-              </template>
-            </el-autocomplete>-->
           </el-form-item>
         </el-col>
-        <el-col>
+        <el-col :span="6">
-          <el-button type="primary" @click="doSearch('')">检索</el-button>
+          <el-button type="primary" @click="doSearch">检索</el-button>
-          <el-button type="primary" @click="handleInsert">添加</el-button>
         </el-col>
       </el-row>
       <div class="tag_list">
         <el-tag
           class="ml-2 click-icon"
-          type="success"
+          :type="item.clicked ? 'danger' : 'info'"
           v-for="(item) in bookmark_types"
-          @click="doSearch(item.id)"
+          @click="handleTags(item)"
         >{{ item.bk_type_name }}</el-tag>
       </div>
     </el-form>
-    <div></div>
+    <div class="create_dialog">
+      <el-button type="primary" @click="handleInsert">新建</el-button>
+    </div>
 
     <el-table
       ref="multipleTableRef"
@@ -44,13 +34,17 @@
       <el-table-column type="index" label="index" width="180" />
       <el-table-column prop="bk_type_name" label="分类" width="180" />
       <el-table-column prop="comment" label="名称" width="180" />
-      <el-table-column class="click-icon" prop="url" label="url" />
+      <el-table-column class="click-icon" prop="url" label="url">
-      <el-table-column class="click-icon" prop label="操作">
+        <template #default="scope">
+          <span style="cursor: pointer" @click="openUrl(scope.row.url)">{{ scope.row.url }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop label="操作">
         <template #default="scope">
           <el-icon :size="20" @click="copyNumber(scope.row)" class="click-icon">
             <CopyDocument />
           </el-icon>
-          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+          <el-button class="click-icon" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
           <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
         </template>
       </el-table-column>
@@ -87,6 +81,7 @@ import { CopyDocument } from "@element-plus/icons-vue";
 import { ElNotification } from 'element-plus'
 import copy from 'copy-to-clipboard';
 import { h } from 'vue'
+const formLabelWidth = '140px'
 
 
 const bookmark_types = reactive<any[]>([])
@@ -94,8 +89,9 @@ bookmark_type().then(response => {
   response.data.forEach((element: String) => {
     const item = element.split("|")
     const row = {
-      bk_type_id: item[0],
+      bk_type_id: Number(item[0]),
-      bk_type_name: item[1]
+      bk_type_name: item[1],
+      clicked: false
     }
     bookmark_types.push(row)
   })
@@ -109,11 +105,17 @@ type Bookmark = {
   comment: String,
   url: String
 }
+// 定义 表单格式
+type Searchform = {
+  bk_type_ids: number[],
+  comment: String
+}
 
 // 操作code
 let operate = ref<String>('')
-const search_data = reactive({
+const search_form = reactive<Searchform>({
-  drug: '1'
+  bk_type_ids: [],
+  comment: ''
 })
 // 响应式table数据
 const tableData = reactive<Bookmark[]>([])
@@ -168,20 +170,37 @@ const handleEdit = (index: number, bookmark: Bookmark) => {
   dialogFormVisible.value = true
 }
 
+// 
+const handleTags = (tag: any) => {
+  if (tag.clicked) {
+    tag.clicked = false
+    search_form.bk_type_ids.forEach(function (item, index, arr) {
+      if (item == tag.bk_type_id) {
+        arr.splice(index, 1);
+      }
+    });
+  } else {
+    tag.clicked = true
+    search_form.bk_type_ids.push(tag.bk_type_id)
+  }
+
+}
 const handleSelectionChange = (val: Bookmark[]) => {
   multipleSelection.value = val
 }
 
+const openUrl = (url: string) => {
+  window.open("https://www.runoob.com");
+}
 
-const doSearch = (type_id: String) => {
+const doSearch = () => {
-  console.log(type_id)
   const param = {
-    type_id: type_id
+    comment: search_form.comment,
+    type_id: search_form.bk_type_ids
   }
   tableData.splice(0, tableData.length)
   search_bookmark(param).then(response => {
     response.data.forEach((item: Bookmark, index: number) => {
-      console.log(item)
       const row = {
         bk_id: item.bk_id,
         bk_type_id: item.bk_type_id,
@@ -219,9 +238,6 @@ const copyNumber = (record: Bookmark) => {
 </script>
 
 <style scoped>
-/* .dashboard {
-  background-color: beige;
-} */
 .tag_list {
   display: flex;
   border-top: 1px solid rgba(151, 151, 151, 0.3);
@@ -232,4 +248,11 @@ const copyNumber = (record: Bookmark) => {
   margin: 10px;
   cursor: pointer;
 }
+.create_dialog {
+  margin: 10px;
+}
+.bookmark {
+  border-top: 1px solid rgba(151, 151, 151, 0.3);
+  padding-top: 20px;
+}
 </style>

src/view/tools/index.vue

@@ -22,11 +22,9 @@
 import { ref } from 'vue'
 import type { TabsPaneContext } from 'element-plus'
 import frame from './frame.vue'
-console.log('tools')
 const activeName = ref('first')
 
 const handleClick = (tab: TabsPaneContext, event: Event) => {
-  console.log(tab, event)
 }
 </script>
 

tsconfig.json

@@ -8,10 +8,22 @@
     "jsx": "preserve",
     "sourceMap": true,
     "resolveJsonModule": true,
-    "isolatedModules": true,
+    "isolatedModules": false,
     "esModuleInterop": true,
-    "lib": ["esnext", "dom"]
+    "lib": [
+      "esnext",
+      "dom"
+    ]
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "include": [
-  "references": [{ "path": "./tsconfig.node.json" }]
+    "src/**/*.ts",
-}
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

vite.config.ts

@@ -1,7 +1,17 @@
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
-export default defineConfig({
+// export default defineConfig({
-  plugins: [vue()]
+//   plugins: [vue()]
+// })
+
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, __dirname)
+  return {
+    plugins: [
+      vue(),
+    ],
+    base: env.VITE_RES_URL
+  }
 })