feature(qrcode): reboot qrcode reader

qr-code-implementation-guide.md

@@ -0,0 +1,156 @@
+## Build Configuration
+
+### Common Vite Configuration
+```typescript
+// vite.config.common.mts
+export async function createBuildConfig(mode: string) {
+  const isCapacitor = mode === "capacitor";
+  
+  return defineConfig({
+    build: {
+      rollupOptions: {
+        output: {
+          manualChunks: {
+            'vue-vendor': ['vue', 'vue-router', 'vue-facing-decorator']
+          }
+        }
+      }
+    },
+    define: {
+      __USE_QR_READER__: JSON.stringify(!isCapacitor),
+      __IS_MOBILE__: JSON.stringify(isCapacitor),
+    },
+    optimizeDeps: {
+      include: [
+        '@capacitor-mlkit/barcode-scanning',
+        'vue-qrcode-reader'
+      ]
+    },
+    resolve: {
+      alias: {
+        '@capacitor/app': path.resolve(__dirname, 'node_modules/@capacitor/app')
+      }
+    }
+  });
+}
+```
+
+### Web-Specific Configuration
+```typescript
+// vite.config.web.mts
+import { defineConfig, mergeConfig } from "vite";
+import { createBuildConfig } from "./vite.config.common.mts";
+
+export default defineConfig(async () => {
+  const baseConfig = await createBuildConfig('web');
+  
+  return mergeConfig(baseConfig, {
+    define: {
+      __USE_QR_READER__: true,
+      __IS_MOBILE__: false,
+    }
+  });
+});
+```
+
+### Capacitor-Specific Configuration
+```typescript
+// vite.config.capacitor.mts
+import { defineConfig, mergeConfig } from "vite";
+import { createBuildConfig } from "./vite.config.common.mts";
+
+export default defineConfig(async () => {
+  const baseConfig = await createBuildConfig('capacitor');
+  
+  return mergeConfig(baseConfig, {
+    define: {
+      __USE_QR_READER__: false,
+      __IS_MOBILE__: true,
+    },
+    build: {
+      rollupOptions: {
+        external: ['vue-qrcode-reader'], // Exclude web QR reader from mobile builds
+        output: {
+          entryFileNames: '[name]-mobile.js',
+          chunkFileNames: '[name]-mobile.js',
+          assetFileNames: '[name]-mobile.[ext]'
+        }
+      }
+    }
+  });
+});
+```
+
+### Build Scripts
+Add these scripts to your `package.json`:
+```json
+{
+  "scripts": {
+    "build:web": "vite build --config vite.config.web.mts",
+    "build:capacitor": "vite build --config vite.config.capacitor.mts",
+    "build:all": "npm run build:web && npm run build:capacitor"
+  }
+}
+```
+
+### Environment Variables
+Create a `.env` file:
+```bash
+# QR Scanner Configuration
+VITE_QR_SCANNER_ENABLED=true
+VITE_DEFAULT_CAMERA=back
+```
+
+### Build Process
+
+1. **Web Build**
+```bash
+npm run build:web
+```
+This will:
+- Include vue-qrcode-reader
+- Set __USE_QR_READER__ to true
+- Set __IS_MOBILE__ to false
+- Build for web browsers
+
+2. **Capacitor Build**
+```bash
+npm run build:capacitor
+```
+This will:
+- Exclude vue-qrcode-reader
+- Set __USE_QR_READER__ to false
+- Set __IS_MOBILE__ to true
+- Build for mobile platforms
+
+3. **Build Both**
+```bash
+npm run build:all
+```
+
+### Important Notes
+
+1. **Dependencies**
+- Ensure all QR-related dependencies are properly listed in package.json
+- Use exact versions to avoid compatibility issues
+- Consider using peer dependencies for shared libraries
+
+2. **Bundle Size**
+- Web build includes vue-qrcode-reader (~100KB)
+- Mobile build includes @capacitor-mlkit/barcode-scanning (~50KB)
+- Consider using dynamic imports for lazy loading
+
+3. **Platform Detection**
+- Build flags determine which implementation to use
+- Runtime checks provide fallback options
+- Environment variables can override defaults
+
+4. **Performance**
+- Mobile builds optimize for native performance
+- Web builds include necessary polyfills
+- Chunk splitting improves load times
+
+5. **Debugging**
+- Source maps are enabled for development
+- Build artifacts are properly named for identification
+- Console logs help track initialization