feat:Complete storage encryption and rebuild service list operations

package.json

@@ -20,9 +20,6 @@
     "autoprefixer": "^9",
     "core-js": "^3.6.5",
     "postcss": "^7",
-    "pug": "^3.0.2",
-    "pug-html-loader": "^1.1.5",
-    "pug-plain-loader": "^1.1.0",
     "redis": "^4.0.0",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",
     "vue": "^3.0.0",

src/store/modules/serverList.ts

@@ -1,4 +1,4 @@
-import { getStore, serverType, setStore } from '@/utils/store'
+import { serverType, setStore } from '@/utils/store'
 import { Commit } from 'vuex'
 
 export interface serverTabType extends serverType {
@@ -18,9 +18,6 @@ const state = {
 }
 
 const mutations = {
-  initServerList (state: stateType): void {
-    state.serverList = getStore()
-  },
   setServerList (state: stateType): void {
     setStore(state.serverList)
   },
@@ -68,7 +65,7 @@ const actions = {
   setServer ({ commit }: { commit: Commit }): void {
     commit('setServerList')
   },
-  updateServer ({ commit }: { commit: Commit }, server: serverType): void {
+  updateServer ({ commit }: { commit: Commit }, server: serverType[]): void {
     commit('updateServer', server)
   }
 }

src/utils/cipherCode.ts

@@ -0,0 +1,49 @@
+import crypto from 'crypto'
+
+const algorithm = 'aes-128-cbc'
+
+export const encrypt = async (data: string): Promise<string> => {
+  const password = crypto.randomBytes(16).toString('hex') // password是用于生产密钥的密码
+  const salt = crypto.randomBytes(16).toString('hex') // 生成盐值
+  const iv = crypto.randomBytes(8).toString('hex') // 初始化向量
+
+  return new Promise((resolve, reject) => {
+    crypto.scrypt(password, salt, 16, (err, derivedKey) => {
+      if (err) {
+        reject(err)
+      } else {
+        const cipher = crypto.createCipheriv(algorithm, derivedKey, iv)
+
+        // 加密数据
+        let cipherText = cipher.update(data, 'utf8', 'hex')
+        cipherText += cipher.final('hex')
+        cipherText += (password + salt + iv)
+
+        resolve(cipherText)
+      }
+    })
+  })
+}
+
+export const decrypt = async (cipherText: string): Promise<string> => {
+  const iv = cipherText.slice(-16) // 获取初始化向量
+  const salt = cipherText.slice(-48, -16) // 获取盐值
+  const password = cipherText.slice(-80, -48) // 获取密钥密码
+  const data = cipherText.slice(0, -80) // 获取密文
+
+  return new Promise((resolve, reject) => {
+    crypto.scrypt(password, salt, 16, (err, derivedKey) => {
+      if (err) {
+        reject(err)
+      } else {
+        const decipher = crypto.createDecipheriv(algorithm, derivedKey, iv)
+
+        // 解密数据
+        let txt = decipher.update(data, 'hex', 'utf8')
+        txt += decipher.final('utf8')
+
+        resolve(txt)
+      }
+    })
+  })
+}

src/utils/file.ts

@@ -1,18 +1,19 @@
 import * as fs from 'fs'
+import { encrypt, decrypt } from '@/utils/cipherCode'
 
-export const writeFile = (path: string, content: string): void => {
-  fs.writeFileSync(path, content)
+export const writeFile = async (path: string, content: string): Promise<void> => {
+  const encryptContent = await encrypt(content)
+  fs.writeFileSync(path, encryptContent)
 }
 
-export const appendFile = (path: string, content: string): void => {
-  fs.appendFileSync(path, content)
+export const appendFile = async (path: string, content: string): Promise<void> => {
+  const encryptContent = await encrypt(content)
+  fs.appendFileSync(path, encryptContent)
 }
 
-export const readFile = (path: string): string => {
-  return fs.readFileSync(path, {
-    encoding: 'utf8',
-    flag: 'r'
-  })
+export const readFile = async (path: string): Promise<string> => {
+  const content = fs.readFileSync(path, { encoding: 'utf8', flag: 'r' })
+  return await decrypt(content)
 }
 
 export const existsFile = async (path: string): Promise<boolean> => {

src/utils/store.ts

@@ -14,8 +14,9 @@ export interface serverType {
   children?: string[]
 }
 
-export const getStore = (): serverType[] => {
-  return JSON.parse(readFile(storeFilePath))
+export const getStore = async (): Promise<serverType[]> => {
+  const result = await readFile(storeFilePath)
+  return JSON.parse(result)
 }
 
 export const initStoreFile = async (): Promise<void> => {
@@ -30,5 +31,5 @@ export const initStoreFile = async (): Promise<void> => {
 }
 
 export const setStore = async (content: serverType[]): Promise<void> => {
-  writeFile(storeFilePath, JSON.stringify(content))
+  await writeFile(storeFilePath, JSON.stringify(content))
 }

src/views/Home/index.vue

@@ -1,10 +1,11 @@
-<template lang="pug">
-div.container.w-full
-    server-menu.server-menu
+<template>
+  <div class="container w-full">
+    <server-menu class="server-menu" />
 
-    divider
+    <divider />
 
-    server-tab.w-full
+    <server-tab class="w-full" />
+  </div>
 </template>
 
 <script setup lang="ts">

src/views/serverMenu/addForm.vue

@@ -99,15 +99,7 @@ const submit = async () => {
     return
   }
 
-  // 合并serverList
-  const serverList = props.serverList
-  serverList.push(state.form)
-
-  // 推送store
-  await store.dispatch('serverList/updateServer', serverList)
-  await store.dispatch('serverList/setServer')
-
-  emit('submit', 'submit')
+  emit('submit', { server: state.form, eventName: 'submit' })
   await clearFrom()
   ElNotification({
     title: '提示',

src/views/serverMenu/editForm.vue

@@ -81,18 +81,26 @@ const handleSubmit = async () => {
   }
 
   // 检测name是否重复
-  const serverIndex = props.serverList.findIndex((item: serverType) => item.name === state.form.name && item.name !== state.originFormName)
-  if (serverIndex !== -1) {
-    ElNotification({
-      title: '提示',
-      message: '数据库名称重复',
-      showClose: false,
-      duration: 3000
-    })
-    return
+  if (state.form.name !== state.originFormName) {
+    const serverIndex = props.serverList.findIndex((item: serverType) => item.name === state.form.name)
+    if (serverIndex !== -1) {
+      ElNotification({
+        title: '提示',
+        message: '数据库名称重复',
+        showClose: false,
+        duration: 3000
+      })
+      return
+    }
   }
 
-  emit('submit', 'submit')
+  emit('submit', { server: state.form, originName: state.originFormName, eventName: 'submit' })
+  ElNotification({
+    title: '提示',
+    message: '编辑数据库成功',
+    showClose: false,
+    duration: 2000
+  })
 }
 const ping = async () => {
   try {
@@ -115,7 +123,7 @@ watch(props, () => {
 })
 
 onMounted(() => {
-  state.form = props.form
+  state.form = JSON.parse(JSON.stringify(props.form))
   state.originFormName = props.form.name
 })
 </script>

src/views/serverMenu/index.vue

@@ -58,7 +58,7 @@
 
     <!-- editFormDialog -->
     <el-dialog title="编辑" v-model="dialogState.editFormDialog">
-      <edit-form :form="dialogState.currentServerForm" :server-list="state.serverList" @delete="handleEditFormDialogEventDel" @cancel="handleEditFormDialogEventCancel" @submit="handleEditFormDialogEventSubmit" />
+      <edit-form :form="dialogState.currentServerForm" :server-list="state.serverList" @delete="handleEditFormDialogEventDel" @cancel="handleEditFormDialogEventCancel" @submit="handleEditFormDialogEventSubmit" v-if="dialogState.editFormDialog" />
     </el-dialog>
     <!-- editFormDialog end -->
   </div>
@@ -68,7 +68,7 @@
 import { useStore } from 'vuex'
 import { onMounted, reactive } from 'vue'
 import { getClient } from '@/utils/redis'
-import { serverType, initStoreFile } from '@/utils/store'
+import { serverType, initStoreFile, getStore } from '@/utils/store'
 import { Setting, Plus } from '@element-plus/icons-vue'
 import AddForm from './addForm.vue'
 import EditForm from './editForm.vue'
@@ -129,14 +129,22 @@ const handleChildItemClick = (server: serverType, db: string): void => {
 }
 const fetchData = async () => {
   await initStoreFile()
-  await store.commit('serverList/initServerList')
-
-  state.serverList = store.getters.serverList
+  const serverList = await getStore()
+  await store.dispatch('serverList/updateServer', serverList)
+  state.serverList = serverList
+}
+const addServer = async (server: serverType) => {
+  state.serverList.push(server)
 }
-const handleAddFormDialogEvent = (eventName: string) => {
+const handleAddFormDialogEvent = async (data: { server: serverType, eventName: string }) => {
   dialogState.addFormDialog = false
-  if (eventName === 'submit') {
-    fetchData()
+  if (data.eventName === 'submit') {
+    // 合并serverList
+    await addServer(data.server)
+
+    // 推送store
+    await store.dispatch('serverList/updateServer', state.serverList)
+    await store.dispatch('serverList/setServer')
   }
 }
 const openEditFormDialog = (form: serverType) => {
@@ -153,15 +161,18 @@ const handleEditFormDialogEventDel = async (serverID: number) => {
   await delServer(serverID)
   await store.dispatch('serverList/updateServer', state.serverList)
   await store.dispatch('serverList/setServer')
-  await fetchData()
   dialogState.editFormDialog = false
 }
-const handleEditFormDialogEventSubmit = async (eventName: string) => {
-  await store.dispatch('serverList/updateServer', state.serverList)
-  await store.dispatch('serverList/setServer')
-  dialogState.editFormDialog = false
-  if (eventName === 'submit') {
-    await fetchData()
+const updateServer = async (server: serverType, originName: string) => {
+  const serverListIndex = state.serverList.findIndex((item: serverType) => item.name === originName)
+  state.serverList[serverListIndex] = server
+}
+const handleEditFormDialogEventSubmit = async (data: { server: serverType, originName: string, eventName: string }) => {
+  await updateServer(data.server, data.originName)
+  if (data.eventName === 'submit') {
+    await store.dispatch('serverList/updateServer', state.serverList)
+    await store.dispatch('serverList/setServer')
+    dialogState.editFormDialog = false
   }
 }