diff --git a/frontend/ops_vue_js/public/static/flags/cn.svg b/frontend/ops_vue_js/public/static/flags/cn.svg
new file mode 100644
index 0000000..67b3049
--- /dev/null
+++ b/frontend/ops_vue_js/public/static/flags/cn.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 22" width="20" height="14">
+  <!-- 红色背景 -->
+  <rect width="33" height="22" fill="#de2910"/>
+  <!-- 大五角星 -->
+  <polygon points="5,1 6.5,4.5 10,4.5 7.5,6.8 8.5,10.5 5,8 1.5,10.5 2.5,6.8 0,4.5 3.5,4.5" fill="#ffde00"/>
+  <!-- 四颗小五角星 -->
+  <polygon points="10,3 10.6,4.3 12,4.3 11,5.2 11.4,6.6 10,5.7 8.6,6.6 9,5.2 8,4.3 9.4,4.3" fill="#ffde00"/>
+  <polygon points="13,1 13.6,2.3 15,2.3 14,3.2 14.4,4.6 13,3.7 11.6,4.6 12,3.2 11,2.3 12.4,2.3" fill="#ffde00"/>
+  <polygon points="15,3 15.6,4.3 17,4.3 16,5.2 16.4,6.6 15,5.7 13.6,6.6 14,5.2 13,4.3 14.4,4.3" fill="#ffde00"/>
+  <polygon points="12.5,5 13.1,6.3 14.5,6.3 13.5,7.2 13.9,8.6 12.5,7.7 11.1,8.6 11.5,7.2 10.5,6.3 11.9,6.3" fill="#ffde00"/>
+</svg>
diff --git a/frontend/ops_vue_js/public/static/flags/hk.svg b/frontend/ops_vue_js/public/static/flags/hk.svg
new file mode 100644
index 0000000..6b0f7e4
--- /dev/null
+++ b/frontend/ops_vue_js/public/static/flags/hk.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 22" width="20" height="14">
+  <!-- 红色背景 -->
+  <rect width="33" height="22" fill="#de2910"/>
+  <!-- 白色条带 -->
+  <rect y="7" width="33" height="8" fill="#fff"/>
+  <!-- 紫荆花（简化版） -->
+  <g fill="#fff" transform="translate(6.6,11) scale(0.4)">
+    <ellipse cx="0" cy="-8" rx="4" ry="8" fill="#fff"/>
+    <ellipse cx="7.6" cy="-2.5" rx="4" ry="8" fill="#fff" transform="rotate(72)"/>
+    <ellipse cx="4.7" cy="6.5" rx="4" ry="8" fill="#fff" transform="rotate(144)"/>
+    <ellipse cx="-4.7" cy="6.5" rx="4" ry="8" fill="#fff" transform="rotate(216)"/>
+    <ellipse cx="-7.6" cy="-2.5" rx="4" ry="8" fill="#fff" transform="rotate(288)"/>
+    <!-- 花芯 -->
+    <circle cx="0" cy="0" r="3" fill="#ffdf00"/>
+  </g>
+</svg>
diff --git a/frontend/ops_vue_js/public/static/flags/mo.svg b/frontend/ops_vue_js/public/static/flags/mo.svg
new file mode 100644
index 0000000..4d964a1
--- /dev/null
+++ b/frontend/ops_vue_js/public/static/flags/mo.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 22" width="20" height="14">
+  <!-- 绿色背景 -->
+  <rect width="33" height="22" fill="#009900"/>
+  <!-- 莲花（简化版） -->
+  <g fill="#fff" transform="translate(16.5,11)">
+    <ellipse cx="0" cy="-5" rx="2" ry="5"/>
+    <ellipse cx="-4" cy="-2" rx="2" ry="5" transform="rotate(-30)"/>
+    <ellipse cx="4" cy="-2" rx="2" ry="5" transform="rotate(30)"/>
+    <ellipse cx="-6" cy="2" rx="2" ry="5" transform="rotate(-60)"/>
+    <ellipse cx="6" cy="2" rx="2" ry="5" transform="rotate(60)"/>
+    <!-- 莲蓬 -->
+    <circle cx="0" cy="0" r="2.5" fill="#ffdf00"/>
+  </g>
+</svg>
diff --git a/frontend/ops_vue_js/public/static/flags/us.svg b/frontend/ops_vue_js/public/static/flags/us.svg
new file mode 100644
index 0000000..3626f0f
--- /dev/null
+++ b/frontend/ops_vue_js/public/static/flags/us.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 22" width="20" height="14">
+  <!-- 红色条纹 -->
+  <rect y="0" width="33" height="2.75" fill="#b22234"/>
+  <rect y="5.5" width="33" height="2.75" fill="#fff"/>
+  <rect y="8.25" width="33" height="2.75" fill="#b22234"/>
+  <rect y="11" width="33" height="2.75" fill="#fff"/>
+  <rect y="13.75" width="33" height="2.75" fill="#b22234"/>
+  <rect y="16.5" width="33" height="2.75" fill="#fff"/>
+  <rect y="19.25" width="33" height="2.75" fill="#b22234"/>
+  <!-- 蓝色矩形（左上角） -->
+  <rect width="13.2" height="8.25" fill="#3c3b6e"/>
+  <!-- 50颗白星（简化：画5x5网格白点） -->
+  <g fill="#fff">
+    <circle cx="2.2" cy="1.1" r="0.7"/>
+    <circle cx="6.6" cy="1.1" r="0.7"/>
+    <circle cx="2.2" cy="4.4" r="0.7"/>
+    <circle cx="6.6" cy="4.4" r="0.7"/>
+  </g>
+</svg>
diff --git a/frontend/ops_vue_js/src/components/useDropzone.vue b/frontend/ops_vue_js/src/components/useDropzone.vue
index 010ff70..61b38d4 100644
--- a/frontend/ops_vue_js/src/components/useDropzone.vue
+++ b/frontend/ops_vue_js/src/components/useDropzone.vue
@@ -223,216 +223,145 @@ defineExpose({
 <template>
   <div>
     <div id="custom-template" style="display: none">
-      <div class="dz-preview dz-file-preview my-custom-style">
-        <div class="remove-btn" data-dz-remove>
-          <!-- <i class="bi bi-x"></i> -->
-          X
-        </div>
-        <div class="dz-image">
-          <img data-dz-thumbnail alt="File preview" />
-          <!-- 缩略图 -->
-        </div>
+      <div class="dz-preview dz-file-preview">
+        <div data-dz-remove class="dz-remove">✕</div>
+        <div class="dz-image"><img data-dz-thumbnail alt="" /></div>
         <div class="dz-details">
           <div class="dz-filename"><span data-dz-name></span></div>
-          <!-- 文件名 -->
           <div class="dz-size"><span data-dz-size></span></div>
-          <!-- 文件大小 -->
-        </div>
-        <div class="dz-progress">
-          <span class="dz-upload" data-dz-uploadprogress></span>
-          <!-- 进度条 -->
         </div>
+        <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
         <div class="dz-success-mark" data-dz-successmark>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="icon icon-tabler icons-tabler-outline icon-tabler-circle-check"
-          >
-            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-            <path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
-            <path d="M9 12l2 2l4 -4" />
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="#22c55e" stroke="#22c55e" stroke-width="3">
+            <path d="M9 12l2 2l4 -4" stroke="none"/>
           </svg>
         </div>
-        <!-- 成功标记 -->
         <div class="dz-error-mark" data-dz-errormark>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="240"
-            height="240"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="icon icon-tabler icons-tabler-outline icon-tabler-circle-x"
-          >
-            <path stroke="none" fill="none" d="M0 0h24v24H0z" />
-            <path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
-            <path d="M10 10l4 4m0 -4l-4 4" />
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="#ef4444" stroke="#ef4444" stroke-width="3">
+            <path d="M10 10l4 4m0 -4l-4 4" stroke="none"/>
           </svg>
         </div>
-        <!-- 错误标记 -->
         <div class="dz-error-message"><span data-dz-errormessage></span></div>
-        <!-- 错误信息 -->
-
-        <!-- 移除按钮 -->
       </div>
     </div>
     
-    <div class="text-end">{{ files.length }}/{{ maxFiles }}</div>
-    <div ref="dropzoneElement" class="dropzone"></div>
+    <div class="text-end text-sm text-gray-500">{{ files.length }}/{{ maxFiles }}</div>
+    <div ref="dropzoneElement" class="dropzone mt-2"></div>
   </div>
 </template>
 
 <style scoped>
-.dz_mark {
-  height: 60px;
-  width: 60px;
+/* 覆盖 Dropzone 默认样式 */
+:deep(.dropzone) {
+  min-height: 120px;
+  border: 2px dashed #dee2e6;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  background: #f8f9fa;
 }
 
-.thumbnail-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 15px;
-  justify-content: center;
-  padding: 20px;
-  background-color: white;
-  border-radius: 15px;
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
-}
-
-/* 缩略图样式 */
-.thumbnail {
-  width: var(--thumbnail-size);
-  height: var(--thumbnail-size);
-  border-radius: var(--border-radius);
-  object-fit: cover;
-  border: 2px solid #e9ecef;
-  transition: all 0.3s ease;
-}
-
-.thumbnail:hover {
-  transform: scale(1.05);
-  border-color: #6c757d;
-}
-
-/* 缩略图包装器 */
-.thumbnail-wrapper {
+:deep(.dropzone .dz-preview) {
+  margin: 0.5rem;
   position: relative;
-  width: var(--thumbnail-size);
-  height: var(--thumbnail-size);
-  margin-bottom: 10px;
+  display: inline-block;
+  vertical-align: top;
+  background: transparent !important;
 }
 
-/* 移除按钮 */
-.remove-btn {
+:deep(.dropzone .dz-remove) {
   position: absolute;
-  top: -12px;
-  right: -12px;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background-color: #dc3545;
+  top: -6px;
+  left: -6px;
+  width: 18px;
+  height: 18px;
+  background: #ef4444;
   color: white;
-  border: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  z-index: 10;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-}
-
-.remove-btn:hover {
-  background-color: #bb2d3b;
-  transform: scale(1.1);
-}
-
-/* 文件名称 */
-.file-name {
-  font-size: 12px;
+  border-radius: 50%;
+  font-size: 10px;
+  line-height: 18px;
   text-align: center;
-  max-width: 100px;
+  cursor: pointer;
+  z-index: 10;
+}
+
+:deep(.dropzone .dz-remove:hover) {
+  background: #dc2626;
+}
+
+:deep(.dropzone .dz-image-preview) {
+  background: transparent !important;
+}
+
+:deep(.dropzone .dz-image) {
+  width: 80px !important;
+  z-index: 0 !important;
+  height: 80px !important;
+  border-radius: 0.5rem !important;
+}
+
+:deep(.dropzone .dz-image img) {
+  width: 100% !important;
+  height: 100% !important;
+  object-fit: cover;
+}
+
+:deep(.dropzone .dz-details) {
+  opacity: 1 !important;
+  position: static !important;
+  padding: 0.25rem !important;
+  font-size: 0.75rem;
+  text-align: center;
+}
+
+:deep(.dropzone .dz-filename) {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: #495057;
+  max-width: 80px;
 }
 
-/* 上传区域 */
-.upload-area {
-  border: 2px dashed #dee2e6;
-  border-radius: 15px;
-  padding: 30px;
-  text-align: center;
-  background-color: #f8f9fa;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  margin-bottom: 20px;
+:deep(.dropzone .dz-size) {
+  font-size: 0.65rem;
+  color: #9ca3af;
 }
 
-.upload-area:hover {
-  border-color: #6c757d;
-  background-color: #e9ecef;
+:deep(.dropzone .dz-success-mark),
+:deep(.dropzone .dz-error-mark) {
+  width: 24px !important;
+  height: 24px !important;
+  margin-left: -12px !important;
+  margin-top: -12px !important;
+  background: rgba(255, 255, 255, 0.9) !important;
+  border-radius: 50% !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
 }
 
-.upload-icon {
-  font-size: 48px;
-  color: #6c757d;
-  margin-bottom: 10px;
+:deep(.dropzone .dz-success-mark svg),
+:deep(.dropzone .dz-error-mark svg) {
+  width: 14px !important;
+  height: 14px !important;
+  fill: #22c55e !important;
 }
 
-.preview-title {
-  color: #343a40;
-  border-bottom: 2px solid #e9ecef;
-  padding-bottom: 10px;
-  margin-bottom: 20px;
+:deep(.dropzone .dz-error-mark svg) {
+  fill: #ef4444 !important;
 }
 
-.empty-state {
-  text-align: center;
-  padding: 40px 20px;
-  color: #6c757d;
+:deep(.dropzone .dz-progress) {
+  position: static !important;
+  width: 100% !important;
+  height: 4px !important;
+  border: none !important;
+  background: #e5e7eb !important;
+  border-radius: 2px !important;
+  margin-top: 0.25rem !important;
 }
 
-.empty-state i {
-  font-size: 48px;
-  margin-bottom: 15px;
-  color: #adb5bd;
-}
-
-.counter-badge {
-  position: absolute;
-  top: -5px;
-  right: -5px;
-  background-color: #0d6efd;
-  color: white;
-  border-radius: 50%;
-  width: 20px;
-  height: 20px;
-  font-size: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.thumbnail-actions {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 20px;
-}
-
-.file-input {
-  display: none;
+:deep(.dropzone .dz-progress .dz-upload) {
+  background: #3b82f6 !important;
+  border-radius: 2px !important;
+  width: 0 !important;
 }
 </style>
diff --git a/frontend/ops_vue_js/src/views/purchase/addorder.vue b/frontend/ops_vue_js/src/views/purchase/addorder.vue
index 7ea6705..7e0f548 100644
--- a/frontend/ops_vue_js/src/views/purchase/addorder.vue
+++ b/frontend/ops_vue_js/src/views/purchase/addorder.vue
@@ -1,49 +1,145 @@
 <script setup>
+/**
+ * 采购订单添加页面
+ *
+ * 功能概述：
+ * - 创建新的采购订单
+ * - 支持上传订单相关图片
+ * - 支持添加多种费用类型（单价、运费）
+ * - 支持选择订单状态、填写快递单号等
+ *
+ * 表单字段：
+ * - title: 订单标题（必填）
+ * - remark: 备注说明
+ * - photos: 订单图片列表
+ * - link: 采购链接
+ * - partname: 配件名称
+ * - styles: 款式标签
+ * - costs: 费用明细列表
+ * - tracking_number: 快递单号
+ * - updatetime: 更新时间
+ * - order_status: 订单状态
+ */
+
+// ==================== 依赖导入 ====================
 import { reactive, ref, computed, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useToastStore } from '@/stores/toast'
 import { usePageTitle } from '@/composables/usePageTitle'
 import { useValidation } from '@/composables'
 import { purchaseApi } from '@/api/purchase'
-import tagadder from '@/components/tagadder.vue'
-import datePicker from '@/components/datePicker.vue'
-import useDropzone from '@/components/useDropzone.vue'
 
+// 组件导入
+import tagadder from '@/components/tagadder.vue'      // 标签添加组件
+import datePicker from '@/components/datePicker.vue'  // 日期选择组件
+import useDropzone from '@/components/useDropzone.vue' // 文件上传组件（图片）
+
+// ==================== 页面初始化 ====================
+// 设置页面标题，使用 i18n key
 usePageTitle('purchase.add_part')
+
+// 获取国际化实例，用于多语言文本
 const { t, locale } = useI18n()
+
+// Toast 消息提示
 const toast = useToastStore()
+
+// 表单验证工具
 const { validate, errors, clearErrors } = useValidation()
 
+// ==================== 常量定义 ====================
+/**
+ * 备注文字最大长度限制
+ * 超过此长度将显示字符计数警告
+ */
 const textMaxLen = 256
+
+/**
+ * 文件上传组件的引用
+ * 用于获取已上传的图片列表
+ */
 const photosRef = ref(null)
 
-const currencyOptions = { 1: 'RMB', 2: 'MOA', 3: 'HKD', 4: 'USD' }
+/**
+ * 货币类型选项
+ * key: 数据库中存储的值
+ * value: 显示的货币符号
+ */
+const currencyOptions = { 1: 'CNY', 2: 'MOP', 3: 'HKD', 4: 'USD' }
 
+/**
+ * 货币类型对应的国旗图标路径
+ */
+const currencyFlags = { 1: '/static/flags/cn.svg', 2: '/static/flags/mo.svg', 3: '/static/flags/hk.svg', 4: '/static/flags/us.svg' }
+
+// ==================== 费用类型映射 ====================
+// 费用类型：单价 / 运费
 const costType = computed(() => ({
-  1: t('cost_type.unit_price'),
-  2: t('cost_type.freight'),
+  1: t('cost_type.unit_price'),  // 单价
+  2: t('cost_type.freight'),     // 运费
 }))
 
+// ==================== 订单状态映射 ====================
+// 订单的各种状态选项
 const orderStatus = computed(() => ({
-  1: t('order_status.pending_order'),
-  2: t('order_status.order_placed'),
-  3: t('order_status.in_transit'),
-  4: t('order_status.completed'),
-  5: t('order_status.refund_requested'),
-  6: t('order_status.returning'),
-  7: t('order_status.refunded'),
-  8: t('order_status.lost_package'),
+  1: t('order_status.pending_order'),      // 待下单
+  2: t('order_status.order_placed'),       // 已下单
+  3: t('order_status.in_transit'),         // 运输中
+  4: t('order_status.completed'),           // 已完成
+  5: t('order_status.refund_requested'),   // 退款中
+  6: t('order_status.returning'),           // 退货中
+  7: t('order_status.refunded'),            // 已退款
+  8: t('order_status.lost_package'),        // 丢件
 }))
 
+// ==================== 费用明细管理 ====================
+/**
+ * 已添加的费用明细列表
+ * 每项包含：类型、数量、单价、总价、货币类型
+ */
 const costEntries = reactive([])
+
+/**
+ * 新费用条目的临时数据
+ * 用户填写完表单后点击"添加"按钮加入 costEntries
+ */
 const newCost = reactive({
-  type: '1', int: 1, cost: 0, currencyType: '1',
+  type: '1',       // 费用类型：默认"单价"
+  int: 1,          // 数量：默认1
+  cost: 0,         // 单价：默认0
+  currencyType: '1', // 货币类型：默认人民币
 })
 
+// ==================== 表单数据 ====================
+/**
+ * 订单表单主数据对象
+ * 包含所有需要提交的字段
+ */
+const form = reactive({
+  title: '',          // 订单标题（必填）
+  remark: '',         // 备注说明
+  photos: [],         // 图片列表（上传后由 dropzone 填充）
+  link: '',           // 采购链接
+  partname: '',       // 配件名称
+  styles: '',         // 款式标签
+  costs: [],          // 费用明细（提交前由 costEntries 转换）
+  tracking_number: '', // 快递单号
+  updatetime: '',     // 更新时间
+  order_status: '1',  // 订单状态（默认待下单）
+})
+
+/**
+ * 计算新费用条目的总价
+ * 总价 = 数量 × 单价，保留2位小数
+ */
 const newCostTotal = computed(() =>
   parseFloat((newCost.int * newCost.cost).toFixed(2))
 )
 
+/**
+ * 添加一条费用明细到列表
+ * 条件：单价必须大于0
+ */
 function addCostEntry() {
   if (newCost.cost <= 0) return
   costEntries.push({
@@ -53,93 +149,124 @@ function addCostEntry() {
     costt: newCostTotal.value,
     currencytype: newCost.currencyType,
   })
+  // 添加后重置表单，以便继续添加下一条
   newCost.type = '1'
   newCost.int = 1
   newCost.cost = 0
   newCost.currencyType = '1'
 }
 
+/**
+ * 从费用明细列表中移除指定条目
+ * @param {number} index - 要删除的条目索引
+ */
 function removeCostEntry(index) {
   costEntries.splice(index, 1)
 }
 
+/**
+ * 监听单价输入，自动保留2位小数
+ * 防止用户输入如 10.999 这样的值
+ */
 watch(() => newCost.cost, (val) => {
   const fixed = parseFloat(val).toFixed(2)
   if (parseFloat(fixed) !== val) newCost.cost = parseFloat(fixed)
 })
 
-const form = reactive({
-  title: '',
-  remark: '',
-  photos: [],
-  link: '',
-  partname: '',
-  styles: '',
-  costs: [],
-  tracking_number: '',
-  updatetime: '',
-  order_status: '1',
-})
 
+
+/**
+ * 提交按钮 loading 状态
+ * 防止重复提交
+ */
 const loading = ref(false)
 
+// ==================== 表单提交 ====================
+/**
+ * 处理表单提交
+ * 1. 验证必填字段
+ * 2. 收集图片列表
+ * 3. 转换费用数据（金额从元转为分）
+ * 4. 调用 API 提交数据
+ */
 async function handleSubmit() {
+  // 清空之前的验证错误
   clearErrors()
+
+  // 验证标题是否填写
   const err = validate('title', form.title, t('purchase_addorder.title'))
   if (!err) return
 
+  // 从 dropzone 组件获取已上传的图片文件名
   form.photos = []
   if (photosRef.value?.has_some_files) {
     const result = photosRef.value.get_some_files()
     form.photos = result.map(f => f.name)
   }
 
+  // 将费用明细转换为提交格式
+  // 注意：金额需要从"元"转为"分"（乘以100）存储
   form.costs = costEntries.map(h => ({
     ...h,
     cost: Math.round(h.cost * 100),
     costt: Math.round(h.costt * 100),
   }))
 
+  // 开始 loading
   loading.value = true
   try {
+    // 调用采购 API 添加订单
     const { errCode } = await purchaseApi.addOrder(form)
     if (errCode === 0) {
+      // 保存成功，显示成功提示
       toast.success(t('message.save_ok'))
     } else {
+      // 服务器错误，显示错误提示
       toast.error(t('message.server_error'))
     }
   } catch {
-    // interceptor handled
+    // 错误已被 HTTP 拦截器处理，此处无需额外处理
   } finally {
+    // 无论成功失败，都要关闭 loading
     loading.value = false
   }
 }
 </script>
 
 <template>
+  <!-- 页面容器：居中，最大宽度 6xl，左右内边距，上下内边距 -->
   <div class="mx-auto max-w-6xl px-6 py-6">
+    <!-- 主卡片：白色背景，圆角，阴影，支持暗色模式 -->
     <div class="flex flex-col gap-6 rounded-xl border border-gray-200 bg-white shadow-lg dark:border-dk-muted dark:bg-dk-card">
-      <!-- Order Info -->
+
+      <!-- ==================== 订单信息区块 ==================== -->
       <div class="border-b border-gray-200 px-6 py-4 dark:border-dk-muted">
         <h4 class="text-sm font-semibold text-gray-900 dark:text-white">{{ t('purchase_addorder.order_info') }}</h4>
       </div>
+
+      <!-- 订单信息表单区域 -->
       <div class="space-y-4 px-6 py-5">
+        <!-- 标题字段（必填） -->
         <div>
           <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">
-            {{ t('purchase_addorder.title') }} <span class="text-red-500">*</span>
+            {{ t('purchase_addorder.part_name') }} <span class="text-red-500">*</span>
           </label>
           <input
             v-model="form.title"
             type="text"
             class="w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2 text-sm outline-none transition-colors focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 dark:border-dk-muted dark:bg-dk-base dark:text-white"
             :class="errors.title ? 'border-red-500' : 'border-gray-300'"
-            :placeholder="t('purchase_addorder.input_title')"
+            :placeholder="t('purchase_addorder.part_name')"
           />
+          <!-- 验证错误提示 -->
           <span v-if="errors.title" class="mt-1 block text-xs text-red-500">{{ errors.title }}</span>
         </div>
+
+        <!-- 备注字段 -->
         <div>
           <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">
             {{ t('purchase_addorder.remarks') }}
+            <!-- 字符计数 -->
             <span class="text-gray-400">{{ form.remark.length }}/{{ textMaxLen }}</span>
           </label>
           <textarea
@@ -149,17 +276,28 @@ async function handleSubmit() {
             :placeholder="t('purchase_addorder.remarks_text')"
           />
         </div>
+
+        <!-- 图片上传区域 -->
         <div>
           <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('purchase_addorder.photo_remarks') }}</label>
+          <!--
+            useDropzone 组件属性：
+            - acceptFiles="image/*": 只接受图片文件
+            - uploadURL: 上传接口地址
+            - maxFiles="10": 最多10张图片
+            - ref="photosRef": 组件引用，用于获取上传的文件列表
+          -->
           <useDropzone acceptFiles="image/*" uploadURL="/api/files/upload/image" maxFiles="10" ref="photosRef" />
         </div>
       </div>
 
-      <!-- Purchase Channel -->
+      <!-- ==================== 采购渠道区块 ==================== -->
       <div class="border-t border-gray-200 px-6 py-4 dark:border-dk-muted">
         <h4 class="text-sm font-semibold text-gray-900 dark:text-white">{{ t('purchase_addorder.purchase_channel') }}</h4>
       </div>
+
       <div class="space-y-4 px-6 py-5">
+        <!-- 采购链接 -->
         <div>
           <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('purchase_addorder.link') }}</label>
           <textarea
@@ -169,23 +307,19 @@ async function handleSubmit() {
             placeholder="url"
           />
         </div>
-        <div>
-          <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('purchase_addorder.part_name') }}</label>
-          <input
-            v-model="form.partname"
-            type="text"
-            class="w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2 text-sm outline-none transition-colors focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 dark:border-dk-muted dark:bg-dk-base dark:text-white"
-            :placeholder="t('purchase_addorder.part_name')"
-          />
-        </div>
+
+        <!-- 款式标签 -->
         <div>
           <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('purchase_addorder.style_remarks') }}</label>
+          <!-- tagadder: 支持添加多个标签的组件 -->
           <tagadder :placeholder="t('purchase_addorder.add_style')" v-model="form.styles" />
         </div>
 
-        <!-- costs table -->
+        <!-- ==================== 费用明细表格 ==================== -->
         <div>
           <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('purchase_addorder.cost') }}</label>
+
+          <!-- 已添加的费用列表表格（有时才显示） -->
           <div v-if="costEntries.length" class="mb-4 overflow-x-auto">
             <table class="w-full text-left text-sm text-gray-900">
               <thead>
@@ -204,8 +338,12 @@ async function handleSubmit() {
                   <td class="px-3 py-2 text-gray-500">{{ item.int }}</td>
                   <td class="px-3 py-2 text-gray-500">{{ item.cost }}</td>
                   <td class="px-3 py-2 text-gray-500">{{ item.costt }}</td>
-                  <td class="px-3 py-2 text-gray-500">{{ currencyOptions[item.currencytype] }}</td>
+                  <td class="px-3 py-2 text-gray-500">
+                    <img :src="currencyFlags[item.currencytype]" class="inline-block h-4 w-6 align-middle" :alt="currencyOptions[item.currencytype]" />
+                    {{ currencyOptions[item.currencytype] }}
+                  </td>
                   <td class="px-3 py-2">
+                    <!-- 删除按钮 -->
                     <button class="rounded px-2 py-1 text-xs font-medium text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20" @click="removeCostEntry(idx)">{{ t('purchase_addorder.remove') }}</button>
                   </td>
                 </tr>
@@ -213,7 +351,9 @@ async function handleSubmit() {
             </table>
           </div>
 
+          <!-- 添加费用表单：响应式网格布局 -->
           <div class="grid grid-cols-2 gap-4 sm:grid-cols-5">
+            <!-- 费用类型选择 -->
             <div>
               <label class="mb-1 block text-xs font-medium text-gray-500">{{ t('purchase_addorder.fee_type') }}</label>
               <select v-model="newCost.type" class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white">
@@ -222,14 +362,20 @@ async function handleSubmit() {
                 </template>
               </select>
             </div>
+
+            <!-- 数量输入 -->
             <div>
               <label class="mb-1 block text-xs font-medium text-gray-500">{{ t('purchase_addorder.input_quantity') }}</label>
               <input v-model.number="newCost.int" type="number" class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white" min="1" />
             </div>
+
+            <!-- 单价输入 -->
             <div>
               <label class="mb-1 block text-xs font-medium text-gray-500">{{ t('purchase_addorder.input_fee') }}</label>
               <input v-model="newCost.cost" type="number" class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white" step="0.01" min="0" />
             </div>
+
+            <!-- 货币类型选择 -->
             <div>
               <label class="mb-1 block text-xs font-medium text-gray-500">{{ t('purchase_addorder.select_currency') }}</label>
               <select v-model="newCost.currencyType" class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white">
@@ -238,6 +384,8 @@ async function handleSubmit() {
                 </template>
               </select>
             </div>
+
+            <!-- 添加按钮（与输入框底部对齐） -->
             <div class="flex items-end">
               <button class="w-full rounded-lg border border-gray-300 bg-blue-600 px-3 py-2 text-sm font-semibold text-blue-100 transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-blue-500/20 dark:border-dk-muted dark:text-white dark:bg-blue-600" @click="addCostEntry">{{ t('purchase_addorder.add') }}</button>
             </div>
@@ -245,18 +393,23 @@ async function handleSubmit() {
         </div>
       </div>
 
-      <!-- Order Status -->
+      <!-- ==================== 订单状态区块 ==================== -->
       <div class="border-t border-gray-200 px-6 py-4 dark:border-dk-muted">
         <h4 class="text-sm font-semibold text-gray-900 dark:text-white">{{ t('purchase_addorder.order_status') }}</h4>
       </div>
+
       <div class="px-6 py-5">
+        <!-- 三列响应式网格 -->
         <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          <!-- 更新时间（必填） -->
           <div>
             <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">
               {{ t('purchase_addorder.update_time') }} <span class="text-red-500">*</span>
             </label>
             <datePicker v-model="form.updatetime" />
           </div>
+
+          <!-- 快递单号 -->
           <div>
             <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('purchase_addorder.tracking_number') }}</label>
             <input
@@ -266,6 +419,8 @@ async function handleSubmit() {
               :placeholder="t('purchase_addorder.input_tracking_number')"
             />
           </div>
+
+          <!-- 订单状态下拉框 -->
           <div>
             <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('purchase_addorder.order_status') }}</label>
             <select v-model="form.order_status" class="w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2 text-sm dark:border-dk-muted dark:bg-dk-base dark:text-white">
@@ -277,13 +432,15 @@ async function handleSubmit() {
         </div>
       </div>
 
-      <!-- Footer -->
+      <!-- ==================== 底部操作栏 ==================== -->
       <div class="flex justify-end border-t border-gray-200 px-6 py-4 dark:border-dk-muted">
+        <!-- 提交按钮：提交时显示 loading 动画 -->
         <button
           class="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-blue-500/20 focus:outline-none disabled:active:scale-100"
           :disabled="loading"
           @click="handleSubmit"
         >
+          <!-- loading 状态显示旋转图标 -->
           <svg v-if="loading" class="h-4 w-4 animate-spin text-white" viewBox="0 0 24 24" fill="none">
             <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
             <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
@@ -291,6 +448,7 @@ async function handleSubmit() {
           {{ t('purchase_addorder.submit') }}
         </button>
       </div>
+
     </div>
   </div>
 </template>