[add] QRCode

2022-04-21 15:10:44 +08:00
parent 0d33233e22
commit 3e7e2df173
26 changed files with 1605 additions and 191 deletions
@@ -0,0 +1,23 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
@@ -0,0 +1,11 @@
+image: alpine:latest
+pages:
+  stage: deploy
+  script:
+  - mv -f ./dist/* public
+  - echo "Release Complete"
+  artifacts:
+    paths:
+    - public
+  only:
+  - master
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["johnsoncodehk.volar"]
+}
@@ -1,136 +0,0 @@
-<!doctype html>
-
-<head>
-    <title>掃QRCode-Instascan</title>
-    <html lang="utf8">
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-
-    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale = 1,user-scalable = no">
-
-    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/3.3.3/adapter.min.js"
-        charset="utf8"></script>
-
-
-    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"
-        charset="utf8"></script>
-
-    <script type="text/javascript" src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js"
-        charset="utf8"></script>
-
-    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
-        integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous" charset="utf8"></script>
-
-    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
-    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
-    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" />
-
-    <style>
-        body {
-            background: #FFFFFF;
-        }
-
-        .preview-container {
-
-            width: 300px;
-            height: 300px;
-            overflow: hidden;
-            border: 3px dotted #ccc;
-            margin: 0px auto;
-        }
-    </style>
-</head>
-
-<body>
-    <div id="Webapp">
-        <div class="sidebar">
-            <h2 style="text-align:center;">
-                <? echo $_SERVER['HTTP_HOST']?> <br>掃描位置 QRCode
-            </h2>
-
-        </div>
-        <div class="preview-container">
-            <div style="text-align:center;" id="saysome">QR 掃描器(掃描時請對焦)</div>
-            <video id="preview"></video>
-        </div>
-        <section class="cameras text-center">
-            <h2 class="text-center">鏡頭選擇</h2>
-            <span v-if="cameras.length === 0" class="empty">找不到鏡頭</span>
-            <span v-for="camera in cameras">
-                <span v-if="camera.id != activeCameraId" :title="formatName(camera.name)">
-                    <a @click.stop="selectCamera(camera)" class="btn btn-info  text-white  btn-lg"><i
-                            class="fas fa-camera-retro"></i> 切換鏡頭</a>
-                </span>
-            </span>
-        </section>
-        <section class="scans">
-            <!--
-				<h2>評分位置</h2>
-          <ul v-if="scans.length === 0">
-            <li class="empty">未掃描任何位置</li>
-          </ul>
-		-->
-            <transition-group name="scans" tag="ul">
-                <!--li v-for="scan in scans" :key="scan.date" :title="scan.content">{{ scan.content }}</li-->
-
-            </transition-group>
-            <!-- <div><a href="#" id="meL"></a></div> -->
-            <div id="meL"></div>
-        </section>
-
-
-    </div>
-    <!--script type="text/javascript" src="Webapp.js" charset="utf8"></script-->
-    <script>
-        var Webapp = new Vue({
-            el: '#Webapp',
-            data: {
-
-                scanner: null,
-                activeCameraId: 1,
-                cameras: [],
-                scans: []
-            },
-            mounted: function () {
-                var self = this;
-                self.scanner = new Instascan.Scanner({ video: document.getElementById('preview'), mirror: false, scanPeriod: 5 });
-                self.scanner.addListener('scan', function (content, image) {
-                    self.scans.unshift({ date: +(Date.now()), content: content });
-                    if (content) {
-                        document.getElementById("meL").innerHTML = content;
-                        // document.getElementById("meL").href = content;
-                        // document.getElementById("meL").click();
-                    } else {
-                        alert("QRcode 可能不正確!!");
-                        exit;
-                    }
-                });
-                Instascan.Camera.getCameras().then(function (cameras) {
-                    self.cameras = cameras;
-                    if (cameras.length > 0) {
-                        self.activeCameraId = cameras[cameras.length - 1].id;
-                        self.scanner.start(cameras[cameras.length - 1]);
-
-                    } else {
-                        console.error('沒找到相機元素!!');
-                    }
-                }).catch(function (e) {
-                    console.error(e);
-                });
-            },
-
-            methods: {
-                formatName: function (name) {
-                    return name || '(unknown)';
-                },
-                selectCamera: function (camera) {
-                    this.activeCameraId = camera.id;
-                    this.scanner.start(camera);
-                }
-            }
-        });
-
-    </script>
-</body>
-
-</html>
@@ -0,0 +1,16 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
+
+## Type Support For `.vue` Imports in TS
+
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's Take Over mode by following these steps:
+
+1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
+2. Reload the VS Code window by running `Developer: Reload Window` from the command palette.
+
+You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471).
@@ -0,0 +1 @@
+#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px}
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="./favicon.ico" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>HTML5 QR Code with Vue js</title>
+  <script type="module" crossorigin src="./assets/index.42417b10.js"></script>
+  <link rel="stylesheet" href="./assets/index.06d14ce2.css">
+</head>
+
+<body>
+    <div id="app"></div>
+    
+</body>
+
+</html>
@@ -1,10 +1,17 @@
-<!doctype html>
-<html>
-<script>
-    (function () {
-        window.open("./QRScan.php", '_self');
-    })()
-</script>
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>HTML5 QR Code with Vue js</title>
+</head>
+
+<body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
 </body>

 </html>
@@ -0,0 +1,20 @@
+{
+  "name": "qrcode",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "html5-qrcode": "^2.2.1",
+    "vue": "^3.2.25"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^2.3.1",
+    "typescript": "^4.5.4",
+    "vite": "^2.9.5",
+    "vue-tsc": "^0.34.7"
+  }
+}
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+// This starter template is using Vue 3 <script setup> SFCs
+// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
+import QRCode from './components/QRCode.vue';
+</script>
+
+<template>
+    <QRCode />
+</template>
+
+<style>
+#app {
+    font-family: Avenir, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: center;
+    color: #2c3e50;
+    margin-top: 60px;
+}
+</style>
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{ msg: string }>()
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <p>
+    Recommended IDE setup:
+    <a href="https://code.visualstudio.com/" target="_blank">VS Code</a>
+    +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+  </p>
+
+  <p>See <code>README.md</code> for more information.</p>
+
+  <p>
+    <a href="https://vitejs.dev/guide/features.html" target="_blank">
+      Vite Docs
+    </a>
+    |
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
+  </p>
+
+  <button type="button" @click="count++">count is: {{ count }}</button>
+  <p>
+    Edit
+    <code>components/HelloWorld.vue</code> to test hot module replacement.
+  </p>
+</template>
+
+<style scoped>
+a {
+  color: #42b983;
+}
+
+label {
+  margin: 0 0.5em;
+  font-weight: bold;
+}
+
+code {
+  background-color: #eee;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: #304455;
+}
+</style>
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import QRCodeScanner from './QRCodeScanner.vue';
+
+// defineProps<{ msg: string }>()
+
+let result = ref('')
+
+const decodedCode = function (decodedText: string, decodedResult: any) {
+    console.log(`Scan result ${decodedText}`, decodedResult);
+    result.value = `內容:${decodedText}`;
+}
+
+</script>
+
+<template>
+    <div class="section" style="width: 500px; margin: auto;">
+        <QRCodeScanner :qrbox="250" :fps="10" style="width: 500px;" @decodedCode="decodedCode">
+        </QRCodeScanner>
+    </div>
+    <div> {{ result }} </div>
+</template>
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { Html5QrcodeScanner } from "html5-qrcode";
+import { nextTick } from 'vue';
+
+const props = defineProps<{
+    qrbox: Number,
+    fps: Number,
+}>()
+
+const emit = defineEmits(['decodedCode'])
+
+var config: any = { fps: props.fps ? props.fps : 10 };
+let nowresult = "";
+if (props.qrbox) {
+    config['qrbox'] = props.qrbox;
+}
+
+function onScanSuccess(decodedText: string, decodedResult: any) {
+    // $this.$root.$emit('decodedCode', decodedText, decodedResult);
+    if (nowresult === decodedText) {
+        return;
+    }
+    nowresult = decodedText;
+    emit('decodedCode', decodedText, decodedResult);
+}
+
+function onScanError(decodedText: string, decodedResult: any) {
+    // $this.$root.$emit('decodedCode', decodedText, decodedResult);
+}
+
+async function onLoad(): Promise<void> {
+    // 这里获取DOM的是旧值
+    await nextTick()
+    // nextTick 后获取DOM的是更新后的值
+    var html5QrcodeScanner = new Html5QrcodeScanner(
+        "qr-code-full-region", config, undefined);
+    html5QrcodeScanner.render(onScanSuccess, onScanError);
+}
+onLoad();
+</script>
+
+<template>
+    <div id="qr-code-full-region"></div>
+</template>
@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"],
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node"
+  },
+  "include": ["vite.config.ts"]
+}
@@ -0,0 +1,8 @@
+import vue from "@vitejs/plugin-vue";
+import { defineConfig } from "vite";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    base: "./",
+    plugins: [vue()],
+});
				`@@ -0,0 +1 @@`
				`#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px}`