argon2换成bcrypt，添加bootstrap

package.json

@@ -14,30 +14,33 @@
   },
   "main": "background.js",
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
-    "@fortawesome/free-brands-svg-icons": "^5.15.4",
-    "@fortawesome/free-regular-svg-icons": "^5.15.4",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@fortawesome/vue-fontawesome": "^2.0.10",
-    "argon2": "^0.25.1",
-    "core-js": "^3.6.5",
-    "element-ui": "^2.15.14",
-    "sqlite3": "^4.2.0",
-    "vue": "^2.6.11",
-    "vue-router": "^3.2.0",
-    "vuex": "^3.4.0"
+    "@fortawesome/fontawesome-svg-core": "1.2.36",
+    "@fortawesome/free-brands-svg-icons": "5.15.4",
+    "@fortawesome/free-regular-svg-icons": "5.15.4",
+    "@fortawesome/free-solid-svg-icons": "5.15.4",
+    "@fortawesome/vue-fontawesome": "2.0.10",
+    "bcryptjs": "^2.4.3",
+    "bootstrap": "4.6.0",
+    "core-js": "3.6.5",
+    "element-ui": "2.15.14",
+    "jquery": "3.5.1",
+    "popper.js": "1.16.1",
+    "sqlite3": "4.2.0",
+    "vue": "2.6.11",
+    "vue-router": "3.2.0",
+    "vuex": "3.4.0"
   },
   "devDependencies": {
-    "@electron/rebuild": "^3.2.13",
-    "@vue/cli-plugin-babel": "^4.5.19",
-    "@vue/cli-plugin-router": "~4.5.17",
-    "@vue/cli-plugin-vuex": "~4.5.17",
-    "@vue/cli-service": "^4.5.19",
+    "@electron/rebuild": "3.2.13",
+    "@vue/cli-plugin-babel": "4.5.19",
+    "@vue/cli-plugin-router": "4.5.17",
+    "@vue/cli-plugin-vuex": "4.5.17",
+    "@vue/cli-service": "4.5.19",
     "electron": "11.5.0",
     "electron-builder": "22.9.1",
-    "electron-devtools-installer": "^3.1.0",
-    "vue-cli-plugin-electron-builder": "~2.1.1",
-    "vue-template-compiler": "^2.6.11"
+    "electron-devtools-installer": "3.1.0",
+    "vue-cli-plugin-electron-builder": "2.1.1",
+    "vue-template-compiler": "2.6.11"
   },
   "browserslist": [
     "> 1%",

src/background.js

@@ -3,7 +3,8 @@
 import { app, protocol, BrowserWindow, ipcMain } from 'electron'
 import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
 import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
-const argon2 = require('argon2')
+// 替换argon2为bcryptjs
+const bcrypt = require('bcryptjs')
 const isDevelopment = process.env.NODE_ENV !== 'production'
 
 // Scheme must be registered before the app is ready
@@ -129,14 +130,15 @@ if (isDevelopment) {
   }
 }
 
-// 实现argon2Test接口
-ipcMain.handle('argon2Test', async (event, inputString) => {
+// 实现hashTest接口（替换原来的argon2Test）
+ipcMain.handle('hashTest', async (event, inputString) => {
   try {
-    // 使用argon2.hash方法计算哈希值
-    const hash = await argon2.hash(inputString)
+    // 使用bcrypt.hash方法计算哈希值
+    const salt = await bcrypt.genSalt(10)
+    const hash = await bcrypt.hash(inputString, salt)
     return hash
   } catch (error) {
-    console.error('Error in argon2Test:', error)
+    console.error('Error in hashTest calculation:', error)
     throw error
   }
 })

src/main.js

@@ -8,6 +8,15 @@ import store from './store'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 
+// 导入jQuery、Popper.js和Bootstrap
+import $ from 'jquery'
+import 'popper.js'
+import 'bootstrap/dist/css/bootstrap.min.css'
+import 'bootstrap/dist/js/bootstrap.min.js'
+
+// 必须将jQuery挂载到window对象，以便Bootstrap可以访问它
+window.$ = window.jQuery = $
+
 // 导入FontAwesome
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

src/views/Home.vue

@@ -50,7 +50,7 @@
       </el-card>
     </div>
 
-    <!-- Element UI对话框 -->
+    <!-- 测试Element UI对话框 -->
     <el-dialog
       title="组件测试对话框"
       :visible.sync="dialogVisible"
@@ -74,6 +74,102 @@
         <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
       </span>
     </el-dialog>
+
+    <!-- Bootstrap组件测试 -->
+    <div class="bootstrap-test">
+      <h3>Bootstrap 组件测试</h3>
+
+      <!-- 1. 测试Bootstrap按钮 -->
+      <div class="mb-4">
+        <h4>按钮样式</h4>
+        <button type="button" class="btn btn-primary mr-2">Primary</button>
+        <button type="button" class="btn btn-secondary mr-2">Secondary</button>
+        <button type="button" class="btn btn-success mr-2">Success</button>
+        <button type="button" class="btn btn-danger mr-2">Danger</button>
+        <button type="button" class="btn btn-warning mr-2">Warning</button>
+        <button type="button" class="btn btn-info mr-2">Info</button>
+        <button type="button" class="btn btn-light">Light</button>
+      </div>
+
+      <!-- 2. 测试Bootstrap卡片 -->
+      <div class="card mb-4" style="max-width: 500px; margin: 0 auto;">
+        <div class="card-header bg-primary text-white">Bootstrap 卡片标题</div>
+        <div class="card-body">
+          <h5 class="card-title">这是一个Bootstrap卡片</h5>
+          <p class="card-text">卡片内容区域，可以放置文本、图片等各种内容。</p>
+          <a href="#" class="btn btn-primary" @click.prevent="showBootstrapModal">打开模态框</a>
+        </div>
+      </div>
+
+      <!-- 3. 测试Bootstrap表单 -->
+      <div class="card mb-4" style="max-width: 500px; margin: 0 auto;">
+        <div class="card-header bg-secondary text-white">Bootstrap 表单</div>
+        <div class="card-body">
+          <form>
+            <div class="form-group">
+              <label for="exampleInputEmail1">邮箱地址</label>
+              <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="请输入邮箱">
+              <small id="emailHelp" class="form-text text-muted">我们不会分享您的邮箱给任何人</small>
+            </div>
+            <div class="form-group">
+              <label for="exampleInputPassword1">密码</label>
+              <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码">
+            </div>
+            <div class="form-check">
+              <input type="checkbox" class="form-check-input" id="exampleCheck1">
+              <label class="form-check-label" for="exampleCheck1">记住我</label>
+            </div>
+            <button type="submit" class="btn btn-primary mt-2">提交</button>
+          </form>
+        </div>
+      </div>
+
+      <!-- 4. 测试Bootstrap导航 -->
+      <div class="mb-4">
+        <h4>导航栏</h4>
+        <nav class="navbar navbar-expand-lg navbar-light bg-light">
+          <a class="navbar-brand" href="#">Bootstrap</a>
+          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div class="collapse navbar-collapse" id="navbarNav">
+            <ul class="navbar-nav">
+              <li class="nav-item active">
+                <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#">特性</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#">关于</a>
+              </li>
+            </ul>
+          </div>
+        </nav>
+      </div>
+
+      <!-- Bootstrap模态框 -->
+      <div class="modal fade" id="bootstrapModal" tabindex="-1" role="dialog" aria-labelledby="bootstrapModalLabel" aria-hidden="true">
+        <div class="modal-dialog" role="document">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h5 class="modal-title" id="bootstrapModalLabel">Bootstrap模态框</h5>
+              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </div>
+            <div class="modal-body">
+              这是一个Bootstrap模态框，它使用JavaScript来控制显示和隐藏。
+              如果您能看到这个模态框，说明Bootstrap的JavaScript组件正常工作！
+            </div>
+            <div class="modal-footer">
+              <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
+              <button type="button" class="btn btn-primary">保存更改</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -109,12 +205,13 @@ export default {
   },
   methods: {
     async onInputChange() {
-      // 这部分代码保持不变
       if (this.inputString.trim()) {
         try {
           this.error = ''
+
+          // 安全地检查 window.electron 是否可用
           if (typeof window !== 'undefined' && window.electron && window.electron.ipcRenderer) {
-            const result = await window.electron.ipcRenderer.invoke('argon2Test', this.inputString)
+            const result = await window.electron.ipcRenderer.invoke('hashTest', this.inputString)
             this.result = result
           } else {
             throw new Error('Electron IPC 不可用')
@@ -142,6 +239,10 @@ export default {
     getElementIcon(iconId) {
       const icon = this.simplifiedIconOptions.find(item => item.id === iconId)
       return icon ? icon.elementIcon : ''
+    },
+    // 显示Bootstrap模态框
+    showBootstrapModal() {
+      $('#bootstrapModal').modal('show')
     }
   }
 }
@@ -209,4 +310,26 @@ pre {
 .dialog-footer button:first-child {
   margin-right: 10px;
 }
+
+.bootstrap-test {
+  margin-top: 40px;
+  padding: 20px;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+}
+
+.bootstrap-test h3 {
+  margin-bottom: 30px;
+  color: #333;
+}
+
+.bootstrap-test h4 {
+  margin: 20px 0 10px 0;
+  color: #555;
+}
+
+/* 确保样式不与Element UI冲突 */
+.bootstrap-test .btn {
+  margin-bottom: 5px;
+}
 </style>