initial implementation

src/App.css

@@ -0,0 +1,34 @@
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+}

src/App.jsx

@@ -0,0 +1,15 @@
+import { Outlet } from 'react-router-dom';
+import BottomNav from './components/BottomNav';
+
+function App() {
+  return (
+    <div className="flex flex-col h-screen">
+      <main className="flex-grow overflow-y-auto">
+        <Outlet />
+      </main>
+      <BottomNav />
+    </div>
+  );
+}
+
+export default App;

src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

src/components/BottomNav.jsx

@@ -0,0 +1,32 @@
+import { Link, useLocation } from 'react-router-dom';
+
+const BottomNav = () => {
+  const location = useLocation();
+
+  const navItems = [
+    { path: '/', label: '实时扫描' },
+    { path: '/history', label: '历史记录' },
+  ];
+
+  return (
+    <nav className="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 text-gray-900 dark:text-white shadow-lg">
+      <div className="flex justify-around max-w-md mx-auto">
+        {navItems.map((item) => (
+          <Link
+            key={item.path}
+            to={item.path}
+            className={`flex-1 text-center py-3 text-sm ${
+              location.pathname === item.path
+                ? 'bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white'
+                : 'text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700'
+            }`}
+          >
+            {item.label}
+          </Link>
+        ))}
+      </div>
+    </nav>
+  );
+};
+
+export default BottomNav;

src/db/index.js

@@ -0,0 +1,59 @@
+import { openDB } from 'idb';
+
+const DB_NAME = 'BarcodeDB';
+const STORE_NAME = 'barcodes';
+const DB_VERSION = 2;
+
+async function getDB() {
+  return openDB(DB_NAME, DB_VERSION, {
+    upgrade(db, oldVersion, newVersion, tx) {
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        const store = db.createObjectStore(STORE_NAME, {
+          keyPath: 'id',
+          autoIncrement: true,
+        });
+        store.createIndex('code', 'code', { unique: false });
+        store.createIndex('createdAt', 'createdAt', { unique: false });
+      }
+
+      if (oldVersion < 2) {
+        const store = tx.objectStore(STORE_NAME);
+        if (!store.indexNames.contains('tags')) {
+          store.createIndex('tags', 'tags', { multiEntry: true });
+        }
+      }
+    },
+  });
+}
+
+export async function addBarcode(code) {
+  const db = await getDB();
+  const tx = db.transaction(STORE_NAME, 'readwrite');
+  const store = tx.objectStore(STORE_NAME);
+  await store.add({ code, createdAt: new Date(), tags: [] });
+  await tx.done;
+}
+
+export async function getAllBarcodes() {
+  const db = await getDB();
+  return db.getAll(STORE_NAME);
+}
+
+export async function deleteBarcode(id) {
+  const db = await getDB();
+  const tx = db.transaction(STORE_NAME, 'readwrite');
+  await tx.objectStore(STORE_NAME).delete(id);
+  await tx.done;
+}
+
+export async function updateBarcodeTags(id, tags) {
+  const db = await getDB();
+  const tx = db.transaction(STORE_NAME, 'readwrite');
+  const store = tx.objectStore(STORE_NAME);
+  const record = await store.get(id);
+  if (record) {
+    record.tags = tags;
+    await store.put(record);
+  }
+  await tx.done;
+}

src/index.css

@@ -0,0 +1,8 @@
+@import "tailwindcss";
+
+@layer base {
+  body {
+    @apply bg-white text-gray-800;
+    @apply dark:bg-gray-900 dark:text-gray-200;
+  }
+}

src/main.jsx

@@ -0,0 +1,30 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import App from './App.jsx';
+import './index.css';
+import HistoryPage from './pages/HistoryPage.jsx';
+import LiveScannerPage from './pages/LiveScannerPage.jsx';
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <App />,
+    children: [
+      {
+        index: true,
+        element: <LiveScannerPage />,
+      },
+      {
+        path: 'history',
+        element: <HistoryPage />,
+      },
+    ],
+  },
+]);
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <RouterProvider router={router} />
+  </StrictMode>,
+);

src/pages/HistoryPage.jsx

@@ -0,0 +1,207 @@
+import { useEffect, useState } from 'react';
+import { deleteBarcode, getAllBarcodes, updateBarcodeTags } from '../db';
+
+function HistoryPage() {
+  const [barcodes, setBarcodes] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [tagInputs, setTagInputs] = useState({});
+  const [allTags, setAllTags] = useState([]);
+  const [selectedTag, setSelectedTag] = useState('');
+  const [selectedIds, setSelectedIds] = useState(new Set());
+
+  const fetchBarcodes = async () => {
+    try {
+      const allBarcodes = await getAllBarcodes();
+      const sortedBarcodes = allBarcodes.sort((a, b) => b.createdAt - a.createdAt);
+      setBarcodes(sortedBarcodes);
+
+      const uniqueTags = [...new Set(allBarcodes.flatMap(b => b.tags || []))];
+      setAllTags(uniqueTags);
+
+      const initialTags = {};
+      sortedBarcodes.forEach(b => {
+        initialTags[b.id] = (b.tags || []).join(', ');
+      });
+      setTagInputs(initialTags);
+    } catch (error) {
+      console.error('Failed to fetch barcodes:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchBarcodes();
+  }, []);
+
+  const handleDelete = async (id) => {
+    try {
+      await deleteBarcode(id);
+      fetchBarcodes(); // Refresh list
+    } catch (error) {
+      console.error('Failed to delete barcode:', error);
+    }
+  };
+
+  const handleTagsChange = (id, value) => {
+    setTagInputs(prev => ({ ...prev, [id]: value }));
+  };
+
+  const handleUpdateTags = async (id) => {
+    const tags = tagInputs[id].split(',').map(t => t.trim()).filter(Boolean);
+    try {
+      await updateBarcodeTags(id, tags);
+      await fetchBarcodes();
+    } catch (error) {
+      console.error('Failed to update tags:', error);
+    }
+  };
+
+  const handleSelect = (id) => {
+    setSelectedIds(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(id)) {
+        newSet.delete(id);
+      } else {
+        newSet.add(id);
+      }
+      return newSet;
+    });
+  };
+
+  const handleBulkDelete = async () => {
+    try {
+      for (const id of selectedIds) {
+        await deleteBarcode(id);
+      }
+      setSelectedIds(new Set());
+      await fetchBarcodes();
+    } catch (error) {
+      console.error('Failed to bulk delete barcodes:', error);
+    }
+  };
+
+  const handleBulkExport = () => {
+    const dataToExport = barcodes.filter(b => selectedIds.has(b.id));
+    if (dataToExport.length === 0) return;
+
+    const csvContent = "data:text/csv;charset=utf-8,"
+      + "Code,Tags,ScannedAt\n"
+      + dataToExport.map(b =>
+        `"${b.code}","${(b.tags || []).join(',')}","${new Date(b.createdAt).toISOString()}"`
+      ).join("\n");
+
+    const encodedUri = encodeURI(csvContent);
+    const link = document.createElement("a");
+    link.setAttribute("href", encodedUri);
+    link.setAttribute("download", "barcodes.csv");
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  if (loading) {
+    return <div className="text-center mt-8">正在加载...</div>;
+  }
+
+  const filteredBarcodes = selectedTag
+    ? barcodes.filter(b => (b.tags || []).includes(selectedTag))
+    : barcodes;
+
+  return (
+    <div className="px-4 pt-4 pb-20">
+      <h1 className="text-2xl font-bold mb-4">历史记录</h1>
+
+      <div className="mb-4 space-y-4">
+        <div>
+          <label htmlFor="tag-filter" className="block text-sm font-medium text-gray-700 dark:text-gray-300">按标签筛选:</label>
+          <select
+            id="tag-filter"
+            value={selectedTag}
+            onChange={(e) => setSelectedTag(e.target.value)}
+            className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
+          >
+            <option value="">所有</option>
+            {allTags.map(tag => (
+              <option key={tag} value={tag}>{tag}</option>
+            ))}
+          </select>
+        </div>
+        {selectedIds.size > 0 && (
+          <div className="flex space-x-2">
+            <button onClick={handleBulkDelete} className="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
+              删除选中 ({selectedIds.size})
+            </button>
+            <button onClick={handleBulkExport} className="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
+              导出选中 ({selectedIds.size})
+            </button>
+          </div>
+        )}
+      </div>
+
+      {filteredBarcodes.length === 0 ? (
+        <p>没有符合条件的记录。</p>
+      ) : (
+        <ul className="space-y-3">
+          {filteredBarcodes.map((barcode) => (
+            <li
+              key={barcode.id}
+              className={`bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 ${selectedIds.has(barcode.id) ? 'ring-2 ring-blue-500' : ''}`}
+            >
+              <div className="flex justify-between items-start">
+                <div className="flex items-start space-x-3">
+                  <input
+                    type="checkbox"
+                    checked={selectedIds.has(barcode.id)}
+                    onChange={() => handleSelect(barcode.id)}
+                    className="mt-1 h-5 w-5 text-blue-600 border-gray-300 dark:border-gray-600 rounded bg-gray-100 dark:bg-gray-700"
+                  />
+                  <div>
+                    <p className="font-mono text-lg text-gray-800 dark:text-gray-200">{barcode.code}</p>
+                    <p className="text-sm text-gray-500 dark:text-gray-400">
+                      {new Date(barcode.createdAt).toLocaleString()}
+                    </p>
+                  </div>
+                </div>
+                <button
+                  onClick={() => handleDelete(barcode.id)}
+                  className="bg-red-500 hover:bg-red-600 text-white font-bold py-1 px-3 rounded flex-shrink-0"
+                >
+                  删除
+                </button>
+              </div>
+              <div className="mt-3">
+                <div className="flex items-center space-x-2">
+                  <input
+                    type="text"
+                    value={tagInputs[barcode.id] || ''}
+                    onChange={(e) => handleTagsChange(barcode.id, e.target.value)}
+                    placeholder="添加标签 (用逗号分隔)"
+                    className="border rounded px-2 py-1 w-full text-sm bg-gray-50 dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white"
+                  />
+                  <button
+                    onClick={() => handleUpdateTags(barcode.id)}
+                    className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-1 px-3 rounded text-sm"
+                  >
+                    更新
+                  </button>
+                </div>
+                {barcode.tags && barcode.tags.length > 0 && (
+                  <div className="mt-2 flex flex-wrap gap-1">
+                    {barcode.tags.map(tag => (
+                      <span key={tag} className="bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-200 text-xs font-semibold px-2 py-1 rounded-full">
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+export default HistoryPage;

src/pages/LiveScannerPage.jsx

@@ -0,0 +1,327 @@
+import Quagga from '@ericblade/quagga2';
+import { useEffect, useRef, useState } from 'react';
+import { addBarcode } from '../db';
+
+function LiveScannerPage() {
+  const videoRef = useRef(null);
+  const [error, setError] = useState(null);
+  const scannerRef = useRef(false);
+  const [scannedResults, setScannedResults] = useState([]);
+  const [selectedResult, setSelectedResult] = useState(null);
+  const [showSuccess, setShowSuccess] = useState(false);
+  const [strictMode, setStrictMode] = useState(false);
+  const [selectedFormat, setSelectedFormat] = useState('all');
+  const [videoDevices, setVideoDevices] = useState([]);
+  const [selectedDeviceId, setSelectedDeviceId] = useState('');
+
+  const handleSave = async () => {
+    if (selectedResult) {
+      try {
+        await addBarcode(selectedResult.code);
+        setShowSuccess(true);
+        setScannedResults([]);
+        setSelectedResult(null);
+        setTimeout(() => setShowSuccess(false), 2000);
+      } catch (err) {
+        console.error("Failed to save barcode:", err);
+        setError("保存失败，请重试。");
+      }
+    }
+  };
+
+  useEffect(() => {
+    const getVideoDevices = async () => {
+      try {
+        const devices = await navigator.mediaDevices.enumerateDevices();
+        const videoInputs = devices.filter(
+          (device) => device.kind === 'videoinput'
+        );
+        setVideoDevices(videoInputs);
+      } catch (err) {
+        setError('无法获取摄像头列表。');
+        console.error('Could not get video devices:', err);
+      }
+    };
+    getVideoDevices();
+  }, []);
+
+  const streamRef = useRef(null);
+
+  useEffect(() => {
+    const stopScanner = () => {
+      if (scannerRef.current) {
+        Quagga.stop();
+        scannerRef.current = false;
+      }
+      if (streamRef.current) {
+        streamRef.current.getTracks().forEach(track => track.stop());
+        streamRef.current = null;
+      }
+      if (videoRef.current) {
+        videoRef.current.srcObject = null;
+      }
+    };
+
+    const startScanner = async () => {
+      stopScanner();
+      setScannedResults([]);
+      setSelectedResult(null);
+      setError(null);
+
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({
+          video: { deviceId: selectedDeviceId },
+        });
+        streamRef.current = stream;
+
+        if (videoRef.current) {
+          videoRef.current.srcObject = streamRef.current;
+          videoRef.current.play().catch(e => console.error("Video play failed:", e));
+        }
+
+        Quagga.init(
+          {
+            inputStream: {
+              name: 'Live',
+              type: 'LiveStream',
+              target: videoRef.current,
+              constraints: {
+                width: 640,
+                height: 480,
+              },
+            },
+            decoder: {
+              readers: ['code_128_reader', 'ean_reader', 'ean_8_reader', 'code_39_reader', 'code_39_vin_reader', 'codabar_reader', 'upc_reader', 'upc_e_reader', 'i2of5_reader'],
+            },
+          },
+          (err) => {
+            if (err) {
+              setError('QuaggaJS 初始化失败: ' + err.message);
+              console.error(err);
+              return;
+            }
+            Quagga.start();
+            scannerRef.current = true;
+          }
+        );
+
+        Quagga.onProcessed((result) => {
+          const drawingCtx = Quagga.canvas.ctx.overlay;
+          const drawingCanvas = Quagga.canvas.dom.overlay;
+
+          if (result) {
+            if (result.boxes) {
+              drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
+              result.boxes.filter(function (box) {
+                return box !== result.box;
+              }).forEach(function (box) {
+                Quagga.ImageDebug.drawPath(box, { x: 0, y: 1 }, drawingCtx, { color: "green", lineWidth: 2 });
+              });
+            }
+
+            if (result.box) {
+              Quagga.ImageDebug.drawPath(result.box, { x: 0, y: 1 }, drawingCtx, { color: "#00F", lineWidth: 2 });
+            }
+
+            if (result.codeResult && result.codeResult.code) {
+              Quagga.ImageDebug.drawPath(result.line, { x: 'x', y: 'y' }, drawingCtx, { color: 'red', lineWidth: 3 });
+            }
+          }
+        });
+
+        Quagga.onDetected((data) => {
+          const result = data.codeResult;
+          if (!result || !result.code) {
+            return;
+          }
+
+          let maxError = 0;
+          if (result.decodedCodes) {
+            const errors = result.decodedCodes
+              .filter(d => typeof d.error !== 'undefined')
+              .map(d => d.error);
+            if (errors.length > 0) {
+              maxError = Math.max(...errors);
+            }
+          }
+
+          const newResult = {
+            code: result.code,
+            format: result.format,
+            error: maxError,
+          };
+
+          setScannedResults((prevResults) => {
+            const existingResultIndex = prevResults.findIndex(
+              (r) => r.code === newResult.code
+            );
+
+            if (existingResultIndex !== -1) {
+              // 如果已存在且新结果的错误率更低，则更新
+              if (newResult.error < prevResults[existingResultIndex].error) {
+                const updatedResults = [...prevResults];
+                updatedResults[existingResultIndex] = newResult;
+                return updatedResults;
+              }
+              // 否则，不更新
+              return prevResults;
+            } else {
+              // 如果不存在，则添加
+              return [...prevResults, newResult];
+            }
+          });
+        });
+
+      } catch (err) {
+        setError('无法访问摄像头: ' + err.message);
+        console.error('Error accessing camera:', err);
+      }
+    };
+
+    if (selectedDeviceId) {
+      startScanner();
+    } else {
+      stopScanner();
+    }
+
+    return () => {
+      stopScanner();
+    };
+  }, [selectedDeviceId]);
+
+  return (
+    <div className="relative w-full h-full">
+      {/* 视频和 Canvas 容器 */}
+      <div id="interactive" className="absolute top-0 left-0 w-full h-full">
+        <video
+          ref={videoRef}
+          autoPlay
+          playsInline
+          className="w-full h-full object-cover"
+        />
+        <canvas className="drawingBuffer absolute top-0 left-0 w-full h-full"></canvas>
+      </div>
+
+      {/* 浮动 UI 元素 */}
+      <div className="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-between p-4 text-gray-800 dark:text-white z-10 pointer-events-none">
+        {/* 顶部结果和操作 */}
+        <div className="w-full flex flex-col items-center pointer-events-auto">
+          <div className="w-full max-w-md bg-white/50 dark:bg-black/50 p-2 rounded-lg mb-4">
+            {!selectedDeviceId ? (
+              <>
+                <label htmlFor="camera-select" className="block mb-1 text-sm font-medium">
+                  选择摄像头:
+                </label>
+                <select
+                  id="camera-select"
+                  value={selectedDeviceId}
+                  onChange={(e) => setSelectedDeviceId(e.target.value)}
+                  className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
+                >
+                  <option value="">-- 请选择 --</option>
+                  {videoDevices.map((device, index) => (
+                    <option key={device.deviceId} value={device.deviceId}>
+                      {device.label || `摄像头 ${index + 1}`}
+                    </option>
+                  ))}
+                </select>
+              </>
+            ) : (
+              <div className="text-center p-2.5">
+                当前摄像头: {videoDevices.find(d => d.deviceId === selectedDeviceId)?.label || '已选择'}
+              </div>
+            )}
+          </div>
+          {selectedDeviceId && scannedResults.length > 0 && (() => {
+            const availableFormats = [...new Set(scannedResults.map(r => r.format))];
+            const filteredAndSortedResults = scannedResults
+              .filter(result => !strictMode || result.error < 0.2)
+              .filter(result => selectedFormat === 'all' || result.format === selectedFormat)
+              .sort((a, b) => a.error - b.error);
+
+            return (
+              <div className="w-full max-w-md bg-white/50 dark:bg-black/50 p-4 rounded-lg">
+                <div className="flex justify-between items-center mb-2">
+                  <h2 className="text-lg font-bold">扫描结果:</h2>
+                  <div className="flex items-center space-x-4">
+                    <label className="flex items-center cursor-pointer">
+                      <input
+                        type="checkbox"
+                        checked={strictMode}
+                        onChange={() => setStrictMode(!strictMode)}
+                        className="form-checkbox h-5 w-5 text-blue-600"
+                      />
+                      <span className="ml-2 text-sm font-medium">严格模式</span>
+                    </label>
+                    <select
+                      value={selectedFormat}
+                      onChange={(e) => setSelectedFormat(e.target.value)}
+                      className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-1.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+                    >
+                      <option value="all">所有格式</option>
+                      {availableFormats.map(format => (
+                        <option key={format} value={format}>{format}</option>
+                      ))}
+                    </select>
+                  </div>
+                </div>
+                <div className="space-y-2 max-h-48 overflow-y-auto">
+                  {filteredAndSortedResults.map((result) => (
+                      <label key={result.code} className="flex items-start space-x-3 cursor-pointer p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700">
+                        <input
+                          type="radio"
+                          name="scannedResult"
+                          value={result.code}
+                          checked={selectedResult?.code === result.code}
+                          onChange={() => setSelectedResult(result)}
+                          className="form-radio h-5 w-5 text-blue-600 mt-1"
+                        />
+                        <div className="flex-1">
+                          <span className="font-mono text-base block">{result.code}</span>
+                          <div className="text-xs text-gray-600 dark:text-gray-400">
+                            <span>格式: {result.format}</span>
+                            <span className="ml-2">|</span>
+                            <span className="ml-2">错误率: {(result.error * 100).toFixed(2)}%</span>
+                          </div>
+                        </div>
+                      </label>
+                    ))}
+                </div>
+                <div className="mt-4 flex space-x-2">
+                  <button
+                    onClick={handleSave}
+                    disabled={!selectedResult}
+                    className="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded disabled:bg-gray-500"
+                  >
+                    保存选中结果
+                  </button>
+                  <button
+                    onClick={() => {
+                      setScannedResults([]);
+                      setSelectedResult(null);
+                    }}
+                    className="w-full bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded"
+                  >
+                    清空
+                  </button>
+                </div>
+              </div>
+            );
+          })()}
+          {showSuccess && (
+            <div className="mt-4 p-2 bg-green-500 text-white rounded-md">
+              保存成功!
+            </div>
+          )}
+        </div>
+
+        {/* 中间错误信息 */}
+        {error && (
+          <div className="text-red-700 bg-red-100 dark:bg-red-200 dark:text-red-800 p-4 rounded-md pointer-events-auto">{error}</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default LiveScannerPage;