From cfcc86e0cfef22517b42e886acfc9a22a3d055d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=96=87=E5=B3=B0?= <kevin@lmve.net>
Date: Mon, 13 Apr 2026 12:08:28 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=89=8D=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                                    | Bin 28 -> 26 bytes
 frontend/ops_vue_js/.gitignore                |   2 +
 .../ops_vue_js/src/components/AppHeader.vue   |   2 +-
 .../ops_vue_js/src/components/useDropzone.vue |  37 +++++++++++++++---
 .../src/views/purchase/addorder.vue           |   2 +-
 5 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/.gitignore b/.gitignore
index 58275e28107f6fefb7d2ac2322b168e2cf6d8dee..fc3a99f2610cfa508fd36e68bda1c580e068a385 100644
GIT binary patch
delta 9
Qcmb1<njpr)%fQ6|00yN1_y7O^

delta 11
Scmb1=nIOid&%n#T#Q*>ajR7eD

diff --git a/frontend/ops_vue_js/.gitignore b/frontend/ops_vue_js/.gitignore
index a3f7a51..32258b0 100644
--- a/frontend/ops_vue_js/.gitignore
+++ b/frontend/ops_vue_js/.gitignore
@@ -34,3 +34,5 @@ coverage
 
 # Vitest
 __screenshots__/
+
+.workbuddy
diff --git a/frontend/ops_vue_js/src/components/AppHeader.vue b/frontend/ops_vue_js/src/components/AppHeader.vue
index 746a951..65e7175 100644
--- a/frontend/ops_vue_js/src/components/AppHeader.vue
+++ b/frontend/ops_vue_js/src/components/AppHeader.vue
@@ -49,7 +49,7 @@ const normalClass = "rounded-md px-3 py-2 text-sm font-medium text-gray-600 tran
 const navItems = computed(() => [
   { label: t("appname.home"), to: "/" },
   { label: t("appname.schedule"), to: "/schedule" },
-  // { label: t("appname.purchase"), to: "/purchase" },
+  { label: t("appname.purchase"), to: "/purchase" },
   // { label: t("appname.warehouse"), to: "/warehouse" },
 ]);
 </script>
diff --git a/frontend/ops_vue_js/src/components/useDropzone.vue b/frontend/ops_vue_js/src/components/useDropzone.vue
index 601715f..0ba35b8 100644
--- a/frontend/ops_vue_js/src/components/useDropzone.vue
+++ b/frontend/ops_vue_js/src/components/useDropzone.vue
@@ -3,7 +3,7 @@ import { ref, onMounted, onUnmounted, defineProps, reactive } from "vue";
 import { useI18n } from "vue-i18n";
 const { t, locale } = useI18n();
 import Dropzone from "dropzone";
-import "dropzone/dist/dropzone.css";
+//import "dropzone/dist/dropzone.css";
 import { useUserStore } from "@/stores/user";
 import "fslightbox";
 const userStore = useUserStore();
@@ -32,7 +32,7 @@ const initDropzone = () => {
     maxFilesize: prop.maxFilesize,
     maxFiles: prop.maxFiles,
     acceptedFiles: prop.acceptedFiles,
-    dictDefaultMessage: t("dropzone.upload_drop_or_click"),
+    dictDefaultMessage: "",
     dictFallbackMessage: t("dropzone.upload_browser_not_supported"),
     dictFileTooBig: t("dropzone.upload_file_too_big") + "({{filesize}}MB). " + t("dropzone.upload_max_file_size") + "{{maxFilesize}}MB.",
     dictInvalidFileType: t("dropzone.upload_invalid_file_type"),
@@ -65,17 +65,19 @@ defineExpose({ getFiles: () => files, getDropzone: () => dropzoneInstance });
 <template>
   <div class="w-full">
     <div id="custom-template" class="dz-preview dz-file-preview hidden">
-      <div class="relative inline-block rounded-lg border border-gray-200 bg-white p-2 dark:border-dk-muted dark:bg-dk-card">
+      <div class="relative rounded-lg bg-white p-1 shadow-sm hover:shadow-md transition-shadow dark:bg-dk-card">
         <img data-dz-thumbnail class="h-20 w-20 rounded object-cover" />
-        <button data-dz-remove class="absolute -right-2 -top-2 flex h-6 w-6 items-center justify-center rounded-full bg-red-500 text-xs font-bold text-white shadow hover:bg-red-600">×</button>
+        <button data-dz-remove class="absolute -right-1.5 -top-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-black/60 text-xs font-bold text-white shadow hover:bg-red-500 transition-colors">×</button>
       </div>
       <div class="mt-1 max-w-[5rem] truncate text-xs text-gray-600 dark:text-dk-subtle" data-dz-name></div>
       <div class="dz-progress mt-1 h-1 w-full rounded-full bg-gray-200 dark:bg-dk-muted"><span class="dz-upload block h-full rounded-full bg-blue-500" data-dz-uploadprogress></span></div>
       <div class="dz-error-message mt-1 text-xs text-red-500"><span data-dz-errormessage></span></div>
     </div>
     <div ref="dropzoneElement" class="dropzone cursor-pointer rounded-xl border-2 border-dashed border-gray-300 bg-gray-50 p-8 text-center transition-colors hover:border-blue-400 hover:bg-blue-50 dark:border-dk-muted dark:bg-dk-base dark:hover:border-blue-500 dark:hover:bg-dk-card">
-      <div class="mb-2 text-4xl">📁</div>
-      <div class="text-sm font-medium text-gray-600 dark:text-dk-subtle">{{ t('dropzone.upload_drop_or_click') }}</div>
+      <div class="flex items-center justify-center gap-2">
+        <span class="text-4xl">📁</span>
+        <span class="text-sm font-medium text-gray-600 dark:text-dk-subtle">{{ t('dropzone.upload_drop_or_click') }}</span>
+      </div>
     </div>
   </div>
 </template>
@@ -84,3 +86,26 @@ defineExpose({ getFiles: () => files, getDropzone: () => dropzoneInstance });
 .dropzone { min-height: 150px; }
 .dz-progress .dz-upload { transition: width 0.3s ease; }
 </style>
+
+<style>
+/* Dropzone dynamically inserts .dz-preview siblings inside .dropzone;
+   set .dropzone as a flex container so previews flow in rows */
+.dropzone {
+  display: flex !important;
+  flex-wrap: wrap !important;
+  align-items: flex-start !important;
+  gap: 12px !important;
+}
+/* .dz-message (upload prompt) spans full width, stays at top */
+.dropzone .dz-message {
+  width: 100% !important;
+  flex-shrink: 0 !important;
+}
+/* each .dz-preview occupies 1/8 of a row (12.5%); custom-template sets display */
+.dropzone .dz-preview {
+  flex: 0 0 12.5% !important;
+  max-width: 12.5% !important;
+  box-sizing: border-box;
+  margin: 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 de97d51..7ea6705 100644
--- a/frontend/ops_vue_js/src/views/purchase/addorder.vue
+++ b/frontend/ops_vue_js/src/views/purchase/addorder.vue
@@ -204,7 +204,7 @@ 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.currency_type] }}</td>
+                  <td class="px-3 py-2 text-gray-500">{{ 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>