chore: initial commit

2026-07-30 18:04:37 +08:00
commit 2ffacfd668
356 changed files with 43448 additions and 0 deletions
@@ -0,0 +1,58 @@
+<template>
+	<view
+		class="scan-target-input"
+		:class="{ 'scan-target-input-active': active }"
+		@tap="$emit('activate', name)"
+	>
+		<view class="scan-target-icon" aria-hidden="true">
+			<view class="scan-target-corner corner-tl"></view>
+			<view class="scan-target-corner corner-tr"></view>
+			<view class="scan-target-corner corner-bl"></view>
+			<view class="scan-target-corner corner-br"></view>
+			<view class="scan-target-line"></view>
+		</view>
+		<input
+			class="scan-target-value"
+			:value="modelValue"
+			:placeholder="placeholder"
+			:aria-label="`${label}，支持扫码或人工输入`"
+			confirm-type="done"
+			@focus="$emit('activate', name)"
+			@input="handleInput"
+			@confirm="handleConfirm"
+		/>
+		<text v-if="active" class="scan-target-badge">当前扫码</text>
+	</view>
+</template>
+
+<script>
+	export default {
+		emits: ['activate', 'update:modelValue', 'submit'],
+		props: {
+			name: { type: String, required: true },
+			modelValue: { type: String, default: '' },
+			label: { type: String, default: '扫码输入框' },
+			placeholder: { type: String, default: '扫描或人工输入' },
+			active: Boolean
+		},
+		methods: {
+			handleInput(event) { this.$emit('update:modelValue', event.detail.value) },
+			handleConfirm(event) { this.$emit('submit', event.detail.value) }
+		}
+	}
+</script>
+
+<style scoped>
+	.scan-target-input { position: relative; box-sizing: border-box; width: 100%; height: 48px; border: 1px solid #cfd8e3; border-radius: 8px; background: #ffffff; }
+	.scan-target-input-active { border: 2px solid #135ee8; background: #f8fbff; box-shadow: 0 0 0 2px rgba(19, 94, 232, 0.14); }
+	.scan-target-icon { position: absolute; z-index: 1; left: 12px; top: 12px; width: 22px; height: 22px; color: #8190a3; pointer-events: none; }
+	.scan-target-input-active .scan-target-icon { left: 11px; top: 11px; color: #135ee8; }
+	.scan-target-corner { position: absolute; box-sizing: border-box; width: 6px; height: 6px; border-color: currentColor; }
+	.corner-tl { top: 0; left: 0; border-top: 2px solid; border-left: 2px solid; }
+	.corner-tr { top: 0; right: 0; border-top: 2px solid; border-right: 2px solid; }
+	.corner-bl { bottom: 0; left: 0; border-bottom: 2px solid; border-left: 2px solid; }
+	.corner-br { right: 0; bottom: 0; border-right: 2px solid; border-bottom: 2px solid; }
+	.scan-target-line { position: absolute; left: 4px; top: 10px; width: 14px; height: 2px; background: currentColor; }
+	.scan-target-value { box-sizing: border-box; width: 100%; height: 46px; padding: 0 82px 0 42px; border: 0; color: #27384d; font-size: 15px; background: transparent; }
+	.scan-target-badge { position: absolute; right: 8px; top: 12px; padding: 3px 6px; border-radius: 4px; color: #135ee8; font-size: 10px; font-weight: 700; line-height: 16px; pointer-events: none; background: #e7f0ff; }
+</style>