<template>
  <div class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md">
    <h2 class="text-xl font-bold mb-4">方案一：禁用提交按鈕</h2>
    
    <form @submit.prevent="submitForm" class="space-y-4">
      <div>
        <label for="username" class="block text-sm font-medium mb-1">用戶名</label>
        <input 
          id="username" 
          v-model="formData.username" 
          type="text" 
          class="w-full px-3 py-2 border border-gray-300 rounded-md"
          required
        />
      </div>
      
      <div>
        <label for="email" class="block text-sm font-medium mb-1">郵箱</label>
        <input 
          id="email" 
          v-model="formData.email" 
          type="email" 
          class="w-full px-3 py-2 border border-gray-300 rounded-md"
          required
        />
      </div>
      
      <div>
        <button 
          type="submit" 
          class="w-full py-2 px-4 bg-green-600 hover:bg-green-700 text-white font-medium rounded-md transition-colors"
          :disabled="isSubmitting"
        >
          <span v-if="isSubmitting">提交中...</span>
          <span v-else>提交</span>
        </button>
      </div>
      
      <div v-if="message" :class="[success ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800', 'p-3 rounded-md']">
        {{ message }}
      </div>
    </form>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

const formData = reactive({
  username: '',
  email: ''
});

const isSubmitting = ref(false);
const message = ref('');
const success = ref(false);

async function submitForm() {
  // 如果已經(jīng)在提交中，直接返回
  if (isSubmitting.value) {
    return;
  }
  
  try {
    // 設(shè)置提交狀態(tài)為true
    isSubmitting.value = true;
    message.value = '';
    
    // 模擬API請(qǐng)求
    await new Promise(resolve => setTimeout(resolve, 2000));
    
    // 請(qǐng)求成功
    success.value = true;
    message.value = '表單提交成功！';
    
    // 重置表單
    formData.username = '';
    formData.email = '';
    
  } catch (error) {
    // 請(qǐng)求失敗
    success.value = false;
    message.value = '提交失敗：' + (error.message || '未知錯(cuò)誤');
  } finally {
    // 無論成功失敗，都將提交狀態(tài)設(shè)為false
    isSubmitting.value = false;
  }
}
</script>

<template>
  <div class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md">
    <h2 class="text-xl font-bold mb-4">方案二：提交狀態(tài)與加載指示器</h2>
    
    <form @submit.prevent="submitForm" class="space-y-4">
      <div>
        <label for="title" class="block text-sm font-medium mb-1">標(biāo)題</label>
        <input 
          id="title" 
          v-model="formData.title" 
          type="text" 
          class="w-full px-3 py-2 border border-gray-300 rounded-md"
          required
        />
      </div>
      
      <div>
        <label for="content" class="block text-sm font-medium mb-1">內(nèi)容</label>
        <textarea 
          id="content" 
          v-model="formData.content" 
          class="w-full px-3 py-2 border border-gray-300 rounded-md"
          rows="4"
          required
        ></textarea>
      </div>
      
      <div>
        <button 
          type="submit" 
          class="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md transition-colors relative"
          :disabled="isSubmitting"
        >
          <span v-if="isSubmitting" class="flex items-center justify-center">
            <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            處理中...
          </span>
          <span v-else>發(fā)布文章</span>
        </button>
      </div>
      
      <div v-if="submitStatus.show" :class="[submitStatus.success ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800', 'p-3 rounded-md']">
        {{ submitStatus.message }}
      </div>
    </form>
    
    <!-- 全屏加載遮罩 -->
    <div v-if="isSubmitting" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div class="bg-white p-6 rounded-lg shadow-lg text-center">
        <svg class="animate-spin h-10 w-10 text-blue-600 mx-auto mb-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
        <p class="text-gray-700">正在提交您的文章，請(qǐng)稍候...</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

const formData = reactive({
  title: '',
  content: ''
});

const isSubmitting = ref(false);
const submitStatus = reactive({
  show: false,
  success: false,
  message: ''
});

async function submitForm() {
  if (isSubmitting.value) {
    return;
  }
  
  try {
    isSubmitting.value = true;
    submitStatus.show = false;
    
    // 模擬API請(qǐng)求
    await new Promise(resolve => setTimeout(resolve, 3000));
    
    // 請(qǐng)求成功
    submitStatus.success = true;
    submitStatus.message = '文章發(fā)布成功！';
    submitStatus.show = true;
    
    // 重置表單
    formData.title = '';
    formData.content = '';
    
  } catch (error) {
    // 請(qǐng)求失敗
    submitStatus.success = false;
    submitStatus.message = '發(fā)布失敗：' + (error.message || '服務(wù)器錯(cuò)誤');
    submitStatus.show = true;
  } finally {
    isSubmitting.value = false;
  }
}
</script>

<template>
  <div class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md">
    <h2 class="text-xl font-bold mb-4">方案三：表單令牌</h2>
    
    <form @submit.prevent="submitForm" class="space-y-4">
      <div>
        <label for="name" class="block text-sm font-medium mb-1">姓名</label>
        <input 
          id="name" 
          v-model="formData.name" 
          type="text" 
          class="w-full px-3 py-2 border border-gray-300 rounded-md"
          required
        />
      </div>
      
      <div>
        <label for="phone" class="block text-sm font-medium mb-1">電話</label>
        <input 
          id="phone" 
          v-model="formData.phone" 
          type="tel" 
          class="w-full px-3 py-2 border border-gray-300 rounded-md"
          required
        />
      </div>
      
      <div>
        <label for="address" class="block text-sm font-medium mb-1">地址</label>
        <input 
          id="address" 
          v-model="formData.address" 
          type="text" 
          class="w-full px-3 py-2 border border-gray-300 rounded-md"
          required
        />
      </div>
      
      <!-- 隱藏的表單令牌 -->
      <input type="hidden" name="formToken" :value="formToken" />
      
      <div>
        <button 
          type="submit" 
          class="w-full py-2 px-4 bg-purple-600 hover:bg-purple-700 text-white font-medium rounded-md transition-colors"
          :disabled="isSubmitting"
        >
          <span v-if="isSubmitting" class="flex items-center justify-center">
            <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            提交中...
          </span>
          <span v-else>提交訂單</span>
        </button>
      </div>
      
      <div v-if="resultMessage" :class="[isSuccess ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800', 'p-3 rounded-md']">
        {{ resultMessage }}
      </div>
      
      <div v-if="isTokenUsed" class="p-3 bg-yellow-100 text-yellow-800 rounded-md">
        <p>檢測到此表單已提交過，請(qǐng)勿重復(fù)提交！</p>
        <button 
          @click="resetForm" 
          class="mt-2 px-4 py-2 bg-yellow-500 hover:bg-yellow-600 text-white rounded-md"
        >
          重置表單
        </button>
      </div>
    </form>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';

const formData = reactive({
  name: '',
  phone: '',
  address: ''
});

const isSubmitting = ref(false);
const resultMessage = ref('');
const isSuccess = ref(false);
const isTokenUsed = ref(false);
const formToken = ref('');

// 生成唯一令牌
function generateToken() {
  return Date.now().toString(36) + Math.random().toString(36).substring(2);
}

// 檢查令牌是否已使用
function checkTokenUsed(token) {
  const usedTokens = JSON.parse(localStorage.getItem('usedFormTokens') || '[]');
  return usedTokens.includes(token);
}

// 標(biāo)記令牌為已使用
function markTokenAsUsed(token) {
  const usedTokens = JSON.parse(localStorage.getItem('usedFormTokens') || '[]');
  usedTokens.push(token);
  localStorage.setItem('usedFormTokens', JSON.stringify(usedTokens));
}

// 重置表單和令牌
function resetForm() {
  formData.name = '';
  formData.phone = '';
  formData.address = '';
  formToken.value = generateToken();
  isTokenUsed.value = false;
  resultMessage.value = '';
}

async function submitForm() {
  // 檢查令牌是否已使用
  if (checkTokenUsed(formToken.value)) {
    isTokenUsed.value = true;
    return;
  }
  
  if (isSubmitting.value) {
    return;
  }
  
  try {
    isSubmitting.value = true;
    resultMessage.value = '';
    
    // 模擬API請(qǐng)求
    await new Promise(resolve => setTimeout(resolve, 2000));
    
    // 標(biāo)記令牌為已使用
    markTokenAsUsed(formToken.value);
    
    // 請(qǐng)求成功
    isSuccess.value = true;
    resultMessage.value = '訂單提交成功！';
    
  } catch (error) {
    // 請(qǐng)求失敗
    isSuccess.value = false;
    resultMessage.value = '提交失?。? + (error.message || '服務(wù)器錯(cuò)誤');
  } finally {
    isSubmitting.value = false;
  }
}

onMounted(() => {
  // 組件掛載時(shí)生成令牌
  formToken.value = generateToken();
});
</script>

<template>
  <div class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md">
    <h2 class="text-xl font-bold mb-4">方案四：防抖與節(jié)流</h2>
    
    <form @submit.prevent class="space-y-4">
      <div>
        <label for="search" class="block text-sm font-medium mb-1">搜索關(guān)鍵詞</label>
        <input 
          id="search" 
          v-model="searchTerm" 
          type="text" 
          class="w-full px-3 py-2 border border-gray-300 rounded-md"
          placeholder="輸入關(guān)鍵詞..."
        />
      </div>
      
      <div class="grid grid-cols-2 gap-4">
        <div>
          <button 
            @click="normalSubmit"
            class="w-full py-2 px-4 bg-red-600 hover:bg-red-700 text-white font-medium rounded-md transition-colors"
          >
            普通提交
          </button>
          <div class="mt-2 text-xs text-gray-500">
            點(diǎn)擊次數(shù): {{ normalClickCount }}
          </div>
        </div>
        
        <div>
          <button 
            @click="debouncedSubmit"
            class="w-full py-2 px-4 bg-green-600 hover:bg-green-700 text-white font-medium rounded-md transition-colors"
          >
            防抖提交
          </button>
          <div class="mt-2 text-xs text-gray-500">
            實(shí)際提交次數(shù): {{ debounceSubmitCount }}
          </div>
        </div>
      </div>
      
      <div class="grid grid-cols-2 gap-4 mt-4">
        <div>
          <button 
            @click="throttledSubmit"
            class="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md transition-colors"
          >
            節(jié)流提交
          </button>
          <div class="mt-2 text-xs text-gray-500">
            實(shí)際提交次數(shù): {{ throttleSubmitCount }}
          </div>
        </div>
        
        <div>
          <button 
            @click="resetCounts"
            class="w-full py-2 px-4 bg-gray-600 hover:bg-gray-700 text-white font-medium rounded-md transition-colors"
          >
            重置計(jì)數(shù)
          </button>
        </div>
      </div>
      
      <div class="mt-4 p-3 bg-gray-100 rounded-md">
        <h3 class="font-medium mb-2">日志:</h3>
        <div class="h-40 overflow-y-auto text-sm">
          <div v-for="(log, index) in logs" :key="index" class="mb-1">
            {{ log }}
          </div>
        </div>
      </div>
    </form>
  </div>
</template>

<script setup>
import { ref, onUnmounted } from 'vue';

const searchTerm = ref('');
const normalClickCount = ref(0);
const debounceSubmitCount = ref(0);
const throttleSubmitCount = ref(0);
const logs = ref([]);

// 添加日志
function addLog(message) {
  const now = new Date();
  const timeStr = `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}.${now.getMilliseconds()}`;
  logs.value.unshift(`[${timeStr}] ${message}`);
}

// 普通提交
function normalSubmit() {
  normalClickCount.value++;
  addLog(`普通提交被觸發(fā)，搜索詞: ${searchTerm.value}`);
}

// 防抖函數(shù)
function debounce(func, delay) {
  let timer = null;
  return function(...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// 節(jié)流函數(shù)
function throttle(func, limit) {
  let inThrottle = false;
  return function(...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => {
        inThrottle = false;
      }, limit);
    }
  };
}

// 防抖提交處理函數(shù)
function handleDebouncedSubmit() {
  debounceSubmitCount.value++;
  addLog(`防抖提交被觸發(fā)，搜索詞: ${searchTerm.value}`);
}

// 節(jié)流提交處理函數(shù)
function handleThrottledSubmit() {
  throttleSubmitCount.value++;
  addLog(`節(jié)流提交被觸發(fā)，搜索詞: ${searchTerm.value}`);
}

// 創(chuàng)建防抖和節(jié)流版本的提交函數(shù)
const debouncedSubmit = debounce(handleDebouncedSubmit, 1000); // 1秒防抖
const throttledSubmit = throttle(handleThrottledSubmit, 2000); // 2秒節(jié)流

// 重置計(jì)數(shù)
function resetCounts() {
  normalClickCount.value = 0;
  debounceSubmitCount.value = 0;
  throttleSubmitCount.value = 0;
  logs.value = [];
  addLog('計(jì)數(shù)已重置');
}

// 組件卸載時(shí)清除定時(shí)器
onUnmounted(() => {
  // 這里應(yīng)該清除定時(shí)器，但由于我們的防抖和節(jié)流函數(shù)是閉包形式，
  // 實(shí)際項(xiàng)目中應(yīng)該使用更完善的實(shí)現(xiàn)方式，確保定時(shí)器被正確清除
});
</script>

// Controller層
@RestController
@RequestMapping("/api")
public class FormController {
    
    private final FormTokenService tokenService;
    private final FormService formService;
    
    public FormController(FormTokenService tokenService, FormService formService) {
        this.tokenService = tokenService;
        this.formService = formService;
    }
    
    @PostMapping("/submit")
    public ResponseEntity<?> submitForm(@RequestBody FormRequest request,
                                       @RequestHeader("X-Form-Token") String token) {
        
        // 驗(yàn)證令牌是否有效
        if (!tokenService.isValidToken(token)) {
            return ResponseEntity
                .status(HttpStatus.BAD_REQUEST)
                .body(new ApiResponse(false, "無效的表單令牌"));
        }
        
        // 驗(yàn)證令牌是否已使用
        if (tokenService.isTokenUsed(token)) {
            return ResponseEntity
                .status(HttpStatus.TOO_MANY_REQUESTS)
                .body(new ApiResponse(false, "表單已提交，請(qǐng)勿重復(fù)提交"));
        }
        
        try {
            // 標(biāo)記令牌為已使用（在處理業(yè)務(wù)邏輯前）
            tokenService.markTokenAsUsed(token);
            
            // 處理表單提交
            String formId = formService.processForm(request);
            
            return ResponseEntity.ok(new ApiResponse(true, "表單提交成功", formId));
            
        } catch (Exception e) {
            // 發(fā)生異常時(shí)，可以選擇是否將令牌標(biāo)記為未使用
            // tokenService.invalidateToken(token);
            
            return ResponseEntity
                .status(HttpStatus.INTERNAL_SERVER_ERROR)
                .body(new ApiResponse(false, "表單提交失敗: " + e.getMessage()));
        }
    }
}

// 令牌服務(wù)接口
public interface FormTokenService {
    boolean isValidToken(String token);
    boolean isTokenUsed(String token);
    void markTokenAsUsed(String token);
    void invalidateToken(String token);
}

// 令牌服務(wù)實(shí)現(xiàn)（使用內(nèi)存緩存）
@Service
public class FormTokenServiceImpl implements FormTokenService {
    
    // 使用Caffeine緩存庫
    private final Cache<String, Boolean> usedTokens;
    
    public FormTokenServiceImpl() {
        // 創(chuàng)建緩存，24小時(shí)后過期
        this.usedTokens = Caffeine.newBuilder()
            .expireAfterWrite(24, TimeUnit.HOURS)
            .maximumSize(10_000)
            .build();
    }
    
    @Override
    public boolean isValidToken(String token) {
        // 簡單驗(yàn)證：非空且長度合適
        return token != null && token.length() >= 8;
    }
    
    @Override
    public boolean isTokenUsed(String token) {
        return usedTokens.getIfPresent(token) != null;
    }
    
    @Override
    public void markTokenAsUsed(String token) {
        usedTokens.put(token, Boolean.TRUE);
    }
    
    @Override
    public void invalidateToken(String token) {
        usedTokens.invalidate(token);
    }
}

// 請(qǐng)求和響應(yīng)類
public class FormRequest {
    private String name;
    private String email;
    private String content;
    
    // getters and setters
}

public class ApiResponse {
    private boolean success;
    private String message;
    private Object data;
    
    public ApiResponse(boolean success, String message) {
        this.success = success;
        this.message = message;
    }
    
    public ApiResponse(boolean success, String message, Object data) {
        this.success = success;
        this.message = message;
        this.data = data;
    }
    
    // getters
}

// 實(shí)體類
@Entity
@Table(name = "orders", 
       uniqueConstraints = @UniqueConstraint(columnNames = {"order_number"}))
public class Order {
    
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    
    @Column(name = "order_number", unique = true, nullable = false)
    private String orderNumber;
    
    @Column(name = "customer_name")
    private String customerName;
    
    @Column(name = "amount")
    private BigDecimal amount;
    
    @Column(name = "created_at")
    private LocalDateTime createdAt;
    
    // getters and setters
}

// 倉庫接口
@Repository
public interface OrderRepository extends JpaRepository<Order, Long> {
    boolean existsByOrderNumber(String orderNumber);
}

// 服務(wù)實(shí)現(xiàn)
@Service
public class OrderServiceImpl implements OrderService {
    
    private final OrderRepository orderRepository;
    
    public OrderServiceImpl(OrderRepository orderRepository) {
        this.orderRepository = orderRepository;
    }
    
    @Override
    @Transactional
    public String createOrder(OrderRequest request) {
        // 生成訂單號(hào)
        String orderNumber = generateOrderNumber();
        
        // 檢查訂單號(hào)是否已存在
        if (orderRepository.existsByOrderNumber(orderNumber)) {
            throw new DuplicateOrderException("訂單號(hào)已存在");
        }
        
        // 創(chuàng)建訂單
        Order order = new Order();
        order.setOrderNumber(orderNumber);
        order.setCustomerName(request.getCustomerName());
        order.setAmount(request.getAmount());
        order.setCreatedAt(LocalDateTime.now());
        
        try {
            orderRepository.save(order);
            return orderNumber;
        } catch (DataIntegrityViolationException e) {
            // 捕獲唯一約束違反異常
            throw new DuplicateOrderException("創(chuàng)建訂單失敗，可能是重復(fù)提交", e);
        }
    }
    
    private String generateOrderNumber() {
        // 生成唯一訂單號(hào)的邏輯
        return "ORD" + System.currentTimeMillis() + 
               String.format("%04d", new Random().nextInt(10000));
    }
}

// 控制器
@RestController
@RequestMapping("/api/orders")
public class OrderController {
    
    private final OrderService orderService;
    
    public OrderController(OrderService orderService) {
        this.orderService = orderService;
    }
    
    @PostMapping
    public ResponseEntity<?> createOrder(@RequestBody OrderRequest request) {
        try {
            String orderNumber = orderService.createOrder(request);
            return ResponseEntity.ok(new ApiResponse(true, "訂單創(chuàng)建成功", orderNumber));
        } catch (DuplicateOrderException e) {
            return ResponseEntity
                .status(HttpStatus.CONFLICT)
                .body(new ApiResponse(false, e.getMessage()));
        } catch (Exception e) {
            return ResponseEntity
                .status(HttpStatus.INTERNAL_SERVER_ERROR)
                .body(new ApiResponse(false, "創(chuàng)建訂單失敗: " + e.getMessage()));
        }
    }
}

// 異常類
public class DuplicateOrderException extends RuntimeException {
    public DuplicateOrderException(String message) {
        super(message);
    }
    
    public DuplicateOrderException(String message, Throwable cause) {
        super(message, cause);
    }
}

// 服務(wù)實(shí)現(xiàn)
@Service
public class PaymentServiceImpl implements PaymentService {
    
    private final PaymentRepository paymentRepository;
    private final AccountRepository accountRepository;
    
    public PaymentServiceImpl(PaymentRepository paymentRepository, 
                             AccountRepository accountRepository) {
        this.paymentRepository = paymentRepository;
        this.accountRepository = accountRepository;
    }
    
    @Override
    @Transactional(isolation = Isolation.SERIALIZABLE)
    public String processPayment(PaymentRequest request) {
        // 檢查是否存在相同的支付請(qǐng)求
        if (paymentRepository.existsByTransactionId(request.getTransactionId())) {
            throw new DuplicatePaymentException("該交易已處理，請(qǐng)勿重復(fù)支付");
        }
        
        // 獲取賬戶（使用悲觀鎖）
        Account account = accountRepository.findByIdWithLock(request.getAccountId())
            .orElseThrow(() -> new AccountNotFoundException("賬戶不存在"));
        
        // 檢查余額
        if (account.getBalance().compareTo(request.getAmount()) < 0) {
            throw new InsufficientBalanceException("賬戶余額不足");
        }
        
        // 扣減余額
        account.setBalance(account.getBalance().subtract(request.getAmount()));
        accountRepository.save(account);
        
        // 創(chuàng)建支付記錄
        Payment payment = new Payment();
        payment.setTransactionId(request.getTransactionId());
        payment.setAccountId(request.getAccountId());
        payment.setAmount(request.getAmount());
        payment.setStatus("SUCCESS");
        payment.setCreatedAt(LocalDateTime.now());
        
        paymentRepository.save(payment);
        
        return payment.getTransactionId();
    }
}

// 倉庫接口
@Repository
public interface AccountRepository extends JpaRepository<Account, Long> {
    
    // 使用悲觀鎖查詢賬戶
    @Lock(LockModeType.PESSIMISTIC_WRITE)
    @Query("SELECT a FROM Account a WHERE a.id = :id")
    Optional<Account> findByIdWithLock(@Param("id") Long id);
}

@Repository
public interface PaymentRepository extends JpaRepository<Payment, Long> {
    boolean existsByTransactionId(String transactionId);
}

// 控制器
@RestController
@RequestMapping("/api/payments")
public class PaymentController {
    
    private final PaymentService paymentService;
    
    public PaymentController(PaymentService paymentService) {
        this.paymentService = paymentService;
    }
    
    @PostMapping
    public ResponseEntity<?> processPayment(@RequestBody PaymentRequest request) {
        try {
            String transactionId = paymentService.processPayment(request);
            return ResponseEntity.ok(new ApiResponse(true, "支付成功", transactionId));
        } catch (DuplicatePaymentException e) {
            return ResponseEntity
                .status(HttpStatus.CONFLICT)
                .body(new ApiResponse(false, e.getMessage()));
        } catch (Exception e) {
            return ResponseEntity
                .status(HttpStatus.INTERNAL_SERVER_ERROR)
                .body(new ApiResponse(false, "支付處理失敗: " + e.getMessage()));
        }
    }
}

// 分布式鎖服務(wù)接口
public interface DistributedLockService {
    boolean tryLock(String lockKey, long waitTime, long leaseTime, TimeUnit unit);
    void unlock(String lockKey);
    boolean isLocked(String lockKey);
}

// Redis實(shí)現(xiàn)的分布式鎖服務(wù)
@Service
public class RedisDistributedLockService implements DistributedLockService {
    
    private final RedissonClient redissonClient;
    
    public RedisDistributedLockService(RedissonClient redissonClient) {
        this.redissonClient = redissonClient;
    }
    
    @Override
    public boolean tryLock(String lockKey, long waitTime, long leaseTime, TimeUnit unit) {
        RLock lock = redissonClient.getLock(lockKey);
        try {
            return lock.tryLock(waitTime, leaseTime, unit);
        } catch (InterruptedException e) {
            Thread.currentThread().interrupt();
            return false;
        }
    }
    
    @Override
    public void unlock(String lockKey) {
        RLock lock = redissonClient.getLock(lockKey);
        if (lock.isHeldByCurrentThread()) {
            lock.unlock();
        }
    }
    
    @Override
    public boolean isLocked(String lockKey) {
        RLock lock = redissonClient.getLock(lockKey);
        return lock.isLocked();
    }
}

// 使用分布式鎖的服務(wù)實(shí)現(xiàn)
@Service
public class RegistrationServiceImpl implements RegistrationService {
    
    private final DistributedLockService lockService;
    private final UserRepository userRepository;
    
    public RegistrationServiceImpl(DistributedLockService lockService,
                                  UserRepository userRepository) {
        this.lockService = lockService;
        this.userRepository = userRepository;
    }
    
    @Override
    public String registerUser(UserRegistrationRequest request) {
        // 創(chuàng)建鎖鍵（基于用戶名或郵箱）
        String lockKey = "user_registration:" + request.getEmail();
        
        boolean locked = false;
        try {
            // 嘗試獲取鎖，等待5秒，鎖定30秒
            locked = lockService.tryLock(lockKey, 5, 30, TimeUnit.SECONDS);
            
            if (!locked) {
                throw new ConcurrentOperationException("操作正在處理中，請(qǐng)稍后再試");
            }
            
            // 檢查用戶是否已存在
            if (userRepository.existsByEmail(request.getEmail())) {
                throw new DuplicateUserException("該郵箱已注冊(cè)");
            }
            
            // 創(chuàng)建用戶
            User user = new User();
            user.setUsername(request.getUsername());
            user.setEmail(request.getEmail());
            user.setPassword(encryptPassword(request.getPassword()));
            user.setCreatedAt(LocalDateTime.now());
            
            userRepository.save(user);
            
            return user.getId().toString();
            
        } finally {
            // 釋放鎖
            if (locked) {
                lockService.unlock(lockKey);
            }
        }
    }
    
    private String encryptPassword(String password) {
        // 密碼加密邏輯
        return BCrypt.hashpw(password, BCrypt.gensalt());
    }
}

// 控制器
@RestController
@RequestMapping("/api/users")
public class UserController {
    
    private final RegistrationService registrationService;
    
    public UserController(RegistrationService registrationService) {
        this.registrationService = registrationService;
    }
    
    @PostMapping("/register")
    public ResponseEntity<?> registerUser(@RequestBody UserRegistrationRequest request) {
        try {
            String userId = registrationService.registerUser(request);
            return ResponseEntity.ok(new ApiResponse(true, "用戶注冊(cè)成功", userId));
        } catch (DuplicateUserException e) {
            return ResponseEntity
                .status(HttpStatus.CONFLICT)
                .body(new ApiResponse(false, e.getMessage()));
        } catch (ConcurrentOperationException e) {
            return ResponseEntity
                .status(HttpStatus.TOO_MANY_REQUESTS)
                .body(new ApiResponse(false, e.getMessage()));
        } catch (Exception e) {
            return ResponseEntity
                .status(HttpStatus.INTERNAL_SERVER_ERROR)
                .body(new ApiResponse(false, "注冊(cè)失敗: " + e.getMessage()));
        }
    }
}

<template>
  <div class="max-w-2xl mx-auto p-6 bg-white rounded-lg shadow-md">
    <h1 class="text-2xl font-bold mb-6 text-gray-800">訂單提交系統(tǒng)</h1>
    
    <form @submit.prevent="submitOrder" class="space-y-6">
      <!-- 客戶信息 -->
      <div class="bg-gray-50 p-4 rounded-md">
        <h2 class="text-lg font-medium mb-3">客戶信息</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label for="customerName" class="block text-sm font-medium mb-1">客戶姓名</label>
            <input 
              id="customerName" 
              v-model="orderData.customerName" 
              type="text" 
              class="w-full px-3 py-2 border border-gray-300 rounded-md"
              required
            />
          </div>
          <div>
            <label for="phone" class="block text-sm font-medium mb-1">聯(lián)系電話</label>
            <input 
              id="phone" 
              v-model="orderData.phone" 
              type="tel" 
              class="w-full px-3 py-2 border border-gray-300 rounded-md"
              required
            />
          </div>
        </div>
      </div>
      
      <!-- 訂單信息 -->
      <div class="bg-gray-50 p-4 rounded-md">
        <h2 class="text-lg font-medium mb-3">訂單信息</h2>
        <div class="space-y-4">
          <div>
            <label for="productId" class="block text-sm font-medium mb-1">產(chǎn)品選擇</label>
            <select 
              id="productId" 
              v-model="orderData.productId" 
              class="w-full px-3 py-2 border border-gray-300 rounded-md"
              required
            >
              <option value="">請(qǐng)選擇產(chǎn)品</option>
              <option value="1">產(chǎn)品A - ￥100</option>
              <option value="2">產(chǎn)品B - ￥200</option>
              <option value="3">產(chǎn)品C - ￥300</option>
            </select>
          </div>
          
          <div>
            <label for="quantity" class="block text-sm font-medium mb-1">數(shù)量</label>
            <input 
              id="quantity" 
              v-model.number="orderData.quantity" 
              type="number" 
              min="1"
              class="w-full px-3 py-2 border border-gray-300 rounded-md"
              required
            />
          </div>
          
          <div>
            <label for="address" class="block text-sm font-medium mb-1">收貨地址</label>
            <textarea 
              id="address" 
              v-model="orderData.address" 
              class="w-full px-3 py-2 border border-gray-300 rounded-md"
              rows="2"
              required
            ></textarea>
          </div>
        </div>
      </div>
      
      <!-- 訂單摘要 -->
      <div class="bg-gray-50 p-4 rounded-md">
        <h2 class="text-lg font-medium mb-3">訂單摘要</h2>
        <div class="flex justify-between mb-2">
          <span>產(chǎn)品價(jià)格:</span>
          <span>￥{{ productPrice }}</span>
        </div>
        <div class="flex justify-between mb-2">
          <span>數(shù)量:</span>
          <span>{{ orderData.quantity || 0 }}</span>
        </div>
        <div class="flex justify-between font-bold">
          <span>總計(jì):</span>
          <span>￥{{ totalPrice }}</span>
        </div>
      </div>
      
      <!-- 隱藏的表單令牌 -->
      <input type="hidden" name="orderToken" :value="orderToken" />
      
      <!-- 提交按鈕 -->
      <div>
        <button 
          type="submit" 
          class="w-full py-3 px-4 bg-green-600 hover:bg-green-700 text-white font-medium rounded-md transition-colors"
          :disabled="isSubmitting || isOrderSubmitted"
        >
          <span v-if="isSubmitting" class="flex items-center justify-center">
            <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            訂單提交中...
          </span>
          <span v-else-if="isOrderSubmitted">訂單已提交</span>
          <span v-else>提交訂單</span>
        </button>
      </div>
      
      <!-- 結(jié)果消息 -->
      <div v-if="resultMessage" :class="[isSuccess ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800', 'p-4 rounded-md']">
        <p class="font-medium">{{ resultMessage }}</p>
        <p v-if="orderNumber" class="mt-2">
          訂單號(hào): <span class="font-mono font-bold">{{ orderNumber }}</span>
        </p>
      </div>
    </form>
    
    <!-- 確認(rèn)對(duì)話框 -->
    <div v-if="showConfirmDialog" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div class="bg-white p-6 rounded-lg shadow-lg max-w-md w-full">
        <h3 class="text-xl font-bold mb-4">確認(rèn)提交訂單</h3>
        <p class="mb-4">您確定要提交此訂單嗎？提交后將無法修改。</p>
        <div class="flex justify-end space-x-4">
          <button 
            @click="showConfirmDialog = false" 
            class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-md"
          >
            取消
          </button>
          <button 
            @click="confirmSubmit" 
            class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md"
          >
            確認(rèn)提交
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';

// 訂單數(shù)據(jù)
const orderData = reactive({
  customerName: '',
  phone: '',
  productId: '',
  quantity: 1,
  address: ''
});

// 狀態(tài)變量
const isSubmitting = ref(false);
const isOrderSubmitted = ref(false);
const resultMessage = ref('');
const isSuccess = ref(false);
const orderNumber = ref('');
const orderToken = ref('');
const showConfirmDialog = ref(false);

// 計(jì)算屬性
const productPrice = computed(() => {
  switch (orderData.productId) {
    case '1': return 100;
    case '2': return 200;
    case '3': return 300;
    default: return 0;
  }
});

const totalPrice = computed(() => {
  return productPrice.value * (orderData.quantity || 0);
});

// 生成唯一令牌
function generateToken() {
  return Date.now().toString(36) + Math.random().toString(36).substring(2);
}

// 防抖函數(shù)
function debounce(func, delay) {
  let timer = null;
  return function(...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// 提交訂單（顯示確認(rèn)對(duì)話框）
function submitOrder() {
  // 如果已提交或正在提交，直接返回
  if (isSubmitting.value || isOrderSubmitted.value) {
    return;
  }
  
  // 顯示確認(rèn)對(duì)話框
  showConfirmDialog.value = true;
}

// 確認(rèn)提交（實(shí)際提交邏輯）
const confirmSubmit = debounce(async function() {
  showConfirmDialog.value = false;
  
  if (isSubmitting.value || isOrderSubmitted.value) {
    return;
  }
  
  try {
    isSubmitting.value = true;
    resultMessage.value = '';
    
    // 準(zhǔn)備提交數(shù)據(jù)
    const payload = {
      ...orderData,
      totalPrice: totalPrice.value,
      _token: orderToken.value
    };
    
    // 發(fā)送到后端
    const response = await fetch('/api/orders', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Order-Token': orderToken.value
      },
      body: JSON.stringify(payload)
    });
    
    const data = await response.json();
    
    if (!response.ok) {
      throw new Error(data.message || '訂單提交失敗');
    }
    
    // 提交成功
    isSuccess.value = true;
    resultMessage.value = '訂單提交成功！';
    orderNumber.value = data.data; // 訂單號(hào)
    isOrderSubmitted.value = true;
    
    // 生成新令牌（以防用戶想再次提交）
    orderToken.value = generateToken();
    
  } catch (error) {
    // 提交失敗
    isSuccess.value = false;
    resultMessage.value = error.message;
  } finally {
    isSubmitting.value = false;
  }
}, 300);

onMounted(() => {
  // 組件掛載時(shí)生成令牌
  orderToken.value = generateToken();
});
</script>

// 訂單實(shí)體
@Entity
@Table(name = "orders", 
       uniqueConstraints = @UniqueConstraint(columnNames = {"order_number"}))
public class Order {
    
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    
    @Column(name = "order_number", unique = true, nullable = false)
    private String orderNumber;
    
    @Column(name = "customer_name")
    private String customerName;
    
    @Column(name = "phone")
    private String phone;
    
    @Column(name = "product_id")
    private Long productId;
    
    @Column(name = "quantity")
    private Integer quantity;
    
    @Column(name = "address")
    private String address;
    
    @Column(name = "total_price")
    private BigDecimal totalPrice;
    
    @Column(name = "status")
    private String status;
    
    @Column(name = "created_at")
    private LocalDateTime createdAt;
    
    // getters and setters
}

// 訂單服務(wù)接口
public interface OrderService {
    String createOrder(OrderRequest request);
}

// 訂單服務(wù)實(shí)現(xiàn)
@Service
@Transactional
public class OrderServiceImpl implements OrderService {
    
    private final OrderRepository orderRepository;
    private final OrderTokenService tokenService;
    
    public OrderServiceImpl(OrderRepository orderRepository, 
                           OrderTokenService tokenService) {
        this.orderRepository = orderRepository;
        this.tokenService = tokenService;
    }
    
    @Override
    @Transactional(isolation = Isolation.SERIALIZABLE)
    public String createOrder(OrderRequest request) {
        // 驗(yàn)證令牌
        String token = request.getToken();
        if (tokenService.isTokenUsed(token)) {
            throw new DuplicateOrderException("訂單已提交，請(qǐng)勿重復(fù)提交");
        }
        
        try {
            // 標(biāo)記令牌為已使用
            tokenService.markTokenAsUsed(token);
            
            // 生成訂單號(hào)
            String orderNumber = generateOrderNumber();
            
            // 創(chuàng)建訂單
            Order order = new Order();
            order.setOrderNumber(orderNumber);
            order.setCustomerName(request.getCustomerName());
            order.setPhone(request.getPhone());
            order.setProductId(request.getProductId());
            order.setQuantity(request.getQuantity());
            order.setAddress(request.getAddress());
            order.setTotalPrice(request.getTotalPrice());
            order.setStatus("PENDING");
            order.setCreatedAt(LocalDateTime.now());
            
            orderRepository.save(order);
            
            // 異步處理訂單（示例）
            processOrderAsync(order);
            
            return orderNumber;
            
        } catch (DataIntegrityViolationException e) {
            // 捕獲數(shù)據(jù)庫唯一約束異常
            throw new DuplicateOrderException("訂單創(chuàng)建失敗，可能是重復(fù)提交", e);
        }
    }
    
    private String generateOrderNumber() {
        return "ORD" + LocalDateTime.now().format(DateTimeFormatter.ofPattern("yyyyMMddHHmmss")) + 
               String.format("%04d", new Random().nextInt(10000));
    }
    
    @Async
    public void processOrderAsync(Order order) {
        // 異步處理訂單的邏輯
        try {
            // 模擬處理時(shí)間
            Thread.sleep(5000);
            
            // 更新訂單狀態(tài)
            order.setStatus("PROCESSED");
            orderRepository.save(order);
            
        } catch (Exception e) {
            // 處理異常
            order.setStatus("ERROR");
            orderRepository.save(order);
        }
    }
}

// 令牌服務(wù)實(shí)現(xiàn)
@Service
public class OrderTokenServiceImpl implements OrderTokenService {
    
    private final RedisTemplate<String, Boolean> redisTemplate;
    
    public OrderTokenServiceImpl(RedisTemplate<String, Boolean> redisTemplate) {
        this.redisTemplate = redisTemplate;
    }
    
    @Override
    public boolean isTokenUsed(String token) {
        Boolean used = redisTemplate.opsForValue().get("order_token:" + token);
        return used != null && used;
    }
    
    @Override
    public void markTokenAsUsed(String token) {
        redisTemplate.opsForValue().set("order_token:" + token, true, 24, TimeUnit.HOURS);
    }
    
    @Override
    public void invalidateToken(String token) {
        redisTemplate.delete("order_token:" + token);
    }
}

// 控制器
@RestController
@RequestMapping("/api/orders")
public class OrderController {
    
    private final OrderService orderService;
    private static final Logger logger = LoggerFactory.getLogger(OrderController.class);
    
    public OrderController(OrderService orderService) {
        this.orderService = orderService;
    }
    
    @PostMapping
    public ResponseEntity<?> createOrder(@RequestBody OrderRequest request,
                                        @RequestHeader("X-Order-Token") String token) {
        // 設(shè)置令牌（以防請(qǐng)求體中沒有）
        request.setToken(token);
        
        try {
            // 記錄請(qǐng)求日志
            logger.info("Received order request with token: {}", token);
            
            // 創(chuàng)建訂單
            String orderNumber = orderService.createOrder(request);
            
            // 記錄成功日志
            logger.info("Order created successfully: {}", orderNumber);
            
            return ResponseEntity.ok(new ApiResponse(true, "訂單提交成功", orderNumber));
            
        } catch (DuplicateOrderException e) {
            // 記錄重復(fù)提交日志
            logger.warn("Duplicate order submission: {}", e.getMessage());
            
            return ResponseEntity
                .status(HttpStatus.CONFLICT)
                .body(new ApiResponse(false, e.getMessage()));
                
        } catch (Exception e) {
            // 記錄錯(cuò)誤日志
            logger.error("Error creating order", e);
            
            return ResponseEntity
                .status(HttpStatus.INTERNAL_SERVER_ERROR)
                .body(new ApiResponse(false, "訂單提交失敗: " + e.getMessage()));
        }
    }
}