第二次迭代优化

2026-06-18 10:58:44 +08:00
parent 3f1684e57a
commit 10fbd0390c
10 changed files with 183 additions and 18 deletions
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
    "@vitejs/plugin-vue": "^5.2.4",
    "axios": "^1.10.0",
    "dayjs": "^1.11.13",
+    "jsqr": "^1.4.0",
    "lucide-vue-next": "^0.468.0",
    "pinia": "^2.3.1",
    "vant": "^4.9.16",
@@ -25,8 +26,8 @@
    "vue-router": "^4.5.0"
  },
  "devDependencies": {
-    "@types/node": "^22.13.1",
    "@tsconfig/node22": "^22.0.0",
+    "@types/node": "^22.13.1",
    "@vue/tsconfig": "^0.7.0",
    "typescript": "^5.7.3",
    "vite": "^6.0.7",
--- a/src/api/mock.ts
+++ b/src/api/mock.ts
@@ -238,6 +238,7 @@ export const mockApi = {
            {
              id: `WO${order.id}`,
              orderId: order.id,
+              commodityName: order.commodityName,
              packageName: order.commodityName,
              userName: '当前员工',
              createTime: order.writeOffTime
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -39,13 +39,16 @@
 html,
 body,
 #app {
+  width: 100%;
+  max-width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--app-bg);
+  overflow-x: hidden;
 }

 body {
-  min-width: 320px;
+  min-width: 0;
 }

 button,
@@ -58,6 +61,12 @@ button {
  color: inherit;
 }

+img,
+video,
+canvas {
+  max-width: 100%;
+}
+
 .app-shell {
  min-height: 100vh;
  padding: 0 14px 78px;
@@ -76,6 +85,7 @@ button {

 .page {
  width: min(100%, 560px);
+  min-width: 0;
  margin: 0 auto;
  padding: 14px 0 18px;
 }
@@ -162,6 +172,7 @@ button {

 .panel {
  overflow: hidden;
+  min-width: 0;
  border: 1px solid rgba(226, 232, 228, 0.9);
  border-radius: var(--radius);
  background: var(--surface);
@@ -292,7 +303,7 @@ button {

 .order-card__main {
  display: grid;
-  grid-template-columns: 76px 1fr;
+  grid-template-columns: 76px minmax(0, 1fr);
  gap: 10px;
 }

@@ -334,14 +345,29 @@ button {
  line-height: 1.5;
 }

+.meta-row > *,
+.detail-row > * {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.meta-row span,
+.detail-row span {
+  flex: 1 1 auto;
+}
+
 .meta-row strong,
 .detail-row strong {
+  flex: 0 1 auto;
  color: var(--text-main);
  font-weight: 650;
+  text-align: right;
+  overflow-wrap: anywhere;
 }

 .stack {
  display: flex;
+  min-width: 0;
  flex-direction: column;
  gap: 8px;
 }
--- a/src/types/order.ts
+++ b/src/types/order.ts
@@ -62,6 +62,7 @@ export interface CommodityPackageConfig {
 export interface WriteOffRecord {
  id?: string
  orderId?: string
+  commodityName?: string
  packageName?: string
  userId?: string
  userName?: string
--- a/src/utils/writeOffCode.ts
+++ b/src/utils/writeOffCode.ts
@@ -0,0 +1,32 @@
+export interface WriteOffCodePayload {
+  orderId: string
+  packageName?: string
+}
+
+const safeDecode = (value: string) => {
+  try {
+    return decodeURIComponent(value)
+  } catch {
+    return value
+  }
+}
+
+export const parseWriteOffCode = (rawValue: string): WriteOffCodePayload => {
+  const raw = rawValue.trim()
+  if (!raw) {
+    throw new Error('未识别到核销码')
+  }
+
+  const splitIndex = raw.indexOf('&')
+  const orderId = safeDecode(splitIndex >= 0 ? raw.slice(0, splitIndex) : raw).trim()
+  const packageName = splitIndex >= 0 ? safeDecode(raw.slice(splitIndex + 1)).trim() : ''
+
+  if (!orderId) {
+    throw new Error('核销码缺少订单号')
+  }
+
+  return {
+    orderId,
+    packageName: packageName || undefined
+  }
+}
--- a/src/views/home/HomeView.vue
+++ b/src/views/home/HomeView.vue
@@ -28,7 +28,7 @@ const events = ref<EventData[]>([])
 const loading = ref(false)

 const todoOrders = computed(() => orders.value.filter((item) => item.orderStatus === '2'))
-const doneOrders = computed(() => orders.value.filter((item) => item.orderStatus === '6'))
+const confirmOrders = computed(() => orders.value.filter((item) => item.orderStatus === '1'))
 const activeEvents = computed(() => events.value.filter((item) => item.showStatusDesc === '生效中'))

 const loadData = async () => {
@@ -69,9 +69,9 @@ onMounted(loadData)
        <div class="stat-hint">可进入详情核销</div>
      </div>
      <div class="stat-card">
-        <div class="stat-label">今日核销</div>
-        <div class="stat-value">{{ doneOrders.length }}</div>
-        <div class="stat-hint">含列表记录</div>
+        <div class="stat-label">待确认订单</div>
+        <div class="stat-value">{{ confirmOrders.length }}</div>
+        <div class="stat-hint">需要员工处理</div>
      </div>
      <div class="stat-card">
        <div class="stat-label">生效事件</div>
--- a/src/views/login/LoginView.vue
+++ b/src/views/login/LoginView.vue
@@ -136,8 +136,13 @@ const handleLogin = async () => {
 <style scoped>
 .login-page {
  display: grid;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
  min-height: 100vh;
+  min-height: 100dvh;
  padding: 18px;
+  overflow-x: hidden;
  place-items: center;
  background:
    linear-gradient(180deg, #dff4ec 0, rgba(246, 248, 247, 0) 44%),
@@ -145,8 +150,11 @@ const handleLogin = async () => {
 }

 .login-card {
-  width: min(100%, 430px);
+  width: 100%;
+  max-width: 430px;
+  min-width: 0;
  padding: 22px 16px 16px;
+  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
@@ -157,13 +165,19 @@ const handleLogin = async () => {
  display: flex;
  align-items: center;
  gap: 12px;
+  min-width: 0;
  margin-bottom: 24px;
 }

+.login-brand > div {
+  min-width: 0;
+}
+
 .login-logo {
  display: inline-grid;
  width: 54px;
  height: 54px;
+  flex: 0 0 54px;
  border-radius: var(--radius);
  background: var(--primary-soft);
  color: var(--primary-deep);
@@ -177,6 +191,7 @@ const handleLogin = async () => {
 }

 .login-brand h1 {
+  overflow-wrap: anywhere;
  margin: 0;
  color: var(--text-strong);
  font-size: 25px;
@@ -185,19 +200,62 @@ const handleLogin = async () => {

 .login-form {
  display: grid;
+  min-width: 0;
  gap: 14px;
 }

 .login-form :deep(.van-cell) {
+  width: 100%;
+  min-width: 0;
  min-height: 50px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
 }

+.login-form :deep(.van-field__value),
+.login-form :deep(.van-field__body),
+.login-form :deep(.van-field__control) {
+  min-width: 0;
+}
+
+.login-form :deep(.van-field__button) {
+  flex: 0 0 auto;
+  padding-left: 8px;
+}
+
+.login-form :deep(.van-button) {
+  max-width: 100%;
+}
+
 .login-note {
  margin: 14px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+
+@media (max-width: 340px) {
+  .login-page {
+    padding: 12px;
+  }
+
+  .login-card {
+    padding: 18px 12px 14px;
+  }
+
+  .login-brand {
+    gap: 10px;
+  }
+
+  .login-logo {
+    width: 48px;
+    height: 48px;
+    flex-basis: 48px;
+  }
+
+  .login-brand h1 {
+    font-size: 23px;
+  }
 }
 </style>
--- a/src/views/orders/OrderDetailView.vue
+++ b/src/views/orders/OrderDetailView.vue
@@ -128,7 +128,8 @@ onMounted(loadDetail)
          <div v-for="record in detail.writeOffRecordList" :key="record.id" class="record-row">
            <CheckCircle2 :size="18" />
            <div>
-              <strong>{{ record.packageName || detail.commodityName }}</strong>
+              <strong>{{ record.commodityName || detail.commodityName }}</strong>
+              <p v-if="record.packageName">套餐名称：{{ record.packageName }}</p>
              <p>{{ record.createTime }} · {{ record.userName || '员工' }}</p>
            </div>
          </div>
@@ -156,11 +157,17 @@ onMounted(loadDetail)

 .order-hero {
  display: grid;
-  grid-template-columns: 112px 1fr;
+  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
 }

+.order-hero__content,
+.package-row div,
+.record-row div {
+  min-width: 0;
+}
+
 .order-hero img {
  width: 112px;
  height: 112px;
@@ -215,6 +222,7 @@ onMounted(loadDetail)
 .package-row strong,
 .record-row strong {
  color: var(--text-strong);
+  overflow-wrap: anywhere;
 }

 .package-row p,
--- a/src/views/verify/VerifyView.vue
+++ b/src/views/verify/VerifyView.vue
@@ -3,6 +3,7 @@ import { nextTick, onBeforeUnmount, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { showToast } from 'vant'
 import { QrCode, X } from 'lucide-vue-next'
+import jsQR from 'jsqr'
 import { parseWriteOffCode, type WriteOffCodePayload } from '@/utils/writeOffCode'

 const router = useRouter()
@@ -13,7 +14,10 @@ const scanError = ref('')

 let stream: MediaStream | null = null
 let detector: { detect: (source: HTMLVideoElement) => Promise<Array<{ rawValue: string }>> } | null = null
+let canvas: HTMLCanvasElement | null = null
+let canvasContext: CanvasRenderingContext2D | null = null
 let frameId = 0
+let lastDecodeAt = 0

 const getBarcodeDetector = () => {
  return (window as unknown as {
@@ -36,6 +40,8 @@ const stopScan = () => {
  if (videoRef.value) {
    videoRef.value.srcObject = null
  }
+  detector = null
+  lastDecodeAt = 0
 }

 const goConfirm = (payload: WriteOffCodePayload) => {
@@ -54,14 +60,41 @@ const handleCodeValue = (rawValue: string) => {
  goConfirm(payload)
 }

+const detectWithBarcodeDetector = async (video: HTMLVideoElement) => {
+  if (!detector) return ''
+  const results = await detector.detect(video)
+  return results[0]?.rawValue || ''
+}
+
+const detectWithJsQr = (video: HTMLVideoElement) => {
+  const width = video.videoWidth
+  const height = video.videoHeight
+  if (!width || !height) return ''
+
+  if (!canvas) {
+    canvas = document.createElement('canvas')
+  }
+  if (canvas.width !== width || canvas.height !== height) {
+    canvas.width = width
+    canvas.height = height
+    canvasContext = canvas.getContext('2d', { willReadFrequently: true })
+  }
+  if (!canvasContext) return ''
+
+  canvasContext.drawImage(video, 0, 0, width, height)
+  const imageData = canvasContext.getImageData(0, 0, width, height)
+  return jsQR(imageData.data, width, height, { inversionAttempts: 'dontInvert' })?.data || ''
+}
+
 const detectLoop = async () => {
-  if (!scanning.value || !videoRef.value || !detector) return
+  if (!scanning.value || !videoRef.value) return
  const video = videoRef.value

  try {
-    if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
-      const results = await detector.detect(video)
-      const value = results[0]?.rawValue
+    const now = Date.now()
+    if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA && now - lastDecodeAt > 120) {
+      lastDecodeAt = now
+      const value = detector ? await detectWithBarcodeDetector(video) : detectWithJsQr(video)
      if (value) {
        handleCodeValue(value)
        return
@@ -79,16 +112,16 @@ const detectLoop = async () => {
 const startScan = async () => {
  if (scanning.value || loading.value) return
  const BarcodeDetector = getBarcodeDetector()
-  if (!BarcodeDetector) {
-    scanError.value = '当前浏览器不支持摄像头扫码'
-    showToast('当前浏览器不支持摄像头扫码')
+  if (!navigator.mediaDevices?.getUserMedia) {
+    scanError.value = '当前浏览器无法打开摄像头'
+    showToast('当前浏览器无法打开摄像头')
    return
  }

  loading.value = true
  scanError.value = ''
  try {
-    detector = new BarcodeDetector({ formats: ['qr_code'] })
+    detector = BarcodeDetector ? new BarcodeDetector({ formats: ['qr_code'] }) : null
    stream = await navigator.mediaDevices.getUserMedia({
      audio: false,
      video: {
--- a/yarn.lock
+++ b/yarn.lock
@@ -703,6 +703,11 @@ https-proxy-agent@^5.0.1:
    agent-base "6"
    debug "4"

+jsqr@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmmirror.com/jsqr/-/jsqr-1.4.0.tgz#8efb8d0a7cc6863cb6d95116b9069123ce9eb2d1"
+  integrity sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A==
+
 lucide-vue-next@^0.468.0:
  version "0.468.0"
  resolved "https://registry.npmmirror.com/lucide-vue-next/-/lucide-vue-next-0.468.0.tgz#5e3c84b534f43d5e82fb757b91933cfb4ab24bf9"