From 6396b79ac5d70f32d0b415e04611895cf6308905 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=96=87=E5=B3=B0?= <kevin@lmve.net>
Date: Fri, 16 Jan 2026 20:49:11 +0800
Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E5=B7=AE=E4=B8=8D=E5=A4=9A?=
 =?UTF-8?q?=EF=BC=8C=E9=9C=80=E8=A6=81=E5=90=8E=E7=AB=AF=E6=8E=A5=E6=94=B6?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/routers/api_Files.go                  |  16 +-
 .../ops_vue_js/src/components/useDropzone.vue | 422 ++++++++++++++----
 frontent/ops_vue_js/src/i18n/en.json          |  54 ++-
 frontent/ops_vue_js/src/i18n/zh-CN.json       |  46 ++
 .../src/views/purchase/addorder.vue           | 104 +++--
 .../ops_vue_js/src/views/settings/account.vue |   1 +
 frontent/ops_vue_js/src/views/test.vue        |   5 +-
 7 files changed, 519 insertions(+), 129 deletions(-)

diff --git a/backend/routers/api_Files.go b/backend/routers/api_Files.go
index 8e98dfd..9292bc9 100644
--- a/backend/routers/api_Files.go
+++ b/backend/routers/api_Files.go
@@ -6,9 +6,23 @@ import (
 	"github.com/gin-gonic/gin"
 )
 
+func file_save() {
+
+}
+
 func ApiFiles(r *gin.RouterGroup) {
 	r.POST("/upload", func(ctx *gin.Context) {
-		fmt.Print(ctx.FormFile("file"))
+
+		cookie := ctx.PostForm("cookie")
+		file, _ := ctx.FormFile("file")
+		//通过cookie获取用户信息
+		_, err := AuthenticationAuthorityFromCookie(cookie)
+		if err == nil {
+
+		}
+
+		fmt.Println(file.Filename)
+		fmt.Println(cookie)
 		ReturnJson(ctx, "apiOK", nil)
 	})
 	r.GET("/upload", func(ctx *gin.Context) {
diff --git a/frontent/ops_vue_js/src/components/useDropzone.vue b/frontent/ops_vue_js/src/components/useDropzone.vue
index 1ff83c9..9b7dc6c 100644
--- a/frontent/ops_vue_js/src/components/useDropzone.vue
+++ b/frontent/ops_vue_js/src/components/useDropzone.vue
@@ -1,133 +1,379 @@
-
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
-import Dropzone from 'dropzone'
-import 'dropzone/dist/dropzone.css'
+import { ref, onMounted, onUnmounted,defineProps } from "vue";
+import { useI18n } from "vue-i18n";
+const { t, locale } = useI18n();
+import Dropzone from "dropzone";
+import "dropzone/dist/dropzone.css";
 
-const dropzoneElement = ref(null)
-let dropzoneInstance = null
-const files = ref([])
+import { useUserStore } from "@/stores/user";
+const userStore = useUserStore();
+
+const dropzoneElement = ref(null);
+let dropzoneInstance = null;
+const files = ref([]);
+
+const prop= defineProps({
+  maxFiles: {
+    type: Number,
+    default: 5,
+  },
+  acceptedFiles:{
+    type: String,
+    default: "image/*",
+  },
+  maxFilesize:{
+    type: Number,
+    default: 10,
+  }
+});
 
 // 初始化 Dropzone
 const initDropzone = () => {
-  if (!dropzoneElement.value) return
+  if (!dropzoneElement.value) return;
 
   // 禁用自动发现
-  Dropzone.autoDiscover = false
+  Dropzone.autoDiscover = false;
 
   // 移除任何现有的 Dropzone 实例
   if (dropzoneInstance) {
-    dropzoneInstance.destroy()
+    dropzoneInstance.destroy();
   }
 
   // 初始化新的实例
   dropzoneInstance = new Dropzone(dropzoneElement.value, {
-    url: '/api/files/upload', // 上传地址
-    method: 'post',
-     // 确保不启用分片上传
-    // chunking: false, // 明确禁用分片
-    // forceChunking: false, // 强制不分片
-    // chunkSize: false, // 不分片大小
-    // retryChunks: false, // 不重试分片
-    // parallelChunkUploads: false, // 不并行上传分片
+    url: "/api/files/upload", // 上传地址
+    // headers: {
+    //   user_cookie: "cccc",
+    // },
+    method: "post",
+
+    //uploadMultiple: true,
+
+    previewTemplate: document.getElementById("custom-template").innerHTML,
+
+    parallelUploads: 3, // 同时上传的文件数
+    maxFilesize: prop.maxFilesize, // MB
+    maxFiles: prop.maxFiles, // 最大文件数
+    acceptedFiles:prop.acceptedFiles, // 接受的文件类型
+    //addRemoveLinks: true, // 显示移除链接
+    dictDefaultMessage: t("dropzone.upload_drop_or_click"),
+    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"),
+    dictResponseError: t("dropzone.upload_server_error") + "{{statusCode}}",
+    //dictCancelUpload: t('dropzone.upload_cancel'),
+    //dictUploadCanceled: t('dropzone.upload_canceled'),
+    //dictCancelUploadConfirmation: t('dropzone.upload_cancel_confirmation'),
+    dictRemoveFile: t("dropzone.upload_remove_file"),
+    dictMaxFilesExceeded:
+      t("dropzone.upload_max_files") +
+      "{{maxFiles}}" +
+      t("dropzone.upload_max_files_unit"),
 
-    parallelUploads: 1, // 同时上传的文件数
-    maxFilesize: 10, // MB
-    maxFiles: 5, // 最大文件数
-    acceptedFiles: 'image/*,.pdf,.doc,.docx', // 接受的文件类型
-    addRemoveLinks: true, // 显示移除链接
-    dictDefaultMessage: '拖放文件到这里或点击上传',
-    dictFallbackMessage: '您的浏览器不支持拖放文件上传',
-    dictFileTooBig: '文件太大 ({{filesize}}MB). 最大文件大小: {{maxFilesize}}MB.',
-    dictInvalidFileType: '不支持此文件类型',
-    dictResponseError: '服务器响应错误 {{statusCode}}',
-    dictCancelUpload: '取消上传',
-    dictUploadCanceled: '上传已取消',
-    dictCancelUploadConfirmation: '确定要取消上传吗?',
-    dictRemoveFile: '移除文件',
-    dictMaxFilesExceeded: '您最多只能上传 {{maxFiles}} 个文件',
-    
     // 事件处理
-    init: function() {
-      this.on('success', (file, response) => {
-        console.log('上传成功:', file.name, response)
-      }),
-      this.on('error', (file, errorMessage) => {
-        console.error('上传失败:', file.name, errorMessage)
-      }),
-      this.on('removedfile', (file) => {
-        console.log('remove:')
-        files.value = files.value.filter(f => f.name !== file.name)
-      })
-    }
-  })
-}
+    init: function () {
+      this.on("success", (file, response) => {
+        console.log("上传成功:", file, response);
+        file.previewElement.addEventListener("click", function (e) {
+          e.preventDefault();
+          e.stopPropagation();
+
+          // 处理点击事件
+          console.log("缩略图被点击", file);
+
+          // 可以在这里实现：
+          // 1. 预览大图
+          // 2. 显示文件详情
+          // 3. 触发自定义操作
+        });
+      });
+      this.on("error", (file, errorMessage) => {
+        console.error("上传失败:", file.name, errorMessage);
+      });
+      this.on("removedfile", (file) => {
+        console.log("remove:", file);
+        //files.value = files.value.filter(f => f.name !== file.name)
+      });
+      this.on("addedfile", (file) => {
+        console.log("addfile", file);
+      });
+      this.on("sending", function (file, xhr, formData) {
+        // 获取表单值并添加到 FormData
+        //console.log(userStore.userCookie.Value)
+        formData.append("cookie", userStore.userCookie.Value);
+
+      });
+    },
+  });
+};
 
 // 自定义方法
-const formatBytes = (bytes, decimals = 2) => {
-  if (bytes === 0) return '0 Bytes'
-  const k = 1024
-  const dm = decimals < 0 ? 0 : decimals
-  const sizes = ['Bytes', 'KB', 'MB', 'GB']
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
-}
+// const formatBytes = (bytes, decimals = 2) => {
+//   if (bytes === 0) return '0 Bytes'
+//   const k = 1024
+//   const dm = decimals < 0 ? 0 : decimals
+//   const sizes = ['Bytes', 'KB', 'MB', 'GB']
+//   const i = Math.floor(Math.log(bytes) / Math.log(k))
+//   return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
+// }
 
-// 手动添加文件的方法
-const addFiles = (fileList) => {
-  if (dropzoneInstance) {
-    Array.from(fileList).forEach(file => {
-      dropzoneInstance.addFile(file)
-    })
-  }
-}
+// // 手动添加文件的方法
+// const addFiles = (fileList) => {
+//   if (dropzoneInstance) {
+//     Array.from(fileList).forEach(file => {
+//       dropzoneInstance.addFile(file)
+//     })
+//   }
+// }
 
-// 获取所有已添加的文件
-const getAllFiles = () => {
-  return dropzoneInstance ? dropzoneInstance.files : []
-}
+// // 获取所有已添加的文件
+// const getAllFiles = () => {
+//   return dropzoneInstance ? dropzoneInstance.files : []
+// }
 
-// 清除所有文件
-const removeAllFiles = () => {
-  if (dropzoneInstance) {
-    dropzoneInstance.removeAllFiles(true)
-  }
-}
+// // 清除所有文件
+// const removeAllFiles = () => {
+//   if (dropzoneInstance) {
+//     dropzoneInstance.removeAllFiles(true)
+//   }
+// }
 
 // 组件挂载时初始化
 onMounted(() => {
-  initDropzone()
-})
+  initDropzone();
+});
 
 // 组件卸载时销毁
 onUnmounted(() => {
   if (dropzoneInstance) {
-    dropzoneInstance.destroy()
+    dropzoneInstance.destroy();
   }
-})
+});
 </script>
 
 <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-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-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>
+        </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>
+        </div>
+        <!-- 错误标记 -->
+        <div class="dz-error-message"><span data-dz-errormessage></span></div>
+        <!-- 错误信息 -->
+
+        <!-- 移除按钮 -->
+      </div>
+    </div>
     <div ref="dropzoneElement" class="dropzone"></div>
-    <div v-if="files.length > 0" class="mt-4">
+    <!-- <div v-if="files.length > 0" class="mt-4">
       <h3>已选择的文件：</h3>
       <ul>
         <li v-for="file in files" :key="file.name">
           {{ file.name }} ({{ formatBytes(file.size) }})
         </li>
       </ul>
-    </div>
+    </div> -->
   </div>
 </template>
 
-
 <style scoped>
-.dropzone {
-  border: 2px dashed #cccccc;
-  border-radius: 5px;
-  background: white;
-  padding: 20px;
-  min-height: 150px;
+.dz_mark {
+  height: 60px;
+  width: 60px;
 }
-</style>
\ No newline at end of file
+
+.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 {
+  position: relative;
+  width: var(--thumbnail-size);
+  height: var(--thumbnail-size);
+  margin-bottom: 10px;
+}
+
+/* 移除按钮 */
+.remove-btn {
+  position: absolute;
+  top: -12px;
+  right: -12px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: #dc3545;
+  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;
+  text-align: center;
+  max-width: 100px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #495057;
+}
+
+/* 上传区域 */
+.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;
+}
+
+.upload-area:hover {
+  border-color: #6c757d;
+  background-color: #e9ecef;
+}
+
+.upload-icon {
+  font-size: 48px;
+  color: #6c757d;
+  margin-bottom: 10px;
+}
+
+.preview-title {
+  color: #343a40;
+  border-bottom: 2px solid #e9ecef;
+  padding-bottom: 10px;
+  margin-bottom: 20px;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 40px 20px;
+  color: #6c757d;
+}
+
+.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;
+}
+</style>
diff --git a/frontent/ops_vue_js/src/i18n/en.json b/frontent/ops_vue_js/src/i18n/en.json
index e155d4a..2ffddc3 100644
--- a/frontent/ops_vue_js/src/i18n/en.json
+++ b/frontent/ops_vue_js/src/i18n/en.json
@@ -20,6 +20,20 @@
     "loding": "Loading...",
     "add": "Add new option: "
   },
+  "dropzone": {
+    "upload_drop_or_click": "Drag and drop files here or click to upload",
+    "upload_browser_not_supported": "Your browser does not support drag-and-drop file upload",
+    "upload_file_too_big": "File is too large",
+    "upload_max_file_size": "Maximum file size: ",
+    "upload_invalid_file_type": "File type not supported",
+    "upload_server_error": "Server responded with an error",
+    "upload_cancel": "Cancel upload",
+    "upload_canceled": "Upload canceled",
+    "upload_cancel_confirmation": "Are you sure you want to cancel the upload?",
+    "upload_remove_file": "Remove file",
+    "upload_max_files": "You can upload up to ",
+    "upload_max_files_unit": " files"
+  },
   "cropper": {
     "select_image": "Select Image",
     "select_File": "Select File",
@@ -46,6 +60,38 @@
     "add_part": "Add Order",
     "exp_report": "Export Report"
   },
+  "purchase_addorder": {
+    "add_order": "Add Order",
+    "order_info": "Order Information",
+    "title": "Title",
+    "input_title": "Enter order title",
+    "remarks": "Remarks",
+    "remarks_text": "Enter text notes",
+    "purchase_channel": "Purchase Channel",
+    "link": "Link",
+    "style_remarks": "Style Remarks",
+    "add_style": "Add Style",
+    "cost": "Cost",
+    "type": "Type",
+    "quantity": "Quantity",
+    "fee": "Fee",
+    "total_price": "Total Price",
+    "currency": "Currency",
+    "operation": "Operation",
+    "remove": "Remove",
+    "fee_type": "Fee type",
+    "input_quantity": "Quantity",
+    "input_fee": "Fee",
+    "select_currency": "Select currency",
+    "add": "Add",
+    "other_status": "Other Status",
+    "update_time": "Update Time",
+    "tracking_number": "Tracking Number",
+    "input_tracking_number": "Enter tracking number",
+    "order_status": "Order Status",
+    "modify_order_status": "Modify Order Status",
+    "submit": "Submit"
+  },
   "schedule": {
     "my_schedule": "My Schedule",
     "add_event": "Add Event",
@@ -155,11 +201,11 @@
     "source_code": "Source Code",
     "copy": "Copyright © 2025 Operations. All rights reserved."
   },
-    "cost_type":{
-    "unit_price":"Unit Price",
-    "freight":"Freight"
+  "cost_type": {
+    "unit_price": "Unit Price",
+    "freight": "Freight"
   },
-    "order_status": {
+  "order_status": {
     "pending_order": "Pending Order",
     "order_placed": "Order Placed",
     "in_transit": "In Transit",
diff --git a/frontent/ops_vue_js/src/i18n/zh-CN.json b/frontent/ops_vue_js/src/i18n/zh-CN.json
index 1e6ffbc..e4c499f 100644
--- a/frontent/ops_vue_js/src/i18n/zh-CN.json
+++ b/frontent/ops_vue_js/src/i18n/zh-CN.json
@@ -20,6 +20,20 @@
     "loding": "正在加载...",
     "add": "添加新选项: "
   },
+  "dropzone": {
+    "upload_drop_or_click": "拖放文件到这里或点击上传",
+    "upload_browser_not_supported": "您的浏览器不支持拖放文件上传",
+    "upload_file_too_big": "文件太大",
+    "upload_max_file_size": "最大文件大小: ",
+    "upload_invalid_file_type": "不支持此文件类型",
+    "upload_server_error": "服务器响应错误",
+    "upload_cancel": "取消上传",
+    "upload_canceled": "上传已取消",
+    "upload_cancel_confirmation": "确定要取消上传吗?",
+    "upload_remove_file": "移除文件",
+    "upload_max_files": "您最多只能上传",
+    "upload_max_files_unit": "个文件"
+  },
   "cropper": {
     "select_image": "选择图片",
     "select_File": "选择文件",
@@ -46,6 +60,38 @@
     "add_part": "添加订单",
     "exp_report": "生成报告"
   },
+  "purchase_addorder": {
+    "add_order": "添加订单",
+    "order_info": "订单信息",
+    "title": "标题",
+    "input_title": "输入订单标题",
+    "remarks": "备注",
+    "remarks_text": "输入文字备注",
+    "purchase_channel": "采购途径",
+    "link": "链接",
+    "style_remarks": "样式备注",
+    "add_style": "添加样式",
+    "cost": "成本",
+    "type": "类型",
+    "quantity": "数量",
+    "fee": "费用",
+    "total_price": "总价",
+    "currency": "货币",
+    "operation": "操作",
+    "remove": "移除",
+    "fee_type": "费用类型",
+    "input_quantity": "数量",
+    "input_fee": "费用",
+    "select_currency": "选择货币类型",
+    "add": "添加",
+    "other_status": "其他状态",
+    "update_time": "更新时间",
+    "tracking_number": "快递单号",
+    "input_tracking_number": "输入快递单号",
+    "order_status": "订单状态",
+    "modify_order_status": "修改订单状态",
+    "submit": "提交"
+  },
   "schedule": {
     "my_schedule": "我的日程",
     "add_event": "添加事件",
diff --git a/frontent/ops_vue_js/src/views/purchase/addorder.vue b/frontent/ops_vue_js/src/views/purchase/addorder.vue
index 668840f..cc402c4 100644
--- a/frontent/ops_vue_js/src/views/purchase/addorder.vue
+++ b/frontent/ops_vue_js/src/views/purchase/addorder.vue
@@ -5,6 +5,14 @@ import { useI18n } from "vue-i18n";
 import tagadder from "@/components/tagadder.vue";
 import dateTimePicker from "@/components/dateTimePicker.vue";
 
+import useDropzone from "@/components/useDropzone.vue";
+
+import { useUserStore } from "@/stores/user";
+const userStore = useUserStore();
+
+import { useRouter } from "vue-router";
+const router = useRouter();
+
 import TomSelect from "tom-select";
 import "tom-select/dist/css/tom-select.css";
 
@@ -81,6 +89,10 @@ function add_cost() {
 onMounted(() => {
   functionupdataTitle();
   //sele_init();
+  if (!userStore.isLoggedIn) {
+    router.push("/login");
+  }
+
 });
 // 监听语言变化，更新标题
 watch(locale, () => {
@@ -95,7 +107,7 @@ watch(locale, () => {
     <div class="container-xl">
       <div class="row g-2 align-items-center">
         <div class="col">
-          <h2 class="page-title">添加订单</h2>
+          <h2 class="page-title">{{ t("purchase_addorder.add_order") }}</h2>
         </div>
       </div>
     </div>
@@ -106,37 +118,47 @@ watch(locale, () => {
         <div class="col-12">
           <div class="card">
             <div class="card-header">
-              <h4 class="card-title">订单信息</h4>
+              <h4 class="card-title">
+                {{ t("purchase_addorder.order_info") }}
+              </h4>
             </div>
             <div class="card-body">
               <div class="mb-3">
-                <label class="form-label required">标题</label>
+                <label class="form-label required">{{
+                  t("purchase_addorder.title")
+                }}</label>
                 <input
                   type="text"
                   class="form-control"
                   name="example-text-input"
-                  placeholder="输入订单标题"
+                  :placeholder="t('purchase_addorder.title')"
                 />
               </div>
               <div class="mb-3">
                 <label class="form-label"
-                  >备注 <span class="form-label-description">0/100</span></label
+                  >{{ t("purchase_addorder.remarks") }}
+                  <span class="form-label-description">0/100</span></label
                 >
+                <useDropzone></useDropzone>
                 <textarea
-                  class="form-control"
+                  class="form-control mt-2"
                   name="example-textarea-input"
                   rows="6"
-                  placeholder="Content.."
+                  :placeholder="t('purchase_addorder.remarks_text')"
                 ></textarea>
               </div>
             </div>
 
             <div class="card-header">
-              <h4 class="card-title">采购途径</h4>
+              <h4 class="card-title">
+                {{ t("purchase_addorder.purchase_channel") }}
+              </h4>
             </div>
             <div class="card-body">
               <div class="mb-3">
-                <label class="form-label">URL</label>
+                <label class="form-label">{{
+                  t("purchase_addorder.link")
+                }}</label>
                 <input
                   name="url"
                   type="url"
@@ -145,13 +167,19 @@ watch(locale, () => {
                   value=""
                 />
                 <div class="mt-3">
-                  <label class="form-label">样式备注</label>
+                  <label class="form-label">{{
+                    t("purchase_addorder.style_remarks")
+                  }}</label>
 
-                  <tagadder placeholder="添加样式"></tagadder>
+                  <tagadder
+                    :placeholder="t('purchase_addorder.add_style')"
+                  ></tagadder>
                 </div>
 
                 <div class="mt-3">
-                  <label class="form-label">成本</label>
+                  <label class="form-label">{{
+                    t("purchase_addorder.cost")
+                  }}</label>
 
                   <table
                     v-show="cost_sheet_tab.length"
@@ -159,12 +187,14 @@ watch(locale, () => {
                   >
                     <thead>
                       <tr>
-                        <th>类型</th>
-                        <th>数量</th>
-                        <th>费用</th>
-                        <th>总价</th>
-                        <th>货币</th>
-                        <th class="w-1">操作</th>
+                        <th>{{ t("purchase_addorder.type") }}</th>
+                        <th>{{ t("purchase_addorder.quantity") }}</th>
+                        <th>{{ t("purchase_addorder.fee") }}</th>
+                        <th>{{ t("purchase_addorder.total_price") }}</th>
+                        <th>{{ t("purchase_addorder.currency") }}</th>
+                        <th class="w-1">
+                          {{ t("purchase_addorder.operation") }}
+                        </th>
                       </tr>
                     </thead>
                     <tbody>
@@ -183,7 +213,7 @@ watch(locale, () => {
                             class="btn btn-outline-danger"
                             @click="del_cost(key)"
                           >
-                            Del
+                            {{ t("purchase_addorder.remove") }}
                           </button>
                         </td>
                       </tr>
@@ -201,11 +231,10 @@ watch(locale, () => {
 
                   <div class="row g-5">
                     <div class="col-xl-2">
-                      类型
+                      {{ t("purchase_addorder.fee_type") }}
                       <select
                         ref="select_type"
                         class="form-control"
-                        placeholder="选择费用类型"
                         autocomplete="off"
                         value="1"
                         v-model="cost_sheet.type"
@@ -216,7 +245,7 @@ watch(locale, () => {
                       </select>
                     </div>
                     <div class="col-xl-3">
-                      数量
+                      {{ t("purchase_addorder.input_quantity") }}
                       <input
                         type="number"
                         class="form-control"
@@ -226,7 +255,7 @@ watch(locale, () => {
                       />
                     </div>
                     <div class="col-xl-3">
-                      费用
+                      {{ t("purchase_addorder.input_fee") }}
                       <input
                         type="number"
                         class="form-control"
@@ -237,11 +266,10 @@ watch(locale, () => {
                       />
                     </div>
                     <div class="col-xl-2">
-                      货币
+                      {{ t("purchase_addorder.select_currency") }}
                       <select
                         ref="select_beast"
                         class="form-control"
-                        placeholder="选择货币类型"
                         autocomplete="off"
                         value="1"
                         v-model="cost_sheet.currency_type"
@@ -255,12 +283,12 @@ watch(locale, () => {
                       </select>
                     </div>
                     <div class="col-xl-2">
-                      操作
+                      {{ t("purchase_addorder.operation") }}
                       <button
                         class="form-control btn btn-outline-primary"
                         @click="add_cost"
                       >
-                        添加
+                        {{ t("purchase_addorder.add") }}
                       </button>
                     </div>
                   </div>
@@ -269,30 +297,37 @@ watch(locale, () => {
             </div>
 
             <div class="card-header">
-              <h4 class="card-title">其他状态</h4>
+              <h4 class="card-title">
+                {{ t("purchase_addorder.other_status") }}
+              </h4>
             </div>
             <div class="card-body">
               <div class="mb-3">
                 <div class="row g-5">
                   <div class="col-xl-4">
-                    <label class="form-label required">更新时间</label>
+                    <label class="form-label required">{{
+                      t("purchase_addorder.update_time")
+                    }}</label>
                     <dateTimePicker></dateTimePicker>
                   </div>
                   <div class="col-xl-4">
-                    <label class="form-label">快递单号</label>
+                    <label class="form-label">{{
+                      t("purchase_addorder.tracking_number")
+                    }}</label>
                     <input
                       type="text"
                       class="form-control"
-                      placeholder="输入快递单号"
+                      :placeholder="
+                        t('purchase_addorder.input_tracking_number')
+                      "
                       value=""
                     />
                   </div>
                   <div class="col-xl-4">
-                    订单状态
+                    {{ t("purchase_addorder.order_status") }}
                     <select
                       ref="select_beast"
                       class="form-control"
-                      placeholder="选择订单状态"
                       autocomplete="off"
                       value="1"
                     >
@@ -306,9 +341,8 @@ watch(locale, () => {
             </div>
             <div class="card-footer text-end">
               <div class="d-flex">
-                <button class="btn btn-link">Cancel</button>
                 <button type="submit" class="btn btn-primary ms-auto">
-                  Send data
+                  {{ t("purchase_addorder.submit") }}
                 </button>
               </div>
             </div>
diff --git a/frontent/ops_vue_js/src/views/settings/account.vue b/frontent/ops_vue_js/src/views/settings/account.vue
index c71f4f1..0632b6d 100644
--- a/frontent/ops_vue_js/src/views/settings/account.vue
+++ b/frontent/ops_vue_js/src/views/settings/account.vue
@@ -8,6 +8,7 @@ import { useUserStore } from "@/stores/user";
 import { my_network_func } from "@/my_network_func";
 import MyOffcanvas from "@/components/MyOffcanvas.vue";
 
+
 import { useRouter } from "vue-router";
 const mos = ref();
 
diff --git a/frontent/ops_vue_js/src/views/test.vue b/frontent/ops_vue_js/src/views/test.vue
index 6c6d534..1df69b9 100644
--- a/frontent/ops_vue_js/src/views/test.vue
+++ b/frontent/ops_vue_js/src/views/test.vue
@@ -1,8 +1,11 @@
 <script setup>
     import useDropzone from '@/components/useDropzone.vue';
+
 </script>
 
 <template>
-
 <useDropzone></useDropzone>
+<!-- <useDropzoneBootstrap></useDropzoneBootstrap>
+
+<useFilePond></useFilePond> -->
 </template>
\ No newline at end of file