我需要你参考上面的页面设计一个程序,创建一个条形扫码uni-app+vue3应用程序，它是html文件+uvue文件的格式，主页名字为index。

1.当它触发扫码时，发送POST请求，以将单号上传到数据库
2.创建一个存储十个条形码的数组，数组采用先进后出以确保最大只有十个，当扫码触发时将条形码数据加入这个数组中，当扫码得出的条形码数据已经在这个数组中时，应当发出提示说明单号已经扫描过，且不应该触发POST请求
3.它提供一个文本框，文本框放置需要注意的单号，以回车区分下一个，当扫码得出的条形码数据在文本框中时，应当给出提示
4.在编写代码时，你应该尽可能的去除耦合，以无数代码块的形式组成一个功能

index.uvue

@@ -0,0 +1,356 @@
+<template>
+  <view class="container">
+    <!-- Header -->
+    <view class="header">
+      <text class="title">Barcode Ninja</text>
+      <text class="subtitle">Scan, track, and manage barcodes efficiently</text>
+    </view>
+
+    <!-- Scanner Section -->
+    <view class="card">
+      <view class="card-header">
+        <text class="card-title">Barcode Scanner</text>
+        <button class="scan-btn" @click="initiateScan">
+          <text>Scan Now</text>
+        </button>
+      </view>
+
+      <view class="scanner-placeholder" :class="{ 'scan-animation': isScanning }">
+        <text v-if="!lastScanned">Ready to scan</text>
+        <text v-else class="last-scanned-code">{{ lastScanned }}</text>
+      </view>
+
+      <view class="last-scanned-container" v-if="lastScanned">
+        <text class="last-scanned-label">Last scanned:</text>
+        <text class="last-scanned-code">{{ lastScanned }}</text>
+      </view>
+    </view>
+
+    <!-- Watchlist Section -->
+    <view class="card">
+      <text class="card-title">Special Watchlist</text>
+      <textarea 
+        class="watchlist-input" 
+        v-model="watchlistInput" 
+        placeholder="Enter barcodes to watch (one per line)"
+        @change="updateWatchlist"
+      />
+      <text class="watchlist-hint">Barcodes in this list will trigger special notifications when scanned.</text>
+    </view>
+
+    <!-- History Section -->
+    <view class="card">
+      <view class="card-header">
+        <text class="card-title">Recent Scans</text>
+        <button class="clear-btn" @click="clearHistory">
+          <text>Clear All</text>
+        </button>
+      </view>
+      
+      <view v-if="scanHistory.length === 0" class="empty-history">
+        <text>No scans yet</text>
+      </view>
+      
+      <view v-else class="history-list">
+        <view v-for="(item, index) in scanHistory" :key="index" class="history-item">
+          <text class="history-barcode">{{ item }}</text>
+          <text class="history-time">Just now</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- Toast Notification -->
+    <view v-if="showToast" class="toast" :class="toastType">
+      <text>{{ toastMessage }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+
+// State
+const isScanning = ref(false)
+const lastScanned = ref('')
+const watchlistInput = ref('')
+const showToast = ref(false)
+const toastMessage = ref('')
+const toastType = ref('info')
+const scanHistory = reactive([])
+const watchlist = reactive([])
+
+// Constants
+const MAX_HISTORY_SIZE = 10
+
+// API Configuration
+const API_ENDPOINT = 'https://your-api-endpoint.com/scans'
+
+// Scan Functions
+const initiateScan = () => {
+  isScanning.value = true
+  uni.scanCode({
+    success: (res) => {
+      handleScannedBarcode(res.result)
+    },
+    fail: () => {
+      showToastMessage('Scan failed', 'error')
+    },
+    complete: () => {
+      isScanning.value = false
+    }
+  })
+}
+
+const handleScannedBarcode = (barcode) => {
+  if (isBarcodeInHistory(barcode)) {
+    showToastMessage('This barcode has already been scanned!', 'warning')
+    return
+  }
+
+  addToHistory(barcode)
+  
+  if (isBarcodeInWatchlist(barcode)) {
+    showToastMessage('⚠️ Special barcode detected!', 'warning')
+  }
+
+  sendToServer(barcode)
+}
+
+const isBarcodeInHistory = (barcode) => {
+  return scanHistory.includes(barcode)
+}
+
+const isBarcodeInWatchlist = (barcode) => {
+  return watchlist.includes(barcode)
+}
+
+// History Management
+const addToHistory = (barcode) => {
+  if (scanHistory.length >= MAX_HISTORY_SIZE) {
+    scanHistory.pop()
+  }
+  scanHistory.unshift(barcode)
+  lastScanned.value = barcode
+}
+
+const clearHistory = () => {
+  scanHistory.splice(0, scanHistory.length)
+  lastScanned.value = ''
+  showToastMessage('Scan history cleared', 'info')
+}
+
+// Watchlist Management
+const updateWatchlist = () => {
+  watchlist.splice(0, watchlist.length)
+  const barcodes = watchlistInput.value.split('\n')
+    .map(b => b.trim())
+    .filter(b => b !== '')
+  watchlist.push(...barcodes)
+  showToastMessage('Watchlist updated', 'success')
+}
+
+// API Communication
+const sendToServer = async (barcode) => {
+  try {
+    const response = await uni.request({
+      url: API_ENDPOINT,
+      method: 'POST',
+      data: { barcode },
+      header: {
+        'Content-Type': 'application/json'
+      }
+    })
+    
+    if (response.statusCode === 200) {
+      showToastMessage(`Barcode "${barcode}" sent to server`, 'success')
+    } else {
+      throw new Error('Server error')
+    }
+  } catch (error) {
+    console.error('API Error:', error)
+    showToastMessage('Failed to send barcode', 'error')
+  }
+}
+
+// Toast Notification
+const showToastMessage = (message, type = 'info') => {
+  toastMessage.value = message
+  toastType.value = type
+  showToast.value = true
+  
+  setTimeout(() => {
+    showToast.value = false
+  }, 3000)
+}
+</script>
+
+<style>
+.container {
+  padding: 20px;
+  background-color: #f5f5f5;
+  min-height: 100vh;
+}
+
+.header {
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.title {
+  font-size: 24px;
+  font-weight: bold;
+  color: #4f46e5;
+  display: block;
+  margin-bottom: 5px;
+}
+
+.subtitle {
+  font-size: 14px;
+  color: #666;
+}
+
+.card {
+  background-color: white;
+  border-radius: 12px;
+  padding: 16px;
+  margin-bottom: 16px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.card-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+
+.scan-btn {
+  background-color: #4f46e5;
+  color: white;
+  padding: 8px 16px;
+  border-radius: 8px;
+  font-size: 14px;
+}
+
+.scanner-placeholder {
+  height: 200px;
+  background-color: #f0f0f0;
+  border-radius: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 12px;
+  border: 2px dashed #ccc;
+}
+
+.scan-animation {
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); }
+  70% { box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
+}
+
+.last-scanned-container {
+  background-color: #eef2ff;
+  padding: 12px;
+  border-radius: 8px;
+}
+
+.last-scanned-label {
+  font-size: 12px;
+  color: #666;
+  display: block;
+  margin-bottom: 4px;
+}
+
+.last-scanned-code {
+  font-family: monospace;
+  font-size: 16px;
+  font-weight: bold;
+  color: #4f46e5;
+}
+
+.watchlist-input {
+  width: 100%;
+  height: 100px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 12px;
+  margin-bottom: 8px;
+  font-size: 14px;
+}
+
+.watchlist-hint {
+  font-size: 12px;
+  color: #666;
+}
+
+.empty-history {
+  padding: 20px 0;
+  text-align: center;
+  color: #999;
+}
+
+.history-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.history-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+}
+
+.history-barcode {
+  font-family: monospace;
+}
+
+.history-time {
+  font-size: 12px;
+  color: #999;
+}
+
+.clear-btn {
+  color: #4f46e5;
+  font-size: 14px;
+}
+
+.toast {
+  position: fixed;
+  bottom: 40px;
+  left: 20px;
+  right: 20px;
+  padding: 12px 16px;
+  border-radius: 8px;
+  background-color: #333;
+  color: white;
+  text-align: center;
+  z-index: 1000;
+}
+
+.toast.success {
+  background-color: #10b981;
+}
+
+.toast.warning {
+  background-color: #f59e0b;
+}
+
+.toast.error {
+  background-color: #ef4444;
+}
+</style>