feat: 调整本地开发打包配置，增加人机验证组件

xinkeaboard-web/.gitignore

@@ -5,3 +5,4 @@
 /.vite-cache
 /.DS_Store
 /.output
+/stats.html

xinkeaboard-web/assets/language/en.js

@@ -68,6 +68,9 @@ export const lang_en = {
     '请输入6～20位英文、数字、符号': 'Please input 6~20 English characters, numbers and symbols',
     '会员邮箱账户激活成功，请登录': 'Member email account activated successfully, please sign in',
 
+    //邮件人机验证
+    '向右滑动': 'Slide to the right',
+
     //注册协议页面
     '我已知悉？': 'I understand that?',
 

xinkeaboard-web/assets/language/zh.js

@@ -77,6 +77,9 @@ export const lang_zn = {
     '请同意用户注册协议及隐私政策': '请同意用户注册协议及隐私政策',
     '会员邮箱账户激活成功，请登录': '会员邮箱账户激活成功，请登录',
 
+    //邮件人机验证
+    '向右滑动': '向右滑动',
+
     '发送询盘':'发送询盘',
     '咨询量':'咨询量',
     '发送':'发送',

xinkeaboard-web/assets/style/register.scss

@@ -140,6 +140,11 @@
             }
           }
 
+          .login-verify {
+              height: 220px;
+              margin-top: 10px;
+          }
+
           .cancel {
             position: absolute;
             right: 0;

xinkeaboard-web/components/SliderVerify.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="verify-content">
+    <slide-verify
+      ref="block"
+      :slider-text="sliderText"
+      @again="onAgain"
+      @success="onSuccess"
+      @fail="onFail"
+      @refresh="onRefresh"
+    ></slide-verify>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, computed } from "vue";
+import SlideVerify from "vue3-slide-verify";
+import type { SlideVerifyInstance } from "vue3-slide-verify";
+import { getCurLanguage } from "@/composables/common.js";
+import "vue3-slide-verify/dist/style.css";
+
+
+const block = ref<SlideVerifyInstance>();
+const L = getCurLanguage();
+
+
+const sliderText = computed(() => L["向右滑动"])
+
+const onSuccess = () => {
+  // TODO: 根据权限跳转
+};
+
+const onFail = () => {};
+
+const onRefresh = () => {
+  block.value?.refresh();
+};
+
+const onAgain = () => {
+  // 刷新
+  block.value?.refresh();
+};
+</script>
+<style lang="scss" scoped>
+.verify-content {
+  position: relative;
+  overflow: hidden;
+  height: 100%;
+
+  .slide-verify {
+    // width: 100% !important;
+  }
+}
+</style>

xinkeaboard-web/nuxt.config.ts

@@ -13,13 +13,23 @@ export default defineNuxtConfig({
   ],
   modules: ["@pinia/nuxt"],
   vite: {
-    // cacheDir: ".vite-cache", // 指定 vite 缓存位置（默认就是这个）
+    // Vite 在开发模式下会对第三方依赖（node_modules）做一次 预打包（pre-bundling），以便提高运行时性能。
     optimizeDeps: {
-      // include: ['element-plus', '@popperjs/core'],
+      include: [
+        "element-plus",
+        "axios",
+        "qs",
+        "pinia",
+        "pinia-plugin-persistedstate",
+        "@gtm-support/vue-gtm",
+        "vue3-google-map",
+        "vue3-slide-verify",
+        "qrcanvas",
+      ],
     },
     // SSR 打包时被内联进产物，而不是被当成外部依赖由 Node 直接加载
     ssr: {
-      noExternal: ['@popperjs/core', 'element-plus'],
+      noExternal: ["@popperjs/core", "element-plus"],
     },
     css: {
       preprocessorOptions: {
@@ -61,14 +71,12 @@ export default defineNuxtConfig({
               },
             },
           }
-        : undefined
-    // build: {
-    //   rollupOptions: {
-    //     plugins: [
-    //       visualizer({ open: true }),
-    //     ],
+        : undefined,
+    // {
+    //     rollupOptions: {
+    //       plugins: [visualizer({ open: true })],
+    //     },
     //   },
-    // },
   },
   runtimeConfig: {},
   app: {

xinkeaboard-web/package.json

@@ -27,6 +27,7 @@
     "qrcanvas": "^3.1.2",
     "qs": "^6.11.0",
     "sass": "1.59.3",
-    "vue3-google-map": "^0.15.0"
+    "vue3-google-map": "^0.15.0",
+    "vue3-slide-verify": "^1.1.7"
   }
 }

xinkeaboard-web/pages/member/index/home.vue

@@ -209,7 +209,6 @@ import { reactive, onMounted, getCurrentInstance, ref } from "vue";
 import { useRouter } from "vue-router";
 import { ElDialog,ElForm,ElFormItem } from "element-plus";
 import { getCurLanguage } from '@/composables/common.js';
-import { slice } from "lodash";
 definePageMeta({
   layout: "member",
   middleware: ["auth"],

xinkeaboard-web/pages/register.vue

@@ -5,7 +5,9 @@
         <nuxt-link tag="a" class="l_logo" :to="'/'">
           <img
             class="img"
-            :src="filtersStore.getSiteLogo ? filtersStore.getSiteLogo : defaultImg "
+            :src="
+              filtersStore.getSiteLogo ? filtersStore.getSiteLogo : defaultImg
+            "
             :onerror="defaultImg"
             alt
           />
@@ -35,7 +37,9 @@
           </div>
           <div class="center">
             <p style="width: 296px">
-              {{ L["我们将发送一封验证邮件到你的邮箱，此邮箱将作为登录用户名"] }}
+              {{
+                L["我们将发送一封验证邮件到你的邮箱，此邮箱将作为登录用户名"]
+              }}
             </p>
             <div class="item account">
               <span
@@ -57,14 +61,17 @@
                 <span style="color: #bbb" class="iconfont icon-cuowu"></span>
               </div>
             </div>
-            <div class="error">
+            <div class="error" v-if="errorMsg">
               <span
-                v-if="errorMsg"
                 style="color: #e1251b; font-size: 14px"
                 class="iconfont icon-jubao"
               ></span>
               {{ errorMsg }}
             </div>
+            <!-- 人机验证组件 -->
+            <!-- <div class="login-verify">
+              <SliderVerify />
+            </div> -->
             <a
               href="javascript:void(0)"
               @click="sendEmailLink"
@@ -117,7 +124,7 @@ import { useRoute, useRouter } from "vue-router";
 import { ref, getCurrentInstance, onMounted, watch } from "vue";
 import { ElMessage } from "element-plus";
 // import { lang_zn } from "@/assets/language/zh";
-import { getCurLanguage } from '@/composables/common.js';
+import { getCurLanguage } from "@/composables/common.js";
 import { useUserInfo } from "@/store/user.js";
 import { useFiltersStore } from "@/store/filter.js";
 const filtersStore = useFiltersStore();
@@ -133,31 +140,32 @@ const { proxy } = getCurrentInstance();
 const defaultImg = ref("/common_top_logo.png");
 const defaultBgImg = ref("/login_bg.png");
 const fromurl = ref("");
-const emailCalc = ref()
-const ImgBG = ref('')
+const emailCalc = ref();
+const ImgBG = ref("");
 
 useHead({
-  title: 'Register',
+  title: "Register",
   meta: [
     {
       name: "description",
-      content: 'Register',
+      content: "Register",
     },
     {
       name: "keywords",
-      content: 'Register',
+      content: "Register",
     },
   ],
 });
 
 //获取背景图
 const getBg = () => {
-  get('v3/system/front/setting/getSettings?names=main_user_register_bg').then(res=>{
-    ImgBG.value = res.data[0]
-  })
-}
-getBg()
-
+  get("v3/system/front/setting/getSettings?names=main_user_register_bg").then(
+    (res) => {
+      ImgBG.value = res.data[0];
+    }
+  );
+};
+getBg();
 
 const sendEmailLink = () => {
   let param = {};

xinkeaboard-web/pnpm-lock.yaml

@@ -38,6 +38,9 @@ importers:
       vue3-google-map:
         specifier: ^0.15.0
         version: 0.15.0(vue@3.5.17(typescript@5.8.3))
+      vue3-slide-verify:
+        specifier: ^1.1.7
+        version: 1.1.7(typescript@5.8.3)
     devDependencies:
       '@oxc-parser/binding-darwin-x64':
         specifier: 0.75.1
@@ -3830,6 +3833,9 @@ packages:
     peerDependencies:
       vue: '3'
 
+  vue3-slide-verify@1.1.7:
+    resolution: {integrity: sha512-EP1Ddr5N8wiF5HIEeF6+pKyu3jqWdBkhM0tB1gr/qU6J40IgklcqBBg9YAVaHv7uV4OoRmE5hlhrobPZArvzkw==}
+
   vue@3.5.17:
     resolution: {integrity: sha512-LbHV3xPN9BeljML+Xctq4lbz2lVHCR6DtbpTf5XIO6gugpXUN49j2QQPcMj086r9+AkJ0FfUT8xjulKKBkkr9g==}
     peerDependencies:
@@ -8006,6 +8012,12 @@ snapshots:
       fast-deep-equal: 3.1.3
       vue: 3.5.17(typescript@5.8.3)
 
+  vue3-slide-verify@1.1.7(typescript@5.8.3):
+    dependencies:
+      vue: 3.5.17(typescript@5.8.3)
+    transitivePeerDependencies:
+      - typescript
+
   vue@3.5.17(typescript@5.8.3):
     dependencies:
       '@vue/compiler-dom': 3.5.17