feat: 集成二维码扫描功能，优化视频流处理，添加 vconsole 和 SSL 插件

2026-01-08 15:23:25 +07:00
parent 08939bec64
commit 04a5beed89
9 changed files with 108 additions and 371 deletions
--- a/components.d.ts
+++ b/components.d.ts
@@ -49,8 +49,6 @@ declare module 'vue' {
    IonRouterOutlet: typeof import('@ionic/vue')['IonRouterOutlet']
    IonRow: typeof import('@ionic/vue')['IonRow']
    IonSearchbar: typeof import('@ionic/vue')['IonSearchbar']
-    IonSegment: typeof import('@ionic/vue')['IonSegment']
-    IonSegmentButton: typeof import('@ionic/vue')['IonSegmentButton']
    IonSelect: typeof import('@ionic/vue')['IonSelect']
    IonSelectOption: typeof import('@ionic/vue')['IonSelectOption']
    IonSpinner: typeof import('@ionic/vue')['IonSpinner']
@@ -109,8 +107,6 @@ declare global {
  const IonRouterOutlet: typeof import('@ionic/vue')['IonRouterOutlet']
  const IonRow: typeof import('@ionic/vue')['IonRow']
  const IonSearchbar: typeof import('@ionic/vue')['IonSearchbar']
-  const IonSegment: typeof import('@ionic/vue')['IonSegment']
-  const IonSegmentButton: typeof import('@ionic/vue')['IonSegmentButton']
  const IonSelect: typeof import('@ionic/vue')['IonSelect']
  const IonSelectOption: typeof import('@ionic/vue')['IonSelectOption']
  const IonSpinner: typeof import('@ionic/vue')['IonSpinner']
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
    "pinia": "^3.0.4",
    "qrcode": "^1.5.4",
    "tailwindcss": "^4.1.18",
+    "vconsole": "^3.15.1",
    "vee-validate": "^4.15.1",
    "vue": "^3.5.25",
    "vue-i18n": "^11.2.2",
@@ -72,6 +73,7 @@
    "@types/lodash-es": "^4.17.12",
    "@types/node": "^24.10.2",
    "@types/qrcode": "^1.5.6",
+    "@vitejs/plugin-basic-ssl": "^2.1.3",
    "@vitejs/plugin-legacy": "^7.2.1",
    "@vitejs/plugin-vue": "^6.0.2",
    "@vitejs/plugin-vue-jsx": "^5.1.2",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -98,6 +98,9 @@ importers:
      tailwindcss:
        specifier: ^4.1.18
        version: 4.1.18
+      vconsole:
+        specifier: ^3.15.1
+        version: 3.15.1
      vee-validate:
        specifier: ^4.15.1
        version: 4.15.1(vue@3.5.25(typescript@5.9.3))
@@ -165,6 +168,9 @@ importers:
      '@types/qrcode':
        specifier: ^1.5.6
        version: 1.5.6
+      '@vitejs/plugin-basic-ssl':
+        specifier: ^2.1.3
+        version: 2.1.3(vite@7.2.7(@types/node@24.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2))
      '@vitejs/plugin-legacy':
        specifier: ^7.2.1
        version: 7.2.1(terser@5.44.1)(vite@7.2.7(@types/node@24.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2))
@@ -3698,6 +3704,12 @@ packages:
      '@vite-pwa/assets-generator':
        optional: true

+  '@vitejs/plugin-basic-ssl@2.1.3':
+    resolution: {integrity: sha512-mxZpCH6SjsAFkiVgaclJGTcYIHm2qxw4x2EP/AUlEVqHhk8ojU75thpvTalc5lAvIK3sJjpVxhzYNoLXOuJGKw==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    peerDependencies:
+      vite: ^6.0.0 || ^7.0.0
+
  '@vitejs/plugin-legacy@7.2.1':
    resolution: {integrity: sha512-CaXb/y0mlfu7jQRELEJJc2/5w2bX2m1JraARgFnvSB2yfvnCNJVWWlqAo6WjnKoepOwKx8gs0ugJThPLKCOXIg==}
    engines: {node: ^20.19.0 || >=22.12.0}
@@ -4584,6 +4596,10 @@ packages:
  copy-paste@2.2.0:
    resolution: {integrity: sha512-jqSL4r9DSeiIvJZStLzY/sMLt9ToTM7RsK237lYOTG+KcbQJHGala3R1TUpa8h1p9adswVgIdV4qGbseVhL4lg==}

+  copy-text-to-clipboard@3.2.2:
+    resolution: {integrity: sha512-T6SqyLd1iLuqPA90J5N4cTalrtovCySh58iiZDGJ6FGznbclKh4UI+FGacQSgFzwKG77W7XT5gwbVEbd9cIH1A==}
+    engines: {node: '>=12'}
+
  core-js-compat@3.47.0:
    resolution: {integrity: sha512-IGfuznZ/n7Kp9+nypamBhvwdwLsW6KC8IOaURw2doAK5e98AG3acVLdh0woOnEqCfUtS+Vu882JE4k/DAm3ItQ==}

@@ -6818,6 +6834,9 @@ packages:
  muggle-string@0.4.1:
    resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}

+  mutation-observer@1.0.3:
+    resolution: {integrity: sha512-M/O/4rF2h776hV7qGMZUH3utZLO/jK7p8rnNgGkjKUw8zCGjRQPxB8z6+5l8+VjRUQ3dNYu4vjqXYLr+U8ZVNA==}
+
  mute-stream@0.0.8:
    resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==}

@@ -8700,6 +8719,9 @@ packages:
      reka-ui: ^2.0.0
      vue: ^3.3.0

+  vconsole@3.15.1:
+    resolution: {integrity: sha512-KH8XLdrq9T5YHJO/ixrjivHfmF2PC2CdVoK6RWZB4yftMykYIaXY1mxZYAic70vADM54kpMQF+dYmvl5NRNy1g==}
+
  vee-validate@4.15.1:
    resolution: {integrity: sha512-DkFsiTwEKau8VIxyZBGdO6tOudD+QoUBPuHj3e6QFqmbfCRj1ArmYWue9lEp6jLSWBIw4XPlDLjFIZNLdRAMSg==}
    peerDependencies:
@@ -12969,6 +12991,10 @@ snapshots:
      - workbox-build
      - workbox-window

+  '@vitejs/plugin-basic-ssl@2.1.3(vite@7.2.7(@types/node@24.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2))':
+    dependencies:
+      vite: 7.2.7(@types/node@24.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2)
+
  '@vitejs/plugin-legacy@7.2.1(terser@5.44.1)(vite@7.2.7(@types/node@24.10.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2))':
    dependencies:
      '@babel/core': 7.28.5
@@ -13888,6 +13914,8 @@ snapshots:
    dependencies:
      iconv-lite: 0.4.24

+  copy-text-to-clipboard@3.2.2: {}
+
  core-js-compat@3.47.0:
    dependencies:
      browserslist: 4.28.1
@@ -16578,6 +16606,8 @@ snapshots:

  muggle-string@0.4.1: {}

+  mutation-observer@1.0.3: {}
+
  mute-stream@0.0.8: {}

  nano-spawn@2.0.0: {}
@@ -18854,6 +18884,13 @@ snapshots:
    transitivePeerDependencies:
      - '@vue/composition-api'

+  vconsole@3.15.1:
+    dependencies:
+      '@babel/runtime': 7.28.4
+      copy-text-to-clipboard: 3.2.2
+      core-js: 3.47.0
+      mutation-observer: 1.0.3
+
  vee-validate@4.15.1(vue@3.5.25(typescript@5.9.3)):
    dependencies:
      '@vue/devtools-api': 7.7.9
--- a/src/components/qr-scanner/index.vue
+++ b/src/components/qr-scanner/index.vue
@@ -1,342 +1,33 @@
-<script setup lang="ts">
-import type { QRScanResult } from "@/composables/useQRScanner";
-import { CapacitorBarcodeScanner } from "@capacitor/barcode-scanner";
-import { closeOutline, flashlightOutline, imagesOutline } from "ionicons/icons";
+<script lang='ts' setup>
+const videoInst = useTemplateRef<HTMLVideoElement>("videoInst");

-interface Props {
-  title?: string;
+async function start() {
+  if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+    console.error("getUserMedia not supported on your browser!");
+    return;
+  }
+  if (!videoInst.value) {
+    console.error("video element not found!");
+    return;
+  }
+  const stream = await navigator.mediaDevices.getUserMedia({
+    audio: false,
+    video: { facingMode: "environment" },
+  });
+  videoInst.value.srcObject = stream;
+  videoInst.value.setAttribute("playsinline", "true"); // required to tell iOS safari we don't want fullscreen
+  await videoInst.value.play();
 }

-interface Emits {
-  scanSuccess: [result: QRScanResult];
-  scanFromGallery: [];
-  cancel: [];
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  title: "扫描二维码",
-});
-
-const emit = defineEmits<Emits>();
-
-const { t } = useI18n();
-const { vibrate } = useHaptics();
-const isScanning = ref(false);
-const isTorchEnabled = ref(false);
-
-// 开始扫描
-async function startScanning() {
-  try {
-    isScanning.value = true;
-
-    // 开始扫描 - Google Barcode Scanner 会打开原生UI
-    const result = await CapacitorBarcodeScanner.scanBarcode({
-      hint: 17, // ALL - 扫描所有格式
-      scanInstructions: props.title,
-      scanButton: false,
-      cameraDirection: 1, // BACK camera
-    });
-
-    if (result.ScanResult) {
-      // 震动反馈
-      vibrate();
-
-      // 发送扫描结果
-      emit("scanSuccess", {
-        text: result.ScanResult,
-        format: result.format?.toString() || "UNKNOWN",
-        rawValue: result.ScanResult,
-        displayValue: result.ScanResult,
-      });
-    }
-    else {
-      // 用户取消了扫描
-      emit("cancel");
-    }
-  }
-  catch (error: any) {
-    console.error("Start scanning failed:", error);
-    if (error.message !== "User cancelled") {
-      emit("cancel");
-    }
-  }
-  finally {
-    await stopScanning();
-  }
-}
-
-// 停止扫描
-async function stopScanning() {
-  try {
-    document.querySelector("body")?.classList.remove("barcode-scanner-active");
-    isScanning.value = false;
-    isTorchEnabled.value = false;
-  }
-  catch (error) {
-    console.error("Stop scanning failed:", error);
-  }
-}
-
-// 切换手电筒
-async function toggleTorch() {
-  try {
-    // Google Barcode Scanner 不支持手电筒控制
-    // 此功能在使用 Google Scanner UI 时不可用
-    vibrate();
-  }
-  catch (error) {
-    console.error("Toggle torch failed:", error);
-  }
-}
-
-// 从相册选择
-function handleGalleryClick() {
-  stopScanning();
-  emit("scanFromGallery");
-}
-
-// 取消扫描
-function handleCancel() {
-  stopScanning();
-  emit("cancel");
-}
-
-// 组件挂载后自动开始扫描
 onMounted(() => {
-  startScanning();
-});
-
-// 组件卸载前停止扫描
-onUnmounted(() => {
-  stopScanning();
+  start();
 });
 </script>

 <template>
-  <div class="qr-scanner-container">
-    <!-- 顶部操作栏 -->
-    <div class="qr-scanner-header">
-      <IonButton fill="clear" class="header-btn" @click="handleCancel">
-        <IonIcon slot="icon-only" :icon="closeOutline" />
-      </IonButton>
-
-      <div class="header-title">
-        {{ title }}
-      </div>
-
-      <IonButton fill="clear" class="header-btn" @click="toggleTorch">
-        <IonIcon slot="icon-only" :icon="flashlightOutline" :class="{ 'torch-on': isTorchEnabled }" />
-      </IonButton>
-    </div>
-
-    <!-- 扫描区域 -->
-    <div class="qr-scanner-content">
-      <!-- 扫描框 -->
-      <div class="scan-frame">
-        <!-- 四个角的装饰 -->
-        <div class="corner corner-tl" />
-        <div class="corner corner-tr" />
-        <div class="corner corner-bl" />
-        <div class="corner corner-br" />
-
-        <!-- 扫描线 -->
-        <div v-if="isScanning" class="scan-line" />
-      </div>
-
-      <!-- 提示文字 -->
-      <div class="scan-hint">
-        {{ t("scanner.hint") }}
-      </div>
-    </div>
-
-    <!-- 底部操作区 -->
-    <div class="qr-scanner-footer">
-      <IonButton expand="block" fill="clear" class="footer-btn" @click="handleGalleryClick">
-        <IonIcon slot="start" :icon="imagesOutline" />
-        {{ t("scanner.fromGallery") }}
-      </IonButton>
-    </div>
+  <div>
+    <video ref="videoInst" />
  </div>
 </template>

-<style scoped>
-.qr-scanner-container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 9999;
-  display: flex;
-  flex-direction: column;
-}
-
-/* 顶部操作栏 */
-.qr-scanner-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: env(safe-area-inset-top) 8px 0;
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(10px);
-  z-index: 10;
-}
-
-.header-btn {
-  --color: white;
-  --padding-start: 8px;
-  --padding-end: 8px;
-  margin: 0;
-}
-
-.header-title {
-  color: white;
-  font-size: 17px;
-  font-weight: 600;
-  letter-spacing: -0.4px;
-}
-
-.torch-on {
-  color: #fbbf24 !important;
-}
-
-/* 扫描内容区 */
-.qr-scanner-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 40px 20px;
-  position: relative;
-}
-
-/* 扫描框 */
-.scan-frame {
-  width: 260px;
-  height: 260px;
-  position: relative;
-  margin-bottom: 40px;
-}
-
-/* 四个角 */
-.corner {
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  border-color: #00d4ff;
-  border-style: solid;
-}
-
-.corner-tl {
-  top: 0;
-  left: 0;
-  border-width: 3px 0 0 3px;
-  border-radius: 4px 0 0 0;
-}
-
-.corner-tr {
-  top: 0;
-  right: 0;
-  border-width: 3px 3px 0 0;
-  border-radius: 0 4px 0 0;
-}
-
-.corner-bl {
-  bottom: 0;
-  left: 0;
-  border-width: 0 0 3px 3px;
-  border-radius: 0 0 0 4px;
-}
-
-.corner-br {
-  bottom: 0;
-  right: 0;
-  border-width: 0 3px 3px 0;
-  border-radius: 0 0 4px 0;
-}
-
-/* 扫描线动画 */
-.scan-line {
-  position: absolute;
-  width: 100%;
-  height: 2px;
-  background: linear-gradient(90deg, transparent, #00d4ff, transparent);
-  box-shadow: 0 0 10px #00d4ff;
-  animation: scan 2s linear infinite;
-  top: 0;
-}
-
-@keyframes scan {
-  0% {
-    top: 0;
-    opacity: 0;
-  }
-  10% {
-    opacity: 1;
-  }
-  90% {
-    opacity: 1;
-  }
-  100% {
-    top: 100%;
-    opacity: 0;
-  }
-}
-
-/* 提示文字 */
-.scan-hint {
-  color: white;
-  font-size: 15px;
-  text-align: center;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
-  letter-spacing: 0.5px;
-}
-
-/* 底部操作区 */
-.qr-scanner-footer {
-  padding: 0 20px env(safe-area-inset-bottom);
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(10px);
-  padding-top: 20px;
-  padding-bottom: calc(20px + env(safe-area-inset-bottom));
-}
-
-.footer-btn {
-  --color: white;
-  --border-radius: 12px;
-  margin: 0;
-  font-size: 16px;
-  font-weight: 500;
-  height: 50px;
-}
-
-.footer-btn ion-icon {
-  font-size: 24px;
-  margin-right: 8px;
-}
-</style>
-
-<style>
-/* 全局样式：隐藏 body 内容以显示相机 */
-body.barcode-scanner-active {
-  background: transparent !important;
-  --ion-background-color: transparent !important;
-}
-
-body.barcode-scanner-active ion-app,
-body.barcode-scanner-active ion-content {
-  background: transparent !important;
-  --background: transparent !important;
-}
-
-/* Modal 样式 */
-.qr-scanner-modal {
-  --background: transparent;
-  --backdrop-opacity: 0;
-}
-
-.qr-scanner-modal ion-modal {
-  --background: transparent;
-}
-</style>
+<style lang='css' scoped></style>
--- a/src/composables/useQRScanner.ts
+++ b/src/composables/useQRScanner.ts
@@ -1,5 +1,4 @@
-import { CapacitorBarcodeScanner } from "@capacitor/barcode-scanner";
-import { Capacitor } from "@capacitor/core";
+import { CapacitorBarcodeScanner, CapacitorBarcodeScannerCameraDirection, CapacitorBarcodeScannerTypeHint } from "@capacitor/barcode-scanner";
 import { toastController } from "@ionic/vue";

 export interface QRScanResult {
@@ -16,56 +15,41 @@ export interface ScannerOptions {
 export function useQRScanner() {
  const { t } = useI18n();
  const { vibrate } = useHaptics();
-  const isSupported = Capacitor.isNativePlatform();

-  async function showError(message: string) {
-    const toast = await toastController.create({
-      message,
-      duration: 2000,
-      position: "bottom",
-      color: "danger",
-    });
-    await toast.present();
-  };
-
-  async function open(options?: ScannerOptions): Promise<QRScanResult | null> {
+  async function open(options?: ScannerOptions) {
    try {
-      if (!isSupported) {
-        await showError(t("scanner.notSupported"));
-        return null;
-      }
-
      vibrate();

      const result = await CapacitorBarcodeScanner.scanBarcode({
-        hint: 0,
+        hint: CapacitorBarcodeScannerTypeHint.QR_CODE,
        scanInstructions: options?.title || t("scanner.hint"),
-        cameraDirection: 1,
+        cameraDirection: CapacitorBarcodeScannerCameraDirection.BACK,
      });

-      if (result.ScanResult) {
-        vibrate();
-        return {
-          text: result.ScanResult,
-          format: result.format?.toString() || "UNKNOWN",
-          rawValue: result.ScanResult,
-          displayValue: result.ScanResult,
-        };
-      }
-
-      return null;
+      vibrate();
+      return {
+        text: result.ScanResult,
+        format: result.format,
+      };
    }
    catch (error: any) {
      console.log("error.message", error.message);
      if (error.code !== "OS-PLUG-BARC-0006") {
-        await showError(t("scanner.openError"));
+        const toast = await toastController.create({
+          message: t("scanner.openError"),
+          duration: 2000,
+          position: "bottom",
+          color: "danger",
+        });
+        await toast.present();
      }
-      return null;
    }
  }
+  function close() {
+  }

  return {
-    isSupported,
    open,
+    close,
  };
 }
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,6 @@
 import { IonicVue } from "@ionic/vue";
 import { createPinia } from "pinia";
+import VConsole from "vconsole";
 import { useRegisterSW } from "virtual:pwa-register/vue";
 import { createApp } from "vue";
 import uiComponents from "@/ui";
@@ -66,6 +67,12 @@ watch(needRefresh, (refresh) => {
  }
 });

+if (import.meta.env.DEV) {
+  const vConsole = new VConsole();
+  globalThis.vConsole = vConsole;
+  console.log("VConsole is enabled in development mode.");
+}
+
 function initTradingView() {
  const { VITE_TRADINGVIEW_LIBRARY_URL } = useEnv();
  const promise1 = new Promise((resolve) => {
--- a/src/views/riwa/index.vue
+++ b/src/views/riwa/index.vue
@@ -1,7 +1,22 @@
 <script setup lang="ts">
 import IconParkOutlineApplicationMenu from "~icons/icon-park-outline/application-menu";
+import IconParkOutlineScanCode from "~icons/icon-park-outline/scan-code";
 import News from "./components/news.vue";
 import Rwa from "./components/rwa.vue";
+
+const { open } = useQRScanner();
+
+async function handleScan() {
+  const result = await open({
+    title: "扫描二维码",
+  });
+
+  if (result) {
+    console.log("扫描结果:", result);
+    // TODO: 根据扫描结果进行相应处理
+    // 例如：跳转到对应页面、显示信息等
+  }
+}
 </script>

 <template>
@@ -15,6 +30,9 @@ import Rwa from "./components/rwa.vue";
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true" class="ion-padding">
+      <ion-button fill="clear" @click="handleScan">
+        <IconParkOutlineScanCode slot="icon-only" />
+      </ion-button>
      <!-- <pwa-install-button class="mb-4" /> -->
      <Rwa />
      <News />
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
@@ -32,7 +32,7 @@ async function handleScan() {
  });

  if (result) {
-    console.log("扫描结果:", result);
+    console.log("扫描结果:", result.text);
    // TODO: 根据扫描结果进行相应处理
    // 例如：跳转到对应页面、显示信息等
  }
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,6 +2,7 @@ import fs from "node:fs";
 import path from "node:path";
 import process from "node:process";
 import tailwindcss from "@tailwindcss/vite";
+import basicSsl from "@vitejs/plugin-basic-ssl";
 import legacy from "@vitejs/plugin-legacy";
 import vue from "@vitejs/plugin-vue";
 import jsx from "@vitejs/plugin-vue-jsx";
@@ -78,6 +79,7 @@ export default defineConfig({
        skipWaiting: true,
      },
    }),
+    basicSsl(),
    generateVersion({
      version: appVersion,
    }),