diff --git a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPreviewDialog.vue b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPreviewDialog.vue
index 1b948b0..0b957ea 100644
--- a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPreviewDialog.vue
+++ b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPreviewDialog.vue
@@ -1,7 +1,7 @@
 <template>
   <Dialog
     v-model="that.previewVisible"
-    title="预览"
+    :title="t('designInfo.titlePreview')"
     width="80vw"
     top="2%"
     :fullscreen="true"
@@ -25,9 +25,7 @@
 </template>
 
 <script lang="ts" setup name="DesignPreviewDialog">
-import {ElAlert} from "element-plus";
 import {reactive, computed, watch} from 'vue'
-import {calculateVectorDifference} from "@/components/DraftDesign/utils/FuncUtil";
 import {useMessage} from "@/hooks/web/useMessage";
 import {useI18n} from 'vue-i18n'
 
diff --git a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPropEdit.vue b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPropEdit.vue
index 135ddb5..0d4c33d 100644
--- a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPropEdit.vue
+++ b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPropEdit.vue
@@ -4,17 +4,19 @@
 
     <div style="max-height: 90vh; overflow:auto;" v-loading="loading">
      <span>
-         仅供参考(for reference only)
+       {{ t('designInfo.tipsInfo')}}
        </span>
       <div style="padding-bottom: 4px">
-        <el-checkbox style="margin: 8px" v-model="that.reView">实时预览</el-checkbox>
+        <el-checkbox style="margin: 8px" v-model="that.reView">
+          {{ t('designInfo.titleSyncUpdateDesign')}}
+        </el-checkbox>
         <el-button
           v-show="!that.reView"
           style="margin: 8px"
           type="primary"
           size="small"
           @click="updateDesign">
-          <span>更新</span>
+          <span>{{ t('designInfo.titleUpdateDesign') }}</span>
           <span
             style="color: #ff0000;font-size: 20px; padding-left: 4px">{{
               that.changeCount > 0 ? '*' : ''
@@ -24,12 +26,12 @@
       </div>
       <div>
         <el-alert
-          title="按住鼠标左键进行拖动，按住Ctrl 滚动鼠标进行缩小放放大"
+          :title="t('designInfo.tipsUseInfo')"
           type="info" effect="dark"/>
       </div>
       <div v-if="that.sizeInfo" :title="`${that.sizeInfo.width}mm`">
       <span>
-        宽:{{ that.sizeInfo.width }}mm  高{{ that.sizeInfo.height }}
+        Width:{{ that.sizeInfo.width }}mm  Height:{{ that.sizeInfo.height }}
       </span>
       </div>
 
@@ -46,12 +48,11 @@
 
             <div class="flex flex-col">
               <div>
-                <el-form label-width="200px">
+                <el-form label-width="280px">
                   <el-form-item label="Style" v-show="that.draftDesignList.length > 1">
                     <div class="flex ml-3">
                       <div>
-                        <el-select class="min-w-100" v-model="that.draftDesignId"
-                                   @change="changeType">
+                        <el-select class="min-w-100" v-model="that.draftDesignId"  @change="changeType">
                           <el-option
                             v-for="(item) in that.draftDesignList"
                             :key="item.id"
@@ -66,7 +67,7 @@
               </div>
               <div class="w-full" v-if="that.propOrderByList && that.propOrderByList.length > 0">
                 <el-scrollbar height="600px">
-                  <el-form label-width="200px">
+                  <el-form label-width="280px">
                     <el-form-item
                       v-for="(tmp,orderIndex) in that.propOrderByList"
 
@@ -112,10 +113,10 @@
                                 <div
                                   style="display: flex;align-items: center; margin-left: 10px; width: 220px">
                                   <el-row>
-                                    <el-col :span="4">
-                                      <div>占比</div>
+                                    <el-col :span="8">
+                                      <div>{{ t('designInfo.titleProportion') }}</div>
                                     </el-col>
-                                    <el-col :span="18">
+                                    <el-col :span="16">
                                       <div style="display: flex">
                                         <div>
                                           <el-input-number
@@ -203,8 +204,7 @@
                           :key="index" style="display: flex">
                           <div class="img-box">
 
-                            <div style="display: flex;width: 380px;align-items: center"
-                                 :class="{  'error_tip': errorItem(tmp.key,index) }">
+                            <div style="display: flex;width: 380px;align-items: center"  :class="{  'error_tip': errorItem(tmp.key,index) }">
                               <el-image
                                 style="width: 64px; height: 64px"
                                 fit="contain"
@@ -212,7 +212,7 @@
                                 :preview-src-list="[img.url]">
                                 <template #error>
                                   <div class="image-slot">
-                                   <span>Empty</span>
+                                    <span>Empty</span>
                                   </div>
                                 </template>
                               </el-image>
@@ -272,8 +272,9 @@
             height: `${previewSize.height}px`,
           }">
 
-      <div v-if="that.previewUrl"
-           :style="{
+      <div
+        v-if="that.previewUrl"
+        :style="{
             width: `${that.svgWidth+2}px`,
             height: `${that.svgHeight+2}px`,
             backgroundColor: (that.pageConfig.background && that.pageConfig.background.areaColor)  || '',
@@ -314,10 +315,11 @@ import * as FileApi from "@/api/infra/file";
 import {useLocaleStore} from "@/store/modules/locale";
 import {ProductInfoApi} from "@/api/oms/productinfo";
 import domtoimage from 'dom-to-image';
-import {usePageLoading} from "@/hooks/web/usePageLoading";
 import {GroupTypeEnum} from "@/components/DraftDesign/config/constant";
+import {useI18n} from "@/hooks/web/useI18n";
+
+const {t} = useI18n()
 
-const {loadStart, loadDone} = usePageLoading()
 // 动态属性配置
 const localeStore = useLocaleStore()
 const emit = defineEmits(['change', 'initSucceed'])
@@ -432,7 +434,7 @@ const initSucceed = () => {
 const changeInput = (index: number, key: string) => {
 
   if (!that.propInfo[key].dataInfo[index].showLabel) {
-    useMessage().notifyWarning('请输入' + getLabelName(that.propInfo[key]));
+    useMessage().notifyWarning('Please Input' + getLabelName(that.propInfo[key]));
     return;
   }
   that.propInfo[key].dataInfo[index].label = that.propInfo[key].dataInfo[index].showLabel
@@ -598,6 +600,7 @@ const uploadFile = async (fileName) => {
         reject(res)
       })
     }).catch(function (error) {
+      useMessage().notifyError(t('designInfo.tipsUploadError'))
       console.error('转换或上传过程中出现错误：', error);
     });
   });
@@ -629,7 +632,7 @@ const deleteList = (key, index) => {
     that.propInfo[key].dataInfo = [...newArr]
     resetData();
   } else {
-    useMessage().notifyWarning("至少需要一个变量")
+    useMessage().notifyWarning(t('designInfo.tipsVarCount'))
     return;
   }
 
@@ -642,7 +645,7 @@ const appendList = (key) => {
   console.log("keys", keys)
   // 有多少组变量
   if (keys.length >= item.maxSize) {
-    useMessage().notifyWarning("最大数量为:" + item.maxSize)
+    useMessage().notifyWarning(t('designInfo.tipsVarMaxCount') + ':' + item.maxSize)
     return;
   }
   const locale = item.dataInfo[0].locale
@@ -681,7 +684,7 @@ const appendGroup = (index, key) => {
   // 查询成分有多少组
   let count = findGroupTypeCount(GroupTypeEnum.RATIO);
   if (count > 16) {
-    useMessage().notifyWarning("最多添加16组")
+    useMessage().notifyWarning(t('designInfo.tipsVarMaxGroup'))
     return;
   }
 
@@ -707,7 +710,7 @@ const appendGroup = (index, key) => {
   console.log("that.propInfo[gId]", that.propOrderByList)
 }
 const delGroup = (orderIndex, key) => {
-  useMessage().confirm("是否删除该组变量?").then((res) => {
+  useMessage().confirm(t('designInfo.tipsDelGroup')).then((res) => {
     if (res) {
       that.propOrderByList.splice(orderIndex, 1);
       delete that.propInfo[key]
@@ -740,7 +743,7 @@ const previewByDraftDesignId = async (id: string | number, propData = {}) => {
       console.log("propData", propData)
       loadConfig(d, propData);
     } else {
-      useMessage().error('获取数据不存在:' + id)
+      useMessage().error(t('designInfo.tipsNotData') + id)
     }
   }
 }
@@ -749,7 +752,7 @@ const previewByProductId = async (id: string | number, propData = {}, defDraftDe
   if (id) {
     const prodRes = await ProductInfoApi.getProductInfo(id)
     if (!prodRes.draftDesignDataId) {
-      useMessage().error('商品未关联设计图稿数据:' + id)
+      useMessage().error(t('designInfo.tipsNotDesignData') + ':' + id)
       return;
     }
     that.brandId = prodRes.brandId
@@ -779,7 +782,7 @@ const queryUseLabel = (label) => {
       type: '1,3,4,5',
       brandIds: that.brandId,
       isAll: true,
-      locale: currentLocale.value.lang,
+
     }).then((data) => {
       that.ingredientInfoList = [];
       if (data.list) {
@@ -804,7 +807,6 @@ const queryUseLabel = (label) => {
       value: label,
       brandIds: that.brandId,
       isAll: true,
-      locale: currentLocale.value.lang,
       type: '2'
     }).then((data) => {
       that.washingInfoList = [];
@@ -898,15 +900,15 @@ const checkPropInfo = (info) => {
     for (let i = 0; i < that.propOrderByList.length; i++) {
       keys.push(that.propOrderByList[i].key);
     }
-    console.log("keys",keys)
-   for (let i = 0; i < keys.length; i++) {
+    console.log("keys", keys)
+    for (let i = 0; i < keys.length; i++) {
       const key = keys[i];
       // 每种语言合并成一句话
       const allLang = findGroupAllLang(key, newInfo2);
       const linkChar = newInfo[key].linkChar || '';
       const dataInfoArr = newInfo[key].dataInfo;
       let langList = newInfo[key].langList || [];
-     console.log("newInfo[key].groupType",newInfo[key])
+      console.log("newInfo[key].groupType", newInfo[key])
       if (newInfo[key].groupType === GroupTypeEnum.RATIO) {
 
         // 成分比例 都进行固定语言组合
@@ -926,7 +928,7 @@ const checkPropInfo = (info) => {
           });
 
           if (newInfo[key].dataInfo[j].ratio > maxRatio) {
-            useMessage().alert(getLabelName(newInfo[key]) + "违反含有量的成分比例,由大到小依序排列")
+            useMessage().alert(getLabelName(newInfo[key]) + t('designInfo.tipsUseSort'))
           }
         }
         let ratioIndex = 0;
@@ -949,14 +951,14 @@ const checkPropInfo = (info) => {
               if (str === null || str === undefined || str === -1) {
                 str = ''
               }
-              console.log("langList[k]",langList[k])
-              if(langList[k].linkChar && linkChar != ','){
-                linkChar =  langList[k]
+              console.log("langList[k]", langList[k])
+              if (langList[k].linkChar && linkChar != ',') {
+                linkChar = langList[k]
               }
               langLabel.push(tmpValue)
             }
           }
-          if(langLabel.length > 0){
+          if (langLabel.length > 0) {
             mergeLabel.push(langLabel.join(linkChar))
           }
 
@@ -970,21 +972,21 @@ const checkPropInfo = (info) => {
                 allRatio += dataInfoArr[k].ratio ? dataInfoArr[k].ratio : 0
                 console.log("allRatio", allRatio)
                 if (allRatio > 100) {
-                  useMessage().notifyError("占比之和不能超过100,实际为：" + allRatio);
+                  useMessage().notifyError(t('designInfo.tipsUseProportion') + ":" + allRatio);
                   that.errorList.push({
                     key: `${key}_${k}`,
-                    message: "占比之和不能超过100，实际为：" + allRatio
+                    message: t('designInfo.tipsUseProportion') + ":" + allRatio
                   })
-                  reject("占比之和不能超过100")
+                  reject(t('designInfo.tipsUseProportion'))
                   return
                 }
                 if (labelInfo.includes(dataInfoArr[k].showLabel)) {
-                  useMessage().notifyError(`${newInfo[key].groupName}中第${labelInfo.length + 1}项重复`);
+                  useMessage().notifyError(`${newInfo[key].groupName} ${labelInfo.length + 1} ${t('designInfo.tipsDuplicate')}`);
                   that.errorList.push({
                     key: `${key}_${k}`,
-                    message: "数据重复"
+                    message: t('designInfo.tipsDuplicate')
                   })
-                  reject("数据重复")
+                  reject(t('designInfo.tipsDuplicate'))
                   return
                 }
               }
@@ -993,12 +995,12 @@ const checkPropInfo = (info) => {
           }
           // 第一次校验
           if (flag && !checked && allRatio < 100) {
-            useMessage().notifyError(`${newInfo[key].groupName} 中占比希望是100%,实际是${allRatio}`);
+            useMessage().notifyError(`${newInfo[key].groupName} ${t('designInfo.tipsUseProportion2')} ${allRatio}`);
             that.errorList.push({
               key: `${key}_${dataInfoArr.length - 1}`,
-              message: "成分不足100%"
+              message: t('designInfo.tipsUseProportion2') + ':' + allRatio
             })
-            reject("成分占比为" + allRatio)
+            reject(t('designInfo.tipsUseProportion2') + ':' + allRatio)
             return
           }
           if (flag && !checked) {
@@ -1037,23 +1039,23 @@ const checkPropInfo = (info) => {
             const infos = newInfo[key].dataInfo;
             for (let j = 1; j < infos.length; j++) {
 
-                outerLoop: for (let i = 0; i < infoList.length; i++) {
-                  const row1 = infoList[i];
-                  if(`${row1.processType}` === `${ newInfo[key].processType}`){
-                    for (let k = 0; k < row1.langMapping.length; k++) {
-                      // 跳过icon 类型，因为没有url
-                      if (infos[j].locale === row1.langMapping[k].locale && showLabel1 === row1.value) {
-                        infos[j].label = row1.langMapping[k].value
-                        break outerLoop;
-                      }
+              outerLoop: for (let i = 0; i < infoList.length; i++) {
+                const row1 = infoList[i];
+                if (`${row1.processType}` === `${newInfo[key].processType}`) {
+                  for (let k = 0; k < row1.langMapping.length; k++) {
+                    // 跳过icon 类型，因为没有url
+                    if (infos[j].locale === row1.langMapping[k].locale && showLabel1 === row1.value) {
+                      infos[j].label = row1.langMapping[k].value
+                      break outerLoop;
                     }
                   }
                 }
+              }
             }
-            console.log("newArr33",infos)
+            console.log("newArr33", infos)
             newInfo[key].dataInfo = infos;
 
-          }else {
+          } else {
             const infoList = washingInfoListByType(newInfo[key].groupType)
             const infos = newInfo[key].dataInfo;
             for (let j = 0; j < infos.length; j++) {
@@ -1068,7 +1070,7 @@ const checkPropInfo = (info) => {
                 }
               }
             }
-            console.log("newArr99",infos)
+            console.log("newArr99", infos)
             newInfo[key].dataInfo = infos;
 
           }
@@ -1084,20 +1086,20 @@ const checkPropInfo = (info) => {
             }
             let mergeLabel = [];
 
-            if(newInfo[key].canInput){
+            if (newInfo[key].canInput) {
               for (let j = 0; j < dataInfoArr.length; j++) {
                 if (dataInfoArr[j].showLabel) {
-                  if(mergeLabel.includes(dataInfoArr[j].showLabel)){
+                  if (mergeLabel.includes(dataInfoArr[j].showLabel)) {
                     useMessage().notifyWarning(`${newInfo[key].groupName}中,第${j + 1}项重复${dataInfoArr[j].showLabel}`)
                   }
                   mergeLabel.push(dataInfoArr[j].showLabel)
                 }
               }
-            }else {
+            } else {
               for (let j = 0; j < langSort.length; j++) {
                 const labelInfo = []
                 for (let k = 0; k < langList.length; k++) {
-                  console.log("newInfo[key].dataInfo[k]",newInfo[key].dataInfo[k])
+                  console.log("newInfo[key].dataInfo[k]", newInfo[key].dataInfo[k])
                   if (langSort[j] === langList[k].locale) {
                     mergeLabel.push(langList[k].value)
                   }
@@ -1110,9 +1112,9 @@ const checkPropInfo = (info) => {
                         useMessage().notifyError(`${newInfo[key].groupName}中第${labelInfo.length + 1}项重复`);
                         that.errorList.push({
                           key: `${key}_${k}`,
-                          message: "数据重复"
+                          message: t('designInfo.tipsDuplicate')
                         })
-                        reject("数据重复")
+                        reject(t('designInfo.tipsDuplicate'))
                         return
                       }
                       labelInfo.push(newInfo[key].dataInfo[k].showLabel)
@@ -1149,9 +1151,9 @@ const checkPropInfo = (info) => {
                     useMessage().notifyError(`${newInfo[key].groupName}中第${labelInfo.length + 1}项重复`);
                     that.errorList.push({
                       key: `${key}_${k}`,
-                      message: "数据重复"
+                      message: t('designInfo.tipsDuplicate')
                     })
-                    reject("数据重复")
+                    reject(t('designInfo.tipsDuplicate'))
                     return
                   }
                   labelInfo.push(newInfo[key].dataInfo[k].showLabel)
@@ -1186,9 +1188,9 @@ const checkPropInfo = (info) => {
                     useMessage().notifyError(`${that.propInfo[tmpKey2].groupName}中第${i + 1}项重复`);
                     that.errorList.push({
                       key: `${tmpKey2}_${0}`,
-                      message: "数据重复"
+                      message: t('designInfo.tipsDuplicate')
                     })
-                    reject("数据重复")
+                    reject(t('designInfo.tipsDuplicate'))
                     return
                   }
                   dis.push(that.propInfo[keys[i]].dataInfo[0].showLabel)
@@ -1239,8 +1241,8 @@ const checkPropInfo = (info) => {
             let resArr = [];
             for (let j = 0; j < newArr.length; j++) {
               newArr[j].label = mergeLabelStr
-              console.log("newArr[j].showLabel",newArr[j].showLabel)
-              if(!newArr[j].showLabel){
+              console.log("newArr[j].showLabel", newArr[j].showLabel)
+              if (!newArr[j].showLabel) {
                 newArr[j].url = ''
               }
               resArr.push({
@@ -1284,7 +1286,7 @@ const getPropInfo = () => {
       that.pageConfig.propOrderByList = that.propOrderByList
       that.pageLoading = ElLoading.service({
         lock: true,
-        text: '数据传输中...',
+        text: t('designInfo.tipsDataTransmitting'),
         background: 'rgba(0,0,0,0.5)'
       })
       // 成功后再获取图片
@@ -1359,6 +1361,7 @@ defineExpose({
   text-orientation: upright; /* 保持文字直立 */
   padding: 6px;
 }
+
 .image-slot {
   display: flex;
   justify-content: center;
@@ -1369,6 +1372,7 @@ defineExpose({
   color: var(--el-text-color-secondary);
   font-size: 10px;
 }
+
 :deep(.el-input__wrapper) {
   position: relative;
 
diff --git a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DynamicPropConfig.vue b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DynamicPropConfig.vue
index 3c7037f..d9a4f56 100644
--- a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DynamicPropConfig.vue
+++ b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DynamicPropConfig.vue
@@ -49,8 +49,7 @@
               <el-row>
                 <el-col :span="6">
                   <div style="width: 120px;display: flex">
-                    <el-checkbox :disabled="disableInput"
-                      v-model="that.configInfo.canChange">
+                    <el-checkbox :disabled="disableInput"  v-model="that.configInfo.canChange">
                       <span>允许调整数量</span>
                     </el-checkbox>
                   </div>
@@ -58,8 +57,7 @@
 
                 <el-col :span="6">
                   <div style="width: 120px;display: flex">
-                    <el-checkbox :disabled="disableInput"
-                                 v-model="that.configInfo.canInput">
+                    <el-checkbox :disabled="disableInput"  v-model="that.configInfo.canInput">
                       <span>允许输入值</span>
                     </el-checkbox>
                   </div>
@@ -71,8 +69,7 @@
                     <div style="display:flex;">
                       <div>变量链接符</div>
                       <div>
-                        <el-input v-model="that.configInfo.linkChar" clearable maxlength="6"
-                                  placeholder="请输入连接符" show-word-limit/>
+                        <el-input v-model="that.configInfo.linkChar" clearable maxlength="6"  placeholder="请输入连接符" show-word-limit/>
                       </div>
                       <el-button @click="that.configInfo.linkChar = '<br/>'">换行</el-button>
                     </div>
@@ -153,8 +150,7 @@
                 </el-table-column>
                 <el-table-column label="语言" width="180" v-if="that.configInfo.multiLanguage">
                   <template #default="scope">
-                    <el-select v-model="that.configInfo.pointList[scope.$index].dataInfo.locale"
-                               placeholder="请选择语言标识">
+                    <el-select v-model="that.configInfo.pointList[scope.$index].dataInfo.locale"   placeholder="请选择语言标识">
                       <el-option
                         v-for="dict in languageOptions"
                         :key="`${dict.value}`"
diff --git a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/node/ShapeImageNode.vue b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/node/ShapeImageNode.vue
index 5549ce6..9b9a7a8 100644
--- a/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/node/ShapeImageNode.vue
+++ b/hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/node/ShapeImageNode.vue
@@ -3,14 +3,15 @@
   <div
     :id="cellInfo.id"
     class="node-content"
-   :class="{
+    :class="{
       'node-content-group' : cellInfo.editMode && cellInfo.propGroupId,
       'node-content-tips' :  cellInfo.editMode && !cellInfo.style.shape.href
     }"
     :title="cellInfo.propGroupName"
     v-reSize="changSize">
 
-    <img v-if="cellInfo.style.shape.href"
+    <img
+      v-if="cellInfo.style.shape.href"
       :src="cellInfo.style.shape.href" x="0" y="0"
       style="width: 100%;height: 100%;"
       :style="{
@@ -65,7 +66,7 @@ export default defineComponent({
     svgStyle() {
       const res = {
         borderRadius: '',
-        backgroundColor : this.cellInfo.style.shape.fillColor ||  "",
+        backgroundColor: this.cellInfo.style.shape.fillColor || "",
         width: `1000px`,
         height: `1000px`,
         transform: ''
@@ -200,7 +201,7 @@ export default defineComponent({
     setInput(val: boolean) {
     },
     changSize(size: any) {
-      if(!size){
+      if (!size) {
         return;
       }
       this.sizeWInfo.width = size.width;
@@ -283,19 +284,19 @@ export default defineComponent({
           this.nodeInfo.store.data.data = this.cellInfo
         }
       }, 300)
-      this.cellInfo.editMode  = getDraftDesignState();
-      if(this.cellInfo.editMode && this.cellInfo.propGroupId){
+      this.cellInfo.editMode = getDraftDesignState();
+      if (this.cellInfo.editMode && this.cellInfo.propGroupId) {
         const showRandomGroupColor = configInfo.LK_SHOW_RANDOM_GROUP_COLOR()
-        if(!showRandomGroupColor){
-          setTimeout(()=>{
+        if (!showRandomGroupColor) {
+          setTimeout(() => {
             const [type, id] = this.cellInfo.propGroupId.split("_")
-            if(id){
+            if (id) {
               document.getElementById(this.cellInfo.id)?.style.setProperty(
                 "--lk-prop-group-color",
                 `#${id}`
               );
             }
-          },100)
+          }, 100)
         }
       }
       this.changeFontSize();
diff --git a/hangtag-ui/hangtag-ui-admin/src/locales/en.ts b/hangtag-ui/hangtag-ui-admin/src/locales/en.ts
index 98056c8..8371188 100644
--- a/hangtag-ui/hangtag-ui-admin/src/locales/en.ts
+++ b/hangtag-ui/hangtag-ui-admin/src/locales/en.ts
@@ -114,7 +114,7 @@ export default {
   },
   login: {
     welcome: 'Welcome to the system',
-    message: 'Backstage management system',
+    message: '',
     tenantname: 'TenantName',
     username: 'Username',
     password: 'Password',
@@ -133,14 +133,20 @@ export default {
     codePlaceholder: 'Please Enter Verification Code',
     mobileTitle: 'Mobile sign in',
     mobileNumber: 'Mobile Number',
-    mobileNumberPlaceholder: 'Plaease Enter Mobile Number',
+    mobileNumberPlaceholder: 'Plaease Enter Mobile Code',
+    emailNumberPlaceholder: 'Plaease Enter Email Code',
     backLogin: 'back',
     getSmsCode: 'Get SMS Code',
+    getMailCode: 'Get Mail Code',
     btnMobile: 'Mobile sign in',
     btnQRCode: 'QR code sign in',
     qrcode: 'Scan the QR code to log in',
     btnRegister: 'Sign up',
-    SmsSendMsg: 'code has been sent'
+    SmsSendMsg: 'code has been sent',
+    pwdResetSuccess: 'password reset success'
+  },
+  forgetpassword: {
+    resetpwd: 'reset pwd',
   },
   captcha: {
     verification: 'Please complete security verification',
@@ -455,8 +461,134 @@ export default {
     preview: 'Preivew'
   },
   designInfo: {
-    auditSubmitText: 'Approve the Draft',
-    auditTips: 'This manuscript is only used for content verification and will not be used as the final printed manuscript;',
-    cancelText: 'Cancel',
+    "auditSubmitText": "Submit for Review",
+    "auditTips": "This draft is only for content verification and is not the final print file.",
+    "cancelText": "Cancel",
+    "titlePreview": "Preview",
+    "titleUpdateDesign": "Update",
+    "titleSyncUpdateDesign": 'sync update design',
+    "tipsInfo": 'for reference only',
+    "tipsUseInfo": "Hold down the left mouse button to drag, hold Ctrl and scroll the mouse wheel to zoom in and out.",
+    "titleProportion": "Proportion",
+    "tipsUploadError": "Upload failed due to a network interruption. Please try again.",
+    "tipsVarCount": "At least one variable is required.",
+    "tipsVarMaxCount": "Maximum quantity",
+    "tipsVarMaxGroup": "A maximum of 16 groups can be added.",
+    "tipsDelGroup": "Do you want to delete this group of variables?",
+    "tipsNotData": "Data does not exist.",
+    "tipsNotDesignData": "The product is not associated with design draft data.",
+    "tipsUseSort": "Ingredients must be listed in descending order of their content proportion.",
+    "tipsUseProportion": "The total proportion cannot exceed 100. The actual value is",
+    "tipsUseProportion2": "The desired proportion is 100%, but the actual value is",
+    "tipsDuplicate": "Duplicate",
+    "tipsDataTransmitting": "Data transmitting..."
   },
+  "createOrder": {
+    "title1": "Order Information",
+    "labelOrderCode": "Order Code",
+    "labelOrderStatus": "Order Status",
+    "labelUserName": "User Name",
+    "labelBizDate": "Creation Date (GMT+8)",
+    "labelCustomerId": "Customer ID",
+    "labelCompanyName": "Company",
+    "labelBrand": "Brand",
+    "labelPlanDate": "Delivery Date",
+    "labelPlanDateTips": "Selecting batch delivery allows separate delivery dates for products.",
+    "labelPlanDateSplit": "Batch Delivery",
+    "labelContactName": "Contact Person",
+    "placeContactName": "Please enter the contact person's name.",
+    "labelPhone": "Mobile Number",
+    "placePhone": "Please enter the mobile number.",
+    "labelTel": "Telephone Number",
+    "placeTel": "Please enter the telephone number.",
+    "labelFax": "Fax",
+    "placeFax": "Please enter the fax number.",
+    "labelContractCode": "ContractCode",
+    "placeContractCode": "Please enter the contract code.",
+    "labelRetailerCode": "RetailerNO",
+    "placeRetailerCode": "Please enter the retailer order number.",
+    "labelCurrency": "Currency",
+    "placeCurrency": "Please select the settlement currency.",
+    "labelOrderFollowerUser": "FollowerUser",
+    "placeOrderFollowerUser": "Please select a sales representative.",
+    "labelRemarks": "Remarks",
+    "placeRemarks": "Please enter remarks.",
+    "titleEmail": "Email Notification",
+    "labelEmail": "Contact Email",
+    "placeEmail": "Please enter the contact email.",
+    "btnAddEmail": "Add",
+    "btnDelEmail": "Delete",
+    "titleInvoice": "Invoice Information",
+    "btnInvoice": "Manage Invoice Information",
+    "labelInvoiceCode": "Invoice Title",
+    "placeInvoiceCode": "Please enter the invoice title.",
+    "labelInvoiceName": "Invoice Name",
+    "placeInvoiceName": "Please enter the invoice name.",
+    "labelInvoiceAddress": "Invoice Address",
+    "placeInvoiceAddress": "Please enter the invoice address.",
+    "labelInvoiceRemarks": "Invoice Remarks",
+    "placeInvoiceRemarks": "Please enter the invoice remarks.",
+    "titleAddress": "Shipping Information",
+    "btnEditAddress": "Manage Shipping Address",
+    "labelAddressId": "Shipping Address",
+    "placeAddressId": "Please select a shipping address.",
+    "labelDeliveryAddress": "Detailed Address",
+    "placeDeliveryAddress": "Please enter the detailed address.",
+    "labelDeliveryRemark": "Delivery Remarks",
+    "placeDeliveryRemark": "Please enter delivery remarks.",
+    "btnCreate": "Create",
+    "btnNext": "Next",
+    "btnPrevStep": "Prev Step",
+    "ruleMsgContactName": "Contact person's name cannot be empty.",
+    "ruleMsgBrandId": "Brand cannot be empty.",
+    "ruleMsgContractCode": "Customer purchase number cannot be empty.",
+    "ruleMsgPhone": "Contact mobile number cannot be empty.",
+    "ruleMsgPhoneError": "Please enter a valid mobile number.",
+    "ruleMsgEmail": "Please enter an email address.",
+    "tipsBaseInfo": "Please complete the basic information first.",
+    "tipsAddProduct": "Please add a product.",
+    "tipsLoadingEditing": "Successfully modified...",
+    "tipsLoadingOrderCompleted": "Order successfully placed...",
+    "skuTitleProductList": "Order Product List",
+    "skuTitleProductDetails": "Order Product Details",
+    "labelSkuOrderQty": "Order Quantity",
+    "labelSkuPreview": "Preview",
+    "labelSkuSpecSizeThk": "Thickness",
+    "labelSkuSpecMaterial": "Material",
+    "labelSkuMainColor": "Color Style",
+    "skuColTitleCount": "Quantity",
+    "skuColTitleMainPicture": "Main Picture",
+    "batchOptionsTips": "Confirm bulk quantity settings.",
+    "batchOptionsFillAll": "Fill All",
+    "batchOptionsAppend": "Append",
+    "batchOptionsDecrease": "Decrease",
+    "batchOptionsApply": "Confirm bulk application?",
+    "batchOptionsFillEmptyRow": "Fill Empty Rows",
+    "batchOptionsReplace": "Replace",
+    "skuColTitleSize": "Size",
+    "placeSkuSizeUse": "Separate multiple sizes with spaces.",
+    "placeSkuInputSize": "Please enter sizes.",
+    "btnAddProduct": "Add Product",
+    "btnDel": "Delete",
+    "labelColProductCode": "Product Code",
+    "labelColProductName": "Product Name",
+    "labelColProducer": "Producer",
+    "labelColProductDetails": "Product Description",
+    "labelColProductPicture": "Product Picture",
+    "labelColProductUnit": "Unit of Quantity",
+    "labelColDeliveryDate": "Delivery Date",
+    "labelColOrderQty": "Order Quantity",
+    "tipsDuplicateSkipped": "Duplicate products skipped.",
+    "tipsAppendSuccess": "Added successfully.",
+    "btnAddSku": "Add SKU"
+  },
+  "productDialogList": {
+    "title": "Product List",
+    "colLabelCode": "Product Code",
+    "colLabelType": "Product Type",
+    "colLabelCover": "Cover",
+    "colLabelName": "Product Name",
+    "colLabelRemark": "Remarks",
+    "colLabelDetails": "Details Description"
+  }
 }
diff --git a/hangtag-ui/hangtag-ui-admin/src/locales/zh-CN.ts b/hangtag-ui/hangtag-ui-admin/src/locales/zh-CN.ts
index ee2b41b..7c2fd5f 100644
--- a/hangtag-ui/hangtag-ui-admin/src/locales/zh-CN.ts
+++ b/hangtag-ui/hangtag-ui-admin/src/locales/zh-CN.ts
@@ -134,13 +134,19 @@ export default {
     mobileTitle: '手机登录',
     mobileNumber: '手机号码',
     mobileNumberPlaceholder: '请输入手机号码',
+    emailNumberPlaceholder: '请输入邮箱号码',
     backLogin: '返回',
     getSmsCode: '获取验证码',
+    getMailCode: '获取验证码',
     btnMobile: '手机登录',
     btnQRCode: '二维码登录',
     qrcode: '扫描二维码登录',
     btnRegister: '注册',
-    SmsSendMsg: '验证码已发送'
+    SmsSendMsg: '验证码已发送',
+    pwdResetSuccess: '密码重置成功'
+  },
+  forgetpassword: {
+    resetpwd: '重置密码',
   },
   captcha: {
     verification: '请完成安全验证',
@@ -452,6 +458,133 @@ export default {
     auditSubmitText: '批稿',
     auditTips: '此稿件仅仅作为核对内容使用用，不作为最终印刷稿件;',
     cancelText: '取消',
+    titlePreview: '预览',
+    titleUpdateDesign: '更新',
+    titleSyncUpdateDesign: '实时更新',
+    tipsInfo: '仅供参考', // for reference only
+    tipsUseInfo: '按住鼠标左键进行拖动，按住Ctrl 滚动鼠标进行缩小放放大',
+    titleProportion: '占比',
+    tipsUploadError: '上传过程中网络中断上传失败，请重试',
+    tipsVarCount: '至少需要一个变量',
+    tipsVarMaxCount: '最大数量',
+    tipsVarMaxGroup: '最多添加16组',
+    tipsDelGroup: '是否删除该组变量',
+    tipsNotData: '数据不存在',
+    tipsNotDesignData: '商品未关联设计图稿数据',
+    tipsUseSort: '违反含有量的成分比例,由大到小依序排列',
+    tipsUseProportion: '占比总和不能超过100,实际为',
+    tipsUseProportion2: '中占比希望是100%,实际是',
+    tipsDuplicate: '重复',
+    tipsDataTransmitting: '数据传输中...',
+  },
+  createOrder: {
+    title1: '订单信息',
+    labelOrderCode: '订单编码',
+    labelOrderStatus: '订单状态',
+    labelUserName: '用户名称',
+    labelBizDate: '创建日期 (GMT+8)',
+    labelCustomerId: '客户号',
+    labelCompanyName: '企业公司',
+    labelBrand: '品牌',
+    labelPlanDate: '交货日期',
+    labelPlanDateTips: '选择分批交货，允许分别设置产品的交期',
+    labelPlanDateSplit: '分批交货',
+    labelContactName: '联系人',
+    placeContactName: '请填写联系人名称',
+    labelPhone: '手机号码',
+    placePhone: '请填写手机号码',
+    labelTel: '电话号码',
+    placeTel: '请填写电话号码',
+    labelFax: '传真',
+    placeFax: '请填写传真号码',
+    labelContractCode: '客户采购编号',
+    placeContractCode: '请填写客户采购编号',
+    labelRetailerCode: '零售商单号',
+    placeRetailerCode: '请填写零售商单号',
+    labelCurrency: '结算币种',
+    placeCurrency: '请选择结算币种',
+    labelOrderFollowerUser: '业务员',
+    placeOrderFollowerUser: '请选择业务员',
+    labelRemarks: '备注',
+    placeRemarks: '请填写备注',
+    titleEmail: '电子邮件通知',
+    labelEmail: '联系邮箱',
+    placeEmail: '请填写联系邮箱',
+    btnAddEmail: '增加',
+    btnDelEmail: '删除',
+    titleInvoice: '发票信息',
+    btnInvoice: '管理发票信息',
+    labelInvoiceCode: '发票抬头',
+    placeInvoiceCode: '请填写发票抬头',
+    labelInvoiceName: '发票名称',
+    placeInvoiceName: '请填写发票名称',
+    labelInvoiceAddress: '发票地址',
+    placeInvoiceAddress: '请填写发票地址',
+    labelInvoiceRemarks: '发票备注',
+    placeInvoiceRemarks: '请填写发票备注',
+    titleAddress: '收货信息',
+    btnEditAddress: '管理收货地址',
+    labelAddressId: '收货地址',
+    placeAddressId: '请选择收货地址',
+    labelDeliveryAddress: '详细地址',
+    placeDeliveryAddress: '请填写详细地址',
+    labelDeliveryRemark: '送货备注',
+    placeDeliveryRemark: '请填写送货备注',
+    btnCreate: '创建',
+    btnNext: '下一步',
+    btnPrevStep: '上一步',
+    ruleMsgContactName: '联系人名称不能为空',
+    ruleMsgBrandId: '品牌不能为空',
+    ruleMsgContractCode: '客户采购编号不能为空',
+    ruleMsgPhone: '联系人手机号不能为空',
+    ruleMsgPhoneError: '请输入正确的手机号码',
+    ruleMsgEmail: '请输入邮箱',
+    tipsBaseInfo: '请先完善基本信息',
+    tipsAddProduct: '请添加产品',
+    tipsLoadingEditing: '修改成功...',
+    tipsLoadingOrderCompleted: '下单成功...',
+    // sku
+    skuTitleProductList: '订单产品列表',
+    skuTitleProductDetails: '订单产品明细',
+    labelSkuOrderQty: '订货数量',
+    labelSkuPreview: '预览',
+    labelSkuSpecSizeThk: '厚度',
+    labelSkuSpecMaterial: '材质',
+    labelSkuMainColor: '颜色风格',
+    skuColTitleCount: '数量',
+    skuColTitleMainPicture: '主图',
+    batchOptionsTips: '确定批量设置数量',
+    batchOptionsFillAll: '填充全部',
+    batchOptionsAppend: '追加',
+    batchOptionsDecrease: '减少',
+    batchOptionsApply: '确定批量应用吗?',
+    batchOptionsFillEmptyRow: '填充空值行',
+    batchOptionsReplace: '覆盖',
+    skuColTitleSize: '尺码',
+    placeSkuSizeUse: '多个使用空格间隔',
+    placeSkuInputSize: '请填写码数',
+    btnAddProduct: '添加产品',
+    btnDel: '删除',
+    labelColProductCode: '产品编码',
+    labelColProductName: '产品名称',
+    labelColProducer: '生产者',
+    labelColProductDetails: '产品描述',
+    labelColProductPicture: '产品图片',
+    labelColProductUnit: '数量单位',
+    labelColDeliveryDate: '交货日期',
+    labelColOrderQty: '订货数量',
+    tipsDuplicateSkipped: '已跳过重复产品',
+    tipsAppendSuccess: '添加成功',
+    btnAddSku: '添加SKU',
+  },
+  productDialogList:{
+    title: '产品列表',
+    colLabelCode: '产品编码',
+    colLabelType: '产品类型',
+    colLabelCover: '封面',
+    colLabelName: '产品名称',
+    colLabelRemark: '备注',
+    colLabelDetails: '详情描述',
   },
   'OAuth 2.0': 'OAuth 2.0' // 避免菜单名是 OAuth 2.0 时，一直 warn 报错
 }
diff --git a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DesignPreviewDialog.vue b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DesignPreviewDialog.vue
index 1b948b0..0b957ea 100644
--- a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DesignPreviewDialog.vue
+++ b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DesignPreviewDialog.vue
@@ -1,7 +1,7 @@
 <template>
   <Dialog
     v-model="that.previewVisible"
-    title="预览"
+    :title="t('designInfo.titlePreview')"
     width="80vw"
     top="2%"
     :fullscreen="true"
@@ -25,9 +25,7 @@
 </template>
 
 <script lang="ts" setup name="DesignPreviewDialog">
-import {ElAlert} from "element-plus";
 import {reactive, computed, watch} from 'vue'
-import {calculateVectorDifference} from "@/components/DraftDesign/utils/FuncUtil";
 import {useMessage} from "@/hooks/web/useMessage";
 import {useI18n} from 'vue-i18n'
 
diff --git a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DesignPropEdit.vue b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DesignPropEdit.vue
index 135ddb5..0d4c33d 100644
--- a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DesignPropEdit.vue
+++ b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DesignPropEdit.vue
@@ -4,17 +4,19 @@
 
     <div style="max-height: 90vh; overflow:auto;" v-loading="loading">
      <span>
-         仅供参考(for reference only)
+       {{ t('designInfo.tipsInfo')}}
        </span>
       <div style="padding-bottom: 4px">
-        <el-checkbox style="margin: 8px" v-model="that.reView">实时预览</el-checkbox>
+        <el-checkbox style="margin: 8px" v-model="that.reView">
+          {{ t('designInfo.titleSyncUpdateDesign')}}
+        </el-checkbox>
         <el-button
           v-show="!that.reView"
           style="margin: 8px"
           type="primary"
           size="small"
           @click="updateDesign">
-          <span>更新</span>
+          <span>{{ t('designInfo.titleUpdateDesign') }}</span>
           <span
             style="color: #ff0000;font-size: 20px; padding-left: 4px">{{
               that.changeCount > 0 ? '*' : ''
@@ -24,12 +26,12 @@
       </div>
       <div>
         <el-alert
-          title="按住鼠标左键进行拖动，按住Ctrl 滚动鼠标进行缩小放放大"
+          :title="t('designInfo.tipsUseInfo')"
           type="info" effect="dark"/>
       </div>
       <div v-if="that.sizeInfo" :title="`${that.sizeInfo.width}mm`">
       <span>
-        宽:{{ that.sizeInfo.width }}mm  高{{ that.sizeInfo.height }}
+        Width:{{ that.sizeInfo.width }}mm  Height:{{ that.sizeInfo.height }}
       </span>
       </div>
 
@@ -46,12 +48,11 @@
 
             <div class="flex flex-col">
               <div>
-                <el-form label-width="200px">
+                <el-form label-width="280px">
                   <el-form-item label="Style" v-show="that.draftDesignList.length > 1">
                     <div class="flex ml-3">
                       <div>
-                        <el-select class="min-w-100" v-model="that.draftDesignId"
-                                   @change="changeType">
+                        <el-select class="min-w-100" v-model="that.draftDesignId"  @change="changeType">
                           <el-option
                             v-for="(item) in that.draftDesignList"
                             :key="item.id"
@@ -66,7 +67,7 @@
               </div>
               <div class="w-full" v-if="that.propOrderByList && that.propOrderByList.length > 0">
                 <el-scrollbar height="600px">
-                  <el-form label-width="200px">
+                  <el-form label-width="280px">
                     <el-form-item
                       v-for="(tmp,orderIndex) in that.propOrderByList"
 
@@ -112,10 +113,10 @@
                                 <div
                                   style="display: flex;align-items: center; margin-left: 10px; width: 220px">
                                   <el-row>
-                                    <el-col :span="4">
-                                      <div>占比</div>
+                                    <el-col :span="8">
+                                      <div>{{ t('designInfo.titleProportion') }}</div>
                                     </el-col>
-                                    <el-col :span="18">
+                                    <el-col :span="16">
                                       <div style="display: flex">
                                         <div>
                                           <el-input-number
@@ -203,8 +204,7 @@
                           :key="index" style="display: flex">
                           <div class="img-box">
 
-                            <div style="display: flex;width: 380px;align-items: center"
-                                 :class="{  'error_tip': errorItem(tmp.key,index) }">
+                            <div style="display: flex;width: 380px;align-items: center"  :class="{  'error_tip': errorItem(tmp.key,index) }">
                               <el-image
                                 style="width: 64px; height: 64px"
                                 fit="contain"
@@ -212,7 +212,7 @@
                                 :preview-src-list="[img.url]">
                                 <template #error>
                                   <div class="image-slot">
-                                   <span>Empty</span>
+                                    <span>Empty</span>
                                   </div>
                                 </template>
                               </el-image>
@@ -272,8 +272,9 @@
             height: `${previewSize.height}px`,
           }">
 
-      <div v-if="that.previewUrl"
-           :style="{
+      <div
+        v-if="that.previewUrl"
+        :style="{
             width: `${that.svgWidth+2}px`,
             height: `${that.svgHeight+2}px`,
             backgroundColor: (that.pageConfig.background && that.pageConfig.background.areaColor)  || '',
@@ -314,10 +315,11 @@ import * as FileApi from "@/api/infra/file";
 import {useLocaleStore} from "@/store/modules/locale";
 import {ProductInfoApi} from "@/api/oms/productinfo";
 import domtoimage from 'dom-to-image';
-import {usePageLoading} from "@/hooks/web/usePageLoading";
 import {GroupTypeEnum} from "@/components/DraftDesign/config/constant";
+import {useI18n} from "@/hooks/web/useI18n";
+
+const {t} = useI18n()
 
-const {loadStart, loadDone} = usePageLoading()
 // 动态属性配置
 const localeStore = useLocaleStore()
 const emit = defineEmits(['change', 'initSucceed'])
@@ -432,7 +434,7 @@ const initSucceed = () => {
 const changeInput = (index: number, key: string) => {
 
   if (!that.propInfo[key].dataInfo[index].showLabel) {
-    useMessage().notifyWarning('请输入' + getLabelName(that.propInfo[key]));
+    useMessage().notifyWarning('Please Input' + getLabelName(that.propInfo[key]));
     return;
   }
   that.propInfo[key].dataInfo[index].label = that.propInfo[key].dataInfo[index].showLabel
@@ -598,6 +600,7 @@ const uploadFile = async (fileName) => {
         reject(res)
       })
     }).catch(function (error) {
+      useMessage().notifyError(t('designInfo.tipsUploadError'))
       console.error('转换或上传过程中出现错误：', error);
     });
   });
@@ -629,7 +632,7 @@ const deleteList = (key, index) => {
     that.propInfo[key].dataInfo = [...newArr]
     resetData();
   } else {
-    useMessage().notifyWarning("至少需要一个变量")
+    useMessage().notifyWarning(t('designInfo.tipsVarCount'))
     return;
   }
 
@@ -642,7 +645,7 @@ const appendList = (key) => {
   console.log("keys", keys)
   // 有多少组变量
   if (keys.length >= item.maxSize) {
-    useMessage().notifyWarning("最大数量为:" + item.maxSize)
+    useMessage().notifyWarning(t('designInfo.tipsVarMaxCount') + ':' + item.maxSize)
     return;
   }
   const locale = item.dataInfo[0].locale
@@ -681,7 +684,7 @@ const appendGroup = (index, key) => {
   // 查询成分有多少组
   let count = findGroupTypeCount(GroupTypeEnum.RATIO);
   if (count > 16) {
-    useMessage().notifyWarning("最多添加16组")
+    useMessage().notifyWarning(t('designInfo.tipsVarMaxGroup'))
     return;
   }
 
@@ -707,7 +710,7 @@ const appendGroup = (index, key) => {
   console.log("that.propInfo[gId]", that.propOrderByList)
 }
 const delGroup = (orderIndex, key) => {
-  useMessage().confirm("是否删除该组变量?").then((res) => {
+  useMessage().confirm(t('designInfo.tipsDelGroup')).then((res) => {
     if (res) {
       that.propOrderByList.splice(orderIndex, 1);
       delete that.propInfo[key]
@@ -740,7 +743,7 @@ const previewByDraftDesignId = async (id: string | number, propData = {}) => {
       console.log("propData", propData)
       loadConfig(d, propData);
     } else {
-      useMessage().error('获取数据不存在:' + id)
+      useMessage().error(t('designInfo.tipsNotData') + id)
     }
   }
 }
@@ -749,7 +752,7 @@ const previewByProductId = async (id: string | number, propData = {}, defDraftDe
   if (id) {
     const prodRes = await ProductInfoApi.getProductInfo(id)
     if (!prodRes.draftDesignDataId) {
-      useMessage().error('商品未关联设计图稿数据:' + id)
+      useMessage().error(t('designInfo.tipsNotDesignData') + ':' + id)
       return;
     }
     that.brandId = prodRes.brandId
@@ -779,7 +782,7 @@ const queryUseLabel = (label) => {
       type: '1,3,4,5',
       brandIds: that.brandId,
       isAll: true,
-      locale: currentLocale.value.lang,
+
     }).then((data) => {
       that.ingredientInfoList = [];
       if (data.list) {
@@ -804,7 +807,6 @@ const queryUseLabel = (label) => {
       value: label,
       brandIds: that.brandId,
       isAll: true,
-      locale: currentLocale.value.lang,
       type: '2'
     }).then((data) => {
       that.washingInfoList = [];
@@ -898,15 +900,15 @@ const checkPropInfo = (info) => {
     for (let i = 0; i < that.propOrderByList.length; i++) {
       keys.push(that.propOrderByList[i].key);
     }
-    console.log("keys",keys)
-   for (let i = 0; i < keys.length; i++) {
+    console.log("keys", keys)
+    for (let i = 0; i < keys.length; i++) {
       const key = keys[i];
       // 每种语言合并成一句话
       const allLang = findGroupAllLang(key, newInfo2);
       const linkChar = newInfo[key].linkChar || '';
       const dataInfoArr = newInfo[key].dataInfo;
       let langList = newInfo[key].langList || [];
-     console.log("newInfo[key].groupType",newInfo[key])
+      console.log("newInfo[key].groupType", newInfo[key])
       if (newInfo[key].groupType === GroupTypeEnum.RATIO) {
 
         // 成分比例 都进行固定语言组合
@@ -926,7 +928,7 @@ const checkPropInfo = (info) => {
           });
 
           if (newInfo[key].dataInfo[j].ratio > maxRatio) {
-            useMessage().alert(getLabelName(newInfo[key]) + "违反含有量的成分比例,由大到小依序排列")
+            useMessage().alert(getLabelName(newInfo[key]) + t('designInfo.tipsUseSort'))
           }
         }
         let ratioIndex = 0;
@@ -949,14 +951,14 @@ const checkPropInfo = (info) => {
               if (str === null || str === undefined || str === -1) {
                 str = ''
               }
-              console.log("langList[k]",langList[k])
-              if(langList[k].linkChar && linkChar != ','){
-                linkChar =  langList[k]
+              console.log("langList[k]", langList[k])
+              if (langList[k].linkChar && linkChar != ',') {
+                linkChar = langList[k]
               }
               langLabel.push(tmpValue)
             }
           }
-          if(langLabel.length > 0){
+          if (langLabel.length > 0) {
             mergeLabel.push(langLabel.join(linkChar))
           }
 
@@ -970,21 +972,21 @@ const checkPropInfo = (info) => {
                 allRatio += dataInfoArr[k].ratio ? dataInfoArr[k].ratio : 0
                 console.log("allRatio", allRatio)
                 if (allRatio > 100) {
-                  useMessage().notifyError("占比之和不能超过100,实际为：" + allRatio);
+                  useMessage().notifyError(t('designInfo.tipsUseProportion') + ":" + allRatio);
                   that.errorList.push({
                     key: `${key}_${k}`,
-                    message: "占比之和不能超过100，实际为：" + allRatio
+                    message: t('designInfo.tipsUseProportion') + ":" + allRatio
                   })
-                  reject("占比之和不能超过100")
+                  reject(t('designInfo.tipsUseProportion'))
                   return
                 }
                 if (labelInfo.includes(dataInfoArr[k].showLabel)) {
-                  useMessage().notifyError(`${newInfo[key].groupName}中第${labelInfo.length + 1}项重复`);
+                  useMessage().notifyError(`${newInfo[key].groupName} ${labelInfo.length + 1} ${t('designInfo.tipsDuplicate')}`);
                   that.errorList.push({
                     key: `${key}_${k}`,
-                    message: "数据重复"
+                    message: t('designInfo.tipsDuplicate')
                   })
-                  reject("数据重复")
+                  reject(t('designInfo.tipsDuplicate'))
                   return
                 }
               }
@@ -993,12 +995,12 @@ const checkPropInfo = (info) => {
           }
           // 第一次校验
           if (flag && !checked && allRatio < 100) {
-            useMessage().notifyError(`${newInfo[key].groupName} 中占比希望是100%,实际是${allRatio}`);
+            useMessage().notifyError(`${newInfo[key].groupName} ${t('designInfo.tipsUseProportion2')} ${allRatio}`);
             that.errorList.push({
               key: `${key}_${dataInfoArr.length - 1}`,
-              message: "成分不足100%"
+              message: t('designInfo.tipsUseProportion2') + ':' + allRatio
             })
-            reject("成分占比为" + allRatio)
+            reject(t('designInfo.tipsUseProportion2') + ':' + allRatio)
             return
           }
           if (flag && !checked) {
@@ -1037,23 +1039,23 @@ const checkPropInfo = (info) => {
             const infos = newInfo[key].dataInfo;
             for (let j = 1; j < infos.length; j++) {
 
-                outerLoop: for (let i = 0; i < infoList.length; i++) {
-                  const row1 = infoList[i];
-                  if(`${row1.processType}` === `${ newInfo[key].processType}`){
-                    for (let k = 0; k < row1.langMapping.length; k++) {
-                      // 跳过icon 类型，因为没有url
-                      if (infos[j].locale === row1.langMapping[k].locale && showLabel1 === row1.value) {
-                        infos[j].label = row1.langMapping[k].value
-                        break outerLoop;
-                      }
+              outerLoop: for (let i = 0; i < infoList.length; i++) {
+                const row1 = infoList[i];
+                if (`${row1.processType}` === `${newInfo[key].processType}`) {
+                  for (let k = 0; k < row1.langMapping.length; k++) {
+                    // 跳过icon 类型，因为没有url
+                    if (infos[j].locale === row1.langMapping[k].locale && showLabel1 === row1.value) {
+                      infos[j].label = row1.langMapping[k].value
+                      break outerLoop;
                     }
                   }
                 }
+              }
             }
-            console.log("newArr33",infos)
+            console.log("newArr33", infos)
             newInfo[key].dataInfo = infos;
 
-          }else {
+          } else {
             const infoList = washingInfoListByType(newInfo[key].groupType)
             const infos = newInfo[key].dataInfo;
             for (let j = 0; j < infos.length; j++) {
@@ -1068,7 +1070,7 @@ const checkPropInfo = (info) => {
                 }
               }
             }
-            console.log("newArr99",infos)
+            console.log("newArr99", infos)
             newInfo[key].dataInfo = infos;
 
           }
@@ -1084,20 +1086,20 @@ const checkPropInfo = (info) => {
             }
             let mergeLabel = [];
 
-            if(newInfo[key].canInput){
+            if (newInfo[key].canInput) {
               for (let j = 0; j < dataInfoArr.length; j++) {
                 if (dataInfoArr[j].showLabel) {
-                  if(mergeLabel.includes(dataInfoArr[j].showLabel)){
+                  if (mergeLabel.includes(dataInfoArr[j].showLabel)) {
                     useMessage().notifyWarning(`${newInfo[key].groupName}中,第${j + 1}项重复${dataInfoArr[j].showLabel}`)
                   }
                   mergeLabel.push(dataInfoArr[j].showLabel)
                 }
               }
-            }else {
+            } else {
               for (let j = 0; j < langSort.length; j++) {
                 const labelInfo = []
                 for (let k = 0; k < langList.length; k++) {
-                  console.log("newInfo[key].dataInfo[k]",newInfo[key].dataInfo[k])
+                  console.log("newInfo[key].dataInfo[k]", newInfo[key].dataInfo[k])
                   if (langSort[j] === langList[k].locale) {
                     mergeLabel.push(langList[k].value)
                   }
@@ -1110,9 +1112,9 @@ const checkPropInfo = (info) => {
                         useMessage().notifyError(`${newInfo[key].groupName}中第${labelInfo.length + 1}项重复`);
                         that.errorList.push({
                           key: `${key}_${k}`,
-                          message: "数据重复"
+                          message: t('designInfo.tipsDuplicate')
                         })
-                        reject("数据重复")
+                        reject(t('designInfo.tipsDuplicate'))
                         return
                       }
                       labelInfo.push(newInfo[key].dataInfo[k].showLabel)
@@ -1149,9 +1151,9 @@ const checkPropInfo = (info) => {
                     useMessage().notifyError(`${newInfo[key].groupName}中第${labelInfo.length + 1}项重复`);
                     that.errorList.push({
                       key: `${key}_${k}`,
-                      message: "数据重复"
+                      message: t('designInfo.tipsDuplicate')
                     })
-                    reject("数据重复")
+                    reject(t('designInfo.tipsDuplicate'))
                     return
                   }
                   labelInfo.push(newInfo[key].dataInfo[k].showLabel)
@@ -1186,9 +1188,9 @@ const checkPropInfo = (info) => {
                     useMessage().notifyError(`${that.propInfo[tmpKey2].groupName}中第${i + 1}项重复`);
                     that.errorList.push({
                       key: `${tmpKey2}_${0}`,
-                      message: "数据重复"
+                      message: t('designInfo.tipsDuplicate')
                     })
-                    reject("数据重复")
+                    reject(t('designInfo.tipsDuplicate'))
                     return
                   }
                   dis.push(that.propInfo[keys[i]].dataInfo[0].showLabel)
@@ -1239,8 +1241,8 @@ const checkPropInfo = (info) => {
             let resArr = [];
             for (let j = 0; j < newArr.length; j++) {
               newArr[j].label = mergeLabelStr
-              console.log("newArr[j].showLabel",newArr[j].showLabel)
-              if(!newArr[j].showLabel){
+              console.log("newArr[j].showLabel", newArr[j].showLabel)
+              if (!newArr[j].showLabel) {
                 newArr[j].url = ''
               }
               resArr.push({
@@ -1284,7 +1286,7 @@ const getPropInfo = () => {
       that.pageConfig.propOrderByList = that.propOrderByList
       that.pageLoading = ElLoading.service({
         lock: true,
-        text: '数据传输中...',
+        text: t('designInfo.tipsDataTransmitting'),
         background: 'rgba(0,0,0,0.5)'
       })
       // 成功后再获取图片
@@ -1359,6 +1361,7 @@ defineExpose({
   text-orientation: upright; /* 保持文字直立 */
   padding: 6px;
 }
+
 .image-slot {
   display: flex;
   justify-content: center;
@@ -1369,6 +1372,7 @@ defineExpose({
   color: var(--el-text-color-secondary);
   font-size: 10px;
 }
+
 :deep(.el-input__wrapper) {
   position: relative;
 
diff --git a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DynamicPropConfig.vue b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DynamicPropConfig.vue
index 3c7037f..d9a4f56 100644
--- a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DynamicPropConfig.vue
+++ b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/DynamicPropConfig.vue
@@ -49,8 +49,7 @@
               <el-row>
                 <el-col :span="6">
                   <div style="width: 120px;display: flex">
-                    <el-checkbox :disabled="disableInput"
-                      v-model="that.configInfo.canChange">
+                    <el-checkbox :disabled="disableInput"  v-model="that.configInfo.canChange">
                       <span>允许调整数量</span>
                     </el-checkbox>
                   </div>
@@ -58,8 +57,7 @@
 
                 <el-col :span="6">
                   <div style="width: 120px;display: flex">
-                    <el-checkbox :disabled="disableInput"
-                                 v-model="that.configInfo.canInput">
+                    <el-checkbox :disabled="disableInput"  v-model="that.configInfo.canInput">
                       <span>允许输入值</span>
                     </el-checkbox>
                   </div>
@@ -71,8 +69,7 @@
                     <div style="display:flex;">
                       <div>变量链接符</div>
                       <div>
-                        <el-input v-model="that.configInfo.linkChar" clearable maxlength="6"
-                                  placeholder="请输入连接符" show-word-limit/>
+                        <el-input v-model="that.configInfo.linkChar" clearable maxlength="6"  placeholder="请输入连接符" show-word-limit/>
                       </div>
                       <el-button @click="that.configInfo.linkChar = '<br/>'">换行</el-button>
                     </div>
@@ -153,8 +150,7 @@
                 </el-table-column>
                 <el-table-column label="语言" width="180" v-if="that.configInfo.multiLanguage">
                   <template #default="scope">
-                    <el-select v-model="that.configInfo.pointList[scope.$index].dataInfo.locale"
-                               placeholder="请选择语言标识">
+                    <el-select v-model="that.configInfo.pointList[scope.$index].dataInfo.locale"   placeholder="请选择语言标识">
                       <el-option
                         v-for="dict in languageOptions"
                         :key="`${dict.value}`"
diff --git a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/node/ShapeImageNode.vue b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/node/ShapeImageNode.vue
index 5549ce6..9b9a7a8 100644
--- a/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/node/ShapeImageNode.vue
+++ b/hangtag-ui/hangtag-ui-front/src/components/DraftDesign/components/node/ShapeImageNode.vue
@@ -3,14 +3,15 @@
   <div
     :id="cellInfo.id"
     class="node-content"
-   :class="{
+    :class="{
       'node-content-group' : cellInfo.editMode && cellInfo.propGroupId,
       'node-content-tips' :  cellInfo.editMode && !cellInfo.style.shape.href
     }"
     :title="cellInfo.propGroupName"
     v-reSize="changSize">
 
-    <img v-if="cellInfo.style.shape.href"
+    <img
+      v-if="cellInfo.style.shape.href"
       :src="cellInfo.style.shape.href" x="0" y="0"
       style="width: 100%;height: 100%;"
       :style="{
@@ -65,7 +66,7 @@ export default defineComponent({
     svgStyle() {
       const res = {
         borderRadius: '',
-        backgroundColor : this.cellInfo.style.shape.fillColor ||  "",
+        backgroundColor: this.cellInfo.style.shape.fillColor || "",
         width: `1000px`,
         height: `1000px`,
         transform: ''
@@ -200,7 +201,7 @@ export default defineComponent({
     setInput(val: boolean) {
     },
     changSize(size: any) {
-      if(!size){
+      if (!size) {
         return;
       }
       this.sizeWInfo.width = size.width;
@@ -283,19 +284,19 @@ export default defineComponent({
           this.nodeInfo.store.data.data = this.cellInfo
         }
       }, 300)
-      this.cellInfo.editMode  = getDraftDesignState();
-      if(this.cellInfo.editMode && this.cellInfo.propGroupId){
+      this.cellInfo.editMode = getDraftDesignState();
+      if (this.cellInfo.editMode && this.cellInfo.propGroupId) {
         const showRandomGroupColor = configInfo.LK_SHOW_RANDOM_GROUP_COLOR()
-        if(!showRandomGroupColor){
-          setTimeout(()=>{
+        if (!showRandomGroupColor) {
+          setTimeout(() => {
             const [type, id] = this.cellInfo.propGroupId.split("_")
-            if(id){
+            if (id) {
               document.getElementById(this.cellInfo.id)?.style.setProperty(
                 "--lk-prop-group-color",
                 `#${id}`
               );
             }
-          },100)
+          }, 100)
         }
       }
       this.changeFontSize();
diff --git a/hangtag-ui/hangtag-ui-front/src/components/ProductInfoList/config.data.ts b/hangtag-ui/hangtag-ui-front/src/components/ProductInfoList/config.data.ts
index a2b7e5c..54b3462 100644
--- a/hangtag-ui/hangtag-ui-front/src/components/ProductInfoList/config.data.ts
+++ b/hangtag-ui/hangtag-ui-front/src/components/ProductInfoList/config.data.ts
@@ -1,6 +1,7 @@
 import type { CrudSchema } from '@/hooks/web/useCrudSchemas'
 import { dateFormatter } from '@/utils/formatTime'
-
+import {useI18n} from "@/hooks/web/useI18n";
+const {t} = useI18n()
 // 表单校验
 export const rules = reactive({
   name: [required],
@@ -15,33 +16,33 @@ const crudSchemas = reactive<CrudSchema[]>([
     isTable:false
   },
   {
-    label: '产品编码',
+    label: t('productDialogList.colLabelCode'),
     field: 'code',
     isSearch: true,
   },
   {
-    label: '产品类型',
+    label: t('productDialogList.colLabelType'),
     field: 'productTypeId',
     isSearch: true,
   },
   {
-    label: '封面',
+    label:  t('productDialogList.colLabelCover'),
     field: 'cover',
     isSearch: false,
   },
   {
-    label: '产品名称',
+    label: t('productDialogList.colLabelName'),
     field: 'name',
     isSearch: true,
   },
 
   {
-    label: '备注',
+    label: t('productDialogList.colLabelRemark'),
     field: 'remark',
     isSearch: false,
   },
   {
-    label: '详情描述',
+    label:  t('productDialogList.colLabelDetails'),
     field: 'details',
     isSearch: false,
   }
diff --git a/hangtag-ui/hangtag-ui-front/src/components/ProductInfoList/index.vue b/hangtag-ui/hangtag-ui-front/src/components/ProductInfoList/index.vue
index 7de29a2..1ec4355 100644
--- a/hangtag-ui/hangtag-ui-front/src/components/ProductInfoList/index.vue
+++ b/hangtag-ui/hangtag-ui-front/src/components/ProductInfoList/index.vue
@@ -21,10 +21,8 @@
           <!-- 新增等操作按钮 -->
           <template #productTypeId="{data}">
             <div>
-              <el-select class="w-full min-w-[200px]" v-model="data.productTypeId" clearable
-                         placeholder="请选择产品类型">
-                <el-option v-for="item in that.typeList" :key="item.id" :label="item.label"
-                           :value="item.id"/>
+              <el-select class="w-full min-w-[200px]" v-model="data.productTypeId" clearable  placeholder="Please select the product type">
+                <el-option v-for="item in that.typeList" :key="item.id" :label="item.label" :value="item.id"/>
               </el-select>
             </div>
           </template>
@@ -87,7 +85,7 @@ const emit = defineEmits(['update:modelValue', 'update:visible', 'submit']) // 
 
 const {t} = useI18n() // 国际化
 
-const dialogTitle = ref('产品列表') // 弹窗的标题
+const dialogTitle = ref(t("productDialogList.title")) // 弹窗的标题
 
 const props = defineProps({
   modelValue: {
diff --git a/hangtag-ui/hangtag-ui-front/src/locales/en.ts b/hangtag-ui/hangtag-ui-front/src/locales/en.ts
index 4760a26..8371188 100644
--- a/hangtag-ui/hangtag-ui-front/src/locales/en.ts
+++ b/hangtag-ui/hangtag-ui-front/src/locales/en.ts
@@ -461,8 +461,134 @@ export default {
     preview: 'Preivew'
   },
   designInfo: {
-    auditSubmitText: 'Approve the Draft',
-    auditTips: 'This manuscript is only used for content verification and will not be used as the final printed manuscript;',
-    cancelText: 'Cancel',
+    "auditSubmitText": "Submit for Review",
+    "auditTips": "This draft is only for content verification and is not the final print file.",
+    "cancelText": "Cancel",
+    "titlePreview": "Preview",
+    "titleUpdateDesign": "Update",
+    "titleSyncUpdateDesign": 'sync update design',
+    "tipsInfo": 'for reference only',
+    "tipsUseInfo": "Hold down the left mouse button to drag, hold Ctrl and scroll the mouse wheel to zoom in and out.",
+    "titleProportion": "Proportion",
+    "tipsUploadError": "Upload failed due to a network interruption. Please try again.",
+    "tipsVarCount": "At least one variable is required.",
+    "tipsVarMaxCount": "Maximum quantity",
+    "tipsVarMaxGroup": "A maximum of 16 groups can be added.",
+    "tipsDelGroup": "Do you want to delete this group of variables?",
+    "tipsNotData": "Data does not exist.",
+    "tipsNotDesignData": "The product is not associated with design draft data.",
+    "tipsUseSort": "Ingredients must be listed in descending order of their content proportion.",
+    "tipsUseProportion": "The total proportion cannot exceed 100. The actual value is",
+    "tipsUseProportion2": "The desired proportion is 100%, but the actual value is",
+    "tipsDuplicate": "Duplicate",
+    "tipsDataTransmitting": "Data transmitting..."
   },
+  "createOrder": {
+    "title1": "Order Information",
+    "labelOrderCode": "Order Code",
+    "labelOrderStatus": "Order Status",
+    "labelUserName": "User Name",
+    "labelBizDate": "Creation Date (GMT+8)",
+    "labelCustomerId": "Customer ID",
+    "labelCompanyName": "Company",
+    "labelBrand": "Brand",
+    "labelPlanDate": "Delivery Date",
+    "labelPlanDateTips": "Selecting batch delivery allows separate delivery dates for products.",
+    "labelPlanDateSplit": "Batch Delivery",
+    "labelContactName": "Contact Person",
+    "placeContactName": "Please enter the contact person's name.",
+    "labelPhone": "Mobile Number",
+    "placePhone": "Please enter the mobile number.",
+    "labelTel": "Telephone Number",
+    "placeTel": "Please enter the telephone number.",
+    "labelFax": "Fax",
+    "placeFax": "Please enter the fax number.",
+    "labelContractCode": "ContractCode",
+    "placeContractCode": "Please enter the contract code.",
+    "labelRetailerCode": "RetailerNO",
+    "placeRetailerCode": "Please enter the retailer order number.",
+    "labelCurrency": "Currency",
+    "placeCurrency": "Please select the settlement currency.",
+    "labelOrderFollowerUser": "FollowerUser",
+    "placeOrderFollowerUser": "Please select a sales representative.",
+    "labelRemarks": "Remarks",
+    "placeRemarks": "Please enter remarks.",
+    "titleEmail": "Email Notification",
+    "labelEmail": "Contact Email",
+    "placeEmail": "Please enter the contact email.",
+    "btnAddEmail": "Add",
+    "btnDelEmail": "Delete",
+    "titleInvoice": "Invoice Information",
+    "btnInvoice": "Manage Invoice Information",
+    "labelInvoiceCode": "Invoice Title",
+    "placeInvoiceCode": "Please enter the invoice title.",
+    "labelInvoiceName": "Invoice Name",
+    "placeInvoiceName": "Please enter the invoice name.",
+    "labelInvoiceAddress": "Invoice Address",
+    "placeInvoiceAddress": "Please enter the invoice address.",
+    "labelInvoiceRemarks": "Invoice Remarks",
+    "placeInvoiceRemarks": "Please enter the invoice remarks.",
+    "titleAddress": "Shipping Information",
+    "btnEditAddress": "Manage Shipping Address",
+    "labelAddressId": "Shipping Address",
+    "placeAddressId": "Please select a shipping address.",
+    "labelDeliveryAddress": "Detailed Address",
+    "placeDeliveryAddress": "Please enter the detailed address.",
+    "labelDeliveryRemark": "Delivery Remarks",
+    "placeDeliveryRemark": "Please enter delivery remarks.",
+    "btnCreate": "Create",
+    "btnNext": "Next",
+    "btnPrevStep": "Prev Step",
+    "ruleMsgContactName": "Contact person's name cannot be empty.",
+    "ruleMsgBrandId": "Brand cannot be empty.",
+    "ruleMsgContractCode": "Customer purchase number cannot be empty.",
+    "ruleMsgPhone": "Contact mobile number cannot be empty.",
+    "ruleMsgPhoneError": "Please enter a valid mobile number.",
+    "ruleMsgEmail": "Please enter an email address.",
+    "tipsBaseInfo": "Please complete the basic information first.",
+    "tipsAddProduct": "Please add a product.",
+    "tipsLoadingEditing": "Successfully modified...",
+    "tipsLoadingOrderCompleted": "Order successfully placed...",
+    "skuTitleProductList": "Order Product List",
+    "skuTitleProductDetails": "Order Product Details",
+    "labelSkuOrderQty": "Order Quantity",
+    "labelSkuPreview": "Preview",
+    "labelSkuSpecSizeThk": "Thickness",
+    "labelSkuSpecMaterial": "Material",
+    "labelSkuMainColor": "Color Style",
+    "skuColTitleCount": "Quantity",
+    "skuColTitleMainPicture": "Main Picture",
+    "batchOptionsTips": "Confirm bulk quantity settings.",
+    "batchOptionsFillAll": "Fill All",
+    "batchOptionsAppend": "Append",
+    "batchOptionsDecrease": "Decrease",
+    "batchOptionsApply": "Confirm bulk application?",
+    "batchOptionsFillEmptyRow": "Fill Empty Rows",
+    "batchOptionsReplace": "Replace",
+    "skuColTitleSize": "Size",
+    "placeSkuSizeUse": "Separate multiple sizes with spaces.",
+    "placeSkuInputSize": "Please enter sizes.",
+    "btnAddProduct": "Add Product",
+    "btnDel": "Delete",
+    "labelColProductCode": "Product Code",
+    "labelColProductName": "Product Name",
+    "labelColProducer": "Producer",
+    "labelColProductDetails": "Product Description",
+    "labelColProductPicture": "Product Picture",
+    "labelColProductUnit": "Unit of Quantity",
+    "labelColDeliveryDate": "Delivery Date",
+    "labelColOrderQty": "Order Quantity",
+    "tipsDuplicateSkipped": "Duplicate products skipped.",
+    "tipsAppendSuccess": "Added successfully.",
+    "btnAddSku": "Add SKU"
+  },
+  "productDialogList": {
+    "title": "Product List",
+    "colLabelCode": "Product Code",
+    "colLabelType": "Product Type",
+    "colLabelCover": "Cover",
+    "colLabelName": "Product Name",
+    "colLabelRemark": "Remarks",
+    "colLabelDetails": "Details Description"
+  }
 }
diff --git a/hangtag-ui/hangtag-ui-front/src/locales/zh-CN.ts b/hangtag-ui/hangtag-ui-front/src/locales/zh-CN.ts
index eed7a1e..7c2fd5f 100644
--- a/hangtag-ui/hangtag-ui-front/src/locales/zh-CN.ts
+++ b/hangtag-ui/hangtag-ui-front/src/locales/zh-CN.ts
@@ -458,6 +458,133 @@ export default {
     auditSubmitText: '批稿',
     auditTips: '此稿件仅仅作为核对内容使用用，不作为最终印刷稿件;',
     cancelText: '取消',
+    titlePreview: '预览',
+    titleUpdateDesign: '更新',
+    titleSyncUpdateDesign: '实时更新',
+    tipsInfo: '仅供参考', // for reference only
+    tipsUseInfo: '按住鼠标左键进行拖动，按住Ctrl 滚动鼠标进行缩小放放大',
+    titleProportion: '占比',
+    tipsUploadError: '上传过程中网络中断上传失败，请重试',
+    tipsVarCount: '至少需要一个变量',
+    tipsVarMaxCount: '最大数量',
+    tipsVarMaxGroup: '最多添加16组',
+    tipsDelGroup: '是否删除该组变量',
+    tipsNotData: '数据不存在',
+    tipsNotDesignData: '商品未关联设计图稿数据',
+    tipsUseSort: '违反含有量的成分比例,由大到小依序排列',
+    tipsUseProportion: '占比总和不能超过100,实际为',
+    tipsUseProportion2: '中占比希望是100%,实际是',
+    tipsDuplicate: '重复',
+    tipsDataTransmitting: '数据传输中...',
+  },
+  createOrder: {
+    title1: '订单信息',
+    labelOrderCode: '订单编码',
+    labelOrderStatus: '订单状态',
+    labelUserName: '用户名称',
+    labelBizDate: '创建日期 (GMT+8)',
+    labelCustomerId: '客户号',
+    labelCompanyName: '企业公司',
+    labelBrand: '品牌',
+    labelPlanDate: '交货日期',
+    labelPlanDateTips: '选择分批交货，允许分别设置产品的交期',
+    labelPlanDateSplit: '分批交货',
+    labelContactName: '联系人',
+    placeContactName: '请填写联系人名称',
+    labelPhone: '手机号码',
+    placePhone: '请填写手机号码',
+    labelTel: '电话号码',
+    placeTel: '请填写电话号码',
+    labelFax: '传真',
+    placeFax: '请填写传真号码',
+    labelContractCode: '客户采购编号',
+    placeContractCode: '请填写客户采购编号',
+    labelRetailerCode: '零售商单号',
+    placeRetailerCode: '请填写零售商单号',
+    labelCurrency: '结算币种',
+    placeCurrency: '请选择结算币种',
+    labelOrderFollowerUser: '业务员',
+    placeOrderFollowerUser: '请选择业务员',
+    labelRemarks: '备注',
+    placeRemarks: '请填写备注',
+    titleEmail: '电子邮件通知',
+    labelEmail: '联系邮箱',
+    placeEmail: '请填写联系邮箱',
+    btnAddEmail: '增加',
+    btnDelEmail: '删除',
+    titleInvoice: '发票信息',
+    btnInvoice: '管理发票信息',
+    labelInvoiceCode: '发票抬头',
+    placeInvoiceCode: '请填写发票抬头',
+    labelInvoiceName: '发票名称',
+    placeInvoiceName: '请填写发票名称',
+    labelInvoiceAddress: '发票地址',
+    placeInvoiceAddress: '请填写发票地址',
+    labelInvoiceRemarks: '发票备注',
+    placeInvoiceRemarks: '请填写发票备注',
+    titleAddress: '收货信息',
+    btnEditAddress: '管理收货地址',
+    labelAddressId: '收货地址',
+    placeAddressId: '请选择收货地址',
+    labelDeliveryAddress: '详细地址',
+    placeDeliveryAddress: '请填写详细地址',
+    labelDeliveryRemark: '送货备注',
+    placeDeliveryRemark: '请填写送货备注',
+    btnCreate: '创建',
+    btnNext: '下一步',
+    btnPrevStep: '上一步',
+    ruleMsgContactName: '联系人名称不能为空',
+    ruleMsgBrandId: '品牌不能为空',
+    ruleMsgContractCode: '客户采购编号不能为空',
+    ruleMsgPhone: '联系人手机号不能为空',
+    ruleMsgPhoneError: '请输入正确的手机号码',
+    ruleMsgEmail: '请输入邮箱',
+    tipsBaseInfo: '请先完善基本信息',
+    tipsAddProduct: '请添加产品',
+    tipsLoadingEditing: '修改成功...',
+    tipsLoadingOrderCompleted: '下单成功...',
+    // sku
+    skuTitleProductList: '订单产品列表',
+    skuTitleProductDetails: '订单产品明细',
+    labelSkuOrderQty: '订货数量',
+    labelSkuPreview: '预览',
+    labelSkuSpecSizeThk: '厚度',
+    labelSkuSpecMaterial: '材质',
+    labelSkuMainColor: '颜色风格',
+    skuColTitleCount: '数量',
+    skuColTitleMainPicture: '主图',
+    batchOptionsTips: '确定批量设置数量',
+    batchOptionsFillAll: '填充全部',
+    batchOptionsAppend: '追加',
+    batchOptionsDecrease: '减少',
+    batchOptionsApply: '确定批量应用吗?',
+    batchOptionsFillEmptyRow: '填充空值行',
+    batchOptionsReplace: '覆盖',
+    skuColTitleSize: '尺码',
+    placeSkuSizeUse: '多个使用空格间隔',
+    placeSkuInputSize: '请填写码数',
+    btnAddProduct: '添加产品',
+    btnDel: '删除',
+    labelColProductCode: '产品编码',
+    labelColProductName: '产品名称',
+    labelColProducer: '生产者',
+    labelColProductDetails: '产品描述',
+    labelColProductPicture: '产品图片',
+    labelColProductUnit: '数量单位',
+    labelColDeliveryDate: '交货日期',
+    labelColOrderQty: '订货数量',
+    tipsDuplicateSkipped: '已跳过重复产品',
+    tipsAppendSuccess: '添加成功',
+    btnAddSku: '添加SKU',
+  },
+  productDialogList:{
+    title: '产品列表',
+    colLabelCode: '产品编码',
+    colLabelType: '产品类型',
+    colLabelCover: '封面',
+    colLabelName: '产品名称',
+    colLabelRemark: '备注',
+    colLabelDetails: '详情描述',
   },
   'OAuth 2.0': 'OAuth 2.0' // 避免菜单名是 OAuth 2.0 时，一直 warn 报错
 }
diff --git a/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/ProductItem1.vue b/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/ProductItem1.vue
index bf97f23..f0cf975 100644
--- a/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/ProductItem1.vue
+++ b/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/ProductItem1.vue
@@ -17,10 +17,10 @@
       </div>
 
       <el-form :model="formData" label-width="140px">
-        <el-form-item prop="orderQty" label="订货数量">
+        <el-form-item prop="orderQty" :label="t('createOrder.labelSkuOrderQty')">
           <el-input-number v-model="formData.orderQty" @change="change"/>
         </el-form-item>
-        <el-form-item label="预览" v-if="previewUrl">
+        <el-form-item :label="t('createOrder.labelSkuPreview')" v-if="previewUrl">
           <div class="cursor-pointer">
             <el-image
               fit="contain"
@@ -34,17 +34,17 @@
             {{ getSizeInfo }}
           </div>
         </el-form-item>
-        <el-form-item label="厚度" v-if="formData.specInfo && formData.specInfo.specSizeThk">
+        <el-form-item :label="t('createOrder.labelSkuSpecSizeThk')"   v-if="formData.specInfo && formData.specInfo.specSizeThk">
           <div>
             {{ formData.specInfo.specSizeThk }}
           </div>
         </el-form-item>
-        <el-form-item label="材质" v-if="formData.specInfo && formData.specInfo.specMaterial">
+        <el-form-item :label="t('createOrder.labelSkuSpecMaterial')"  v-if="formData.specInfo && formData.specInfo.specMaterial">
           <div>
             {{ formData.specInfo.specMaterial }}
           </div>
         </el-form-item>
-        <el-form-item label="颜色风格" v-if="formData.specInfo && formData.specInfo.mainColor">
+        <el-form-item :label="t('createOrder.labelSkuMainColor')"  v-if="formData.specInfo && formData.specInfo.mainColor">
           <div>
             {{ formData.specInfo.mainColor }}
           </div>
@@ -75,7 +75,7 @@ import {reactive, useModel, watch} from 'vue'
 import DesignPreviewDialog from "@/components/DraftDesign/components/DesignPreviewDialog.vue";
 import {ShapeType} from "@/components/DraftDesign/config";
 import {createImageViewer} from "@/components/ImageViewer";
-
+const {t} = useI18n() // 国际化
 const emit = defineEmits(['update:productInfo', 'delItem', 'change'])
 
 const designPreviewDialogRef = ref(null);
@@ -112,7 +112,7 @@ const getValue = (item:any) => {
 }
 const formData = useModel(props, 'productInfo', emit)
 const delItem = () => {
-  useMessage().confirm('确定删除吗？').then(() => {
+  useMessage().confirm(t("delDataMessage")).then(() => {
     emit("delItem", formData.value)
   })
 }
diff --git a/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/ProductItem2.vue b/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/ProductItem2.vue
index 24b4875..dd0310f 100644
--- a/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/ProductItem2.vue
+++ b/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/ProductItem2.vue
@@ -11,7 +11,7 @@
            </div>
           </template>
         </el-table-column>
-        <el-table-column width="84px" label="主图">
+        <el-table-column width="84px" :label="t('createOrder.skuColTitleMainPicture')">
           <template #default="scope">
             <div class="flex items-center">
               <el-image
@@ -23,10 +23,10 @@
           </template>
         </el-table-column>
 
-        <el-table-column width="300px" label="数量">
+        <el-table-column width="300px" >
           <template #header>
           <div class="flex">
-            <div>数量<span class="text-xs">({{totalCount}})</span></div>
+            <div>{{ t('createOrder.skuColTitleCount') }}<span class="text-xs">({{totalCount}})</span></div>
             <div><el-input-number v-model="that.fullCount" v-show="that.tableList.length > 1" @change="fullQty"/>  </div>
           </div>
           </template>
@@ -55,7 +55,6 @@ import {ElOption, ElSelect} from "element-plus";
 import {useEmitt} from "@/hooks/web/useEmitt";
 import {PRODUCT_DEL_ROW_EVENT, STEP0_FINISH_EVENT} from "@/constants/EmitEventName";
 import {useResetFields} from "@/hooks/ext";
-
 const emit = defineEmits(['update:productInfo', 'delItem', 'change'])
 const { t } = useI18n()
 
@@ -91,10 +90,10 @@ watch(that.tableList, (newVal)=>{
 const formData = useModel(props, 'productInfo', emit)
 const delItem = () => {
   if(that.selectRow.length === 0){
-    useMessage().warning("请选择要删除的项");
+    useMessage().warning(t('delMessage'));
     return;
   }
-  useMessage().confirm('确定删除吗？').then(() => {
+  useMessage().confirm(t('delDataMessage')).then(() => {
     let key = [];
     for (let i = 0; i < that.selectRow.length; i++) {
       key.push(that.selectRow[i].key)
@@ -107,22 +106,22 @@ const fullQty = (val) => {
 
   const selectedValue = ref<string | number>(1); // 用于绑定选中的值
   ElMessageBox({
-    title: '确定批量设置数量 ' + val + ' 吗？',
+    title: t('createOrder.batchOptionsTips') + val + ' ？',
     confirmButtonText: t('common.ok'),
     cancelButtonText: t('common.cancel'),
     type: 'warning',
     message: () =>
       h(ElSelect, {
         modelValue: selectedValue.value,
-        placeholder: '请选择',
+        placeholder: 'Please Select',
         style: { width: '300px' },
         'onUpdate:modelValue': (value: string | number) => {
           selectedValue.value = value;
         },
       }, [
-        h(ElOption, { label: '填充全部', value: 1 }),
-        h(ElOption, { label: '追加', value: 2 }),
-        h(ElOption, { label: '减少', value: 3 }),
+        h(ElOption, { label:  t('createOrder.batchOptionsFillAll'), value: 1 }),
+        h(ElOption, { label: t('createOrder.batchOptionsAppend'), value: 2 }),
+        h(ElOption, { label: t('createOrder.batchOptionsDecrease'), value: 3 }),
         // 添加更多选项
       ]),
   }).then(() => {
diff --git a/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/ProductItem3.vue b/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/ProductItem3.vue
index e51f3e6..636e193 100644
--- a/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/ProductItem3.vue
+++ b/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/ProductItem3.vue
@@ -12,7 +12,7 @@
            </div>
           </template>
         </el-table-column>
-        <el-table-column width="84px" label="主图">
+        <el-table-column width="84px"  :label="t('createOrder.skuColTitleMainPicture')">
           <template #default="scope">
             <div class="flex items-center">
               <el-image
@@ -23,15 +23,15 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column width="300px" label="尺码">
+        <el-table-column width="300px" >
           <template #header>
             <div class="flex">
-              <div>尺码</div>
+              <div>{{ t('createOrder.skuColTitleSize') }}</div>
               <div>
                <el-input
                  v-model="that.fullSize"
                  v-show="that.tableList.length > 1"
-                         placeholder="多个使用空格间隔"
+                         :placeholder="t('createOrder.placeSkuSizeUse')"
                          @change="fullChangeSize"/>
               </div>
             </div>
@@ -43,16 +43,18 @@
               :fetch-suggestions="querySearch"
               clearable
               class="inline-input w-50"
-              placeholder="输入码数"
+              :placeholder="t('createOrder.placeSkuInputSize')"
               @select="handleSelect"
             />
 
           </template>
         </el-table-column>
-        <el-table-column width="300px" label="数量">
+        <el-table-column width="300px" >
           <template #header>
           <div class="flex">
-            <div>数量<span class="text-xs">({{totalCount}})</span></div>
+            <div>
+              <span>{{('createOrder.skuColTitleCount')}}</span>
+              <span class="text-xs">({{totalCount}})</span></div>
             <div><el-input-number v-model="that.fullCount" v-show="that.tableList.length > 1" @change="fullQty"/>  </div>
           </div>
           </template>
@@ -84,9 +86,7 @@
 // 尺码唛
 //@ts-nocheck
 import {reactive, useModel, watch} from 'vue'
-import DesignPreviewDialog from "@/components/DraftDesign/components/DesignPreviewDialog.vue";
-import {ShapeType} from "@/components/DraftDesign/config";
-import {createImageViewer} from "@/components/ImageViewer";
+
 import {useI18n} from "@/hooks/web/useI18n";
 import {ElOption, ElSelect} from "element-plus";
 import {useEmitt} from "@/hooks/web/useEmitt";
@@ -128,10 +128,10 @@ watch(that.tableList, (newVal)=>{
 const formData = useModel(props, 'productInfo', emit)
 const delItem = () => {
   if(that.selectRow.length === 0){
-    useMessage().warning("请选择要删除的项");
+    useMessage().warning(t("delNoData"));
     return;
   }
-  useMessage().confirm('确定删除吗？').then(() => {
+  useMessage().confirm(t("delDataMessage")).then(() => {
     let key = [];
     for (let i = 0; i < that.selectRow.length; i++) {
       key.push(that.selectRow[i].key)
@@ -143,22 +143,22 @@ const delItem = () => {
 const fullChangeSize = ()=>{
   const selectedValue = ref<string | number>(1); // 用于绑定选中的值
   ElMessageBox({
-    title: '确定批量设置吗？',
+    title: t('createOrder.batchOptionsApply'),
     confirmButtonText: t('common.ok'),
     cancelButtonText: t('common.cancel'),
     type: 'warning',
     message: () =>
       h(ElSelect, {
         modelValue: selectedValue.value,
-        placeholder: '请选择',
+        placeholder: 'Please Select',
         style: { width: '300px' },
         'onUpdate:modelValue': (value: string | number) => {
           selectedValue.value = value;
         },
       }, [
-        h(ElOption, { label: '填充空值行', value: 1 }),
-        h(ElOption, { label: '追加', value: 2 }),
-        h(ElOption, { label: '覆盖', value: 3 }),
+        h(ElOption, { label: t('createOrder.batchOptionsFillEmptyRow'), value: 1 }),
+        h(ElOption, { label: t('createOrder.batchOptionsAppend') , value: 2 }),
+        h(ElOption, { label: t('createOrder.batchOptionsReplace'), value: 3 }),
         // 添加更多选项
       ]),
   }).then(() => {
@@ -194,22 +194,22 @@ const fullQty = (val) => {
 
   const selectedValue = ref<string | number>(1); // 用于绑定选中的值
   ElMessageBox({
-    title: '确定批量设置数量 ' + val + ' 吗？',
+    title:  t('createOrder.batchOptionsTips') + val + ' ？',
     confirmButtonText: t('common.ok'),
     cancelButtonText: t('common.cancel'),
     type: 'warning',
     message: () =>
       h(ElSelect, {
         modelValue: selectedValue.value,
-        placeholder: '请选择',
+        placeholder:  'Please Select',
         style: { width: '300px' },
         'onUpdate:modelValue': (value: string | number) => {
           selectedValue.value = value;
         },
       }, [
-        h(ElOption, { label: '填充全部', value: 1 }),
-        h(ElOption, { label: '追加', value: 2 }),
-        h(ElOption, { label: '减少', value: 3 }),
+        h(ElOption, { label:  t('createOrder.batchOptionsFillAll'), value: 1 }),
+        h(ElOption, { label: t('createOrder.batchOptionsAppend'), value: 2 }),
+        h(ElOption, { label: t('createOrder.batchOptionsDecrease'), value: 3 }),
         // 添加更多选项
       ]),
   }).then(() => {
@@ -237,7 +237,7 @@ const addRow=(row={})=>{
     for (let i = 0; i < that.tableList.length; i++) {
       if(that.tableList[i].labelSize === row.labelSize){
         // 重复的尺码
-        useMessage().notifyWarning(`第${i}行,已跳过重复尺码${row.labelSize} `)
+        useMessage().notifyWarning(`Row:${i},Duplicate sizes have been skipped:${row.labelSize} `)
         return
       }
     }
diff --git a/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/ProductList.vue b/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/ProductList.vue
index 08458a1..1422bed 100644
--- a/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/ProductList.vue
+++ b/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/ProductList.vue
@@ -2,54 +2,61 @@
 
   <div>
     <div>
-      <el-button type="primary" @click="addProduct">添加商品</el-button>
-      <el-button type="danger" @click="delProduct">删除</el-button>
+      <el-button type="primary" @click="addProduct">
+        {{ t('createOrder.btnAddProduct') }}
+      </el-button>
+      <el-button type="danger" @click="delProduct"> {{ t('createOrder.btnDel') }}</el-button>
     </div>
     <ProductInfoList ref="productInfoListRef" @submit="submit"/>
-    <el-table ref="tableRef"
-              highlight-current-row
-              stripe
-              :data="that.tableData"
-              border
-              @row-click="rowChange"
-              style="width: 100%">
-      <el-table-column prop="productCode" label="产品编码"/>
-      <el-table-column prop="productName" label="产品名称"/>
-      <el-table-column prop="producer" label="生产者"/>
-      <el-table-column prop="details" label="产品描述"/>
-      <el-table-column prop="cover" label="产品图片">
+    <el-table
+      ref="tableRef"
+      highlight-current-row
+      stripe
+      :data="that.tableData"
+      border
+      @row-click="rowChange"
+      style="width: 100%">
+      <el-table-column prop="productCode" :label="t('createOrder.labelColProductCode')"/>
+      <el-table-column prop="productName" :label="t('createOrder.labelColProductName')"/>
+      <el-table-column prop="producer" :label="t('createOrder.labelColProducer')"/>
+      <el-table-column prop="details" :label="t('createOrder.labelColProductDetails')"/>
+      <el-table-column prop="cover" :label="t('createOrder.labelColProductPicture')">
         <template #default="scope">
-          <el-image v-if="scope.row.cover"
-                    style="width: 34px; height: 34px"
-                    :src="scope.row.cover"
-                    :preview-src-list="[scope.row.cover]"
+          <el-image
+            v-if="scope.row.cover"
+            style="width: 34px; height: 34px"
+            :src="scope.row.cover"
+            :preview-src-list="[scope.row.cover]"
           />
           <span v-else>-</span>
         </template>
       </el-table-column>
-      <el-table-column prop="unit" label="数量单位">
+      <el-table-column prop="unit" :label="t('createOrder.labelColProductUnit')">
         <template #default="scope">
-          <el-select v-model="scope.row.unit" placeholder="请选择">
-            <el-option v-for="item in unitList" :key="item.value" :label="item.label"
-                       :value="item.value"/>
+          <el-select v-model="scope.row.unit" placeholder='Please Select'>
+            <el-option
+              v-for="item in unitList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"/>
           </el-select>
         </template>
       </el-table-column>
-      <el-table-column prop="deliveryDate" label="交货日期" width="200">
+      <el-table-column prop="deliveryDate" :label="t('createOrder.labelColDeliveryDate')"  width="200">
         <template #default="scope">
 
-          <el-date-picker v-if="that.isBatch"
-            :disabledDate="(time)=> {
-                  return time.getTime() < (Date.now() + 8 * 60 * 60 * 1000); }"
+          <el-date-picker
+            v-if="that.isBatch"
+            :disabledDate="(time)=> { return time.getTime() < (Date.now() + 8 * 60 * 60 * 1000); }"
             v-model="scope.row.deliveryDate"
             type="datetime"
-            placeholder="选择日期"/>
+            placeholder="Please Select Date"/>
           <div v-else>
-            {{that.planDate}}
+            {{ that.planDate }}
           </div>
         </template>
       </el-table-column>
-      <el-table-column prop="orderQty" label="订货数量"/>
+      <el-table-column prop="orderQty" :label="t('createOrder.labelColOrderQty')"/>
     </el-table>
 
   </div>
@@ -61,7 +68,7 @@ import {useEmitt} from "@/hooks/web/useEmitt";
 import {PRODUCT_DEL_ROW_EVENT, STEP0_FINISH_EVENT} from "@/constants/EmitEventName";
 import {formatDate} from "@/utils/formatTime";
 
-
+const {t} = useI18n() // 国际化
 const emit = defineEmits(['rowClick'])
 const tableRef = ref();
 const that = reactive({
@@ -75,8 +82,8 @@ const that = reactive({
   },
 })
 
-const handleEvent = (data:any) => {
-  if(data){
+const handleEvent = (data: any) => {
+  if (data) {
     that.filterParam.brandId = data.brandId;
     that.isBatch = data.isBatch;
     that.plansenddate = data.plansenddate;
@@ -94,12 +101,12 @@ const addProduct = () => {
   productInfoListRef.value.openDialog(that.filterParam)
 }
 const delProduct = () => {
-  useMessage().confirm('确定删除吗？').then(() => {
+  useMessage().confirm(t("delDataMessage")).then(() => {
     that.tableData = that.tableData.filter(item => item.productId !== that.selectRow.productId)
-    useMessage().notifySuccess('删除成功');
+    useMessage().notifySuccess(t("delSuccess"));
     emit('delRow', that.selectRow);
     emitter.emit(PRODUCT_DEL_ROW_EVENT, that.selectRow);
-    if(that.tableData.length > 0){
+    if (that.tableData.length > 0) {
       rowChange(that.tableData[that.tableData.length - 1]);
     }
 
@@ -114,14 +121,14 @@ const submit = (data) => {
 const addRow = (row) => {
   for (let i = 0; i < that.tableData.length; i++) {
     if (that.tableData[i].productId === row.id) {
-      useMessage().notifyError('已跳过重复产品')
+      useMessage().notifyError(t("createOrder.tipsDuplicateSkipped"))
       return
     }
   }
   if (!row.deliveryDate) {
     row.deliveryDate = Date.now() + (24 * 60 * 60 * 1000)
   }
-  if(!that.isBatch){
+  if (!that.isBatch) {
     row.deliveryDate = that.plansenddate;
   }
   // @ts-ignore
@@ -140,7 +147,7 @@ const addRow = (row) => {
     productSkuList: [],
   })
 
-  useMessage().notifySuccess('添加成功')
+  useMessage().notifySuccess(t("createOrder.tipsAppendSuccess"))
   rowChange(that.tableData[that.tableData.length - 1])
 }
 const unitList = [
@@ -176,13 +183,13 @@ const setSelectRow = (row) => {
       break;
     }
   }
-  console.log(" that.tableData", that.tableData)
+
 }
 const getTableData = () => {
   return that.tableData
 }
 const init = (data) => {
-  if(data && data.length > 0){
+  if (data && data.length > 0) {
     that.tableData = data
     rowChange(data[0])
   }
diff --git a/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/ProductSkuList.vue b/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/ProductSkuList.vue
index 3bedf16..f51a0e3 100644
--- a/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/ProductSkuList.vue
+++ b/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/ProductSkuList.vue
@@ -2,7 +2,11 @@
 
   <div>
     <div>
-      <el-button type="primary" v-show="that.templateType === '1' && that.tableData.length > 0" @click="addSku">添加SKU</el-button>
+      <el-button
+        type="primary"
+        v-show="that.templateType === '1' && that.tableData.length > 0"
+        @click="addSku">{{t('createOrder.btnAddSku')}}
+      </el-button>
     </div>
     <div class="flex flex-wrap" v-if="that.templateType === '1'">
       <template v-for="(item,index) in that.tableData" :key="item.key">
@@ -11,27 +15,27 @@
           class="m-2"
           @del-item="delItem"
           :badge="`${index+1}`"
-          v-model:product-info="that.tableData[index]" />
+          v-model:product-info="that.tableData[index]"/>
       </template>
     </div>
     <div class="flex" v-show="that.templateType === '2' && that.tableData.length > 0">
-        <ProductItem2
-          @change="changeList"
-          ref="productItem2Ref"
-          class="m-2"
-          @del-item="delItem"
-          :badge="`${1}`"
-          v-model:product-info="that.tableData[0]" />
+      <ProductItem2
+        @change="changeList"
+        ref="productItem2Ref"
+        class="m-2"
+        @del-item="delItem"
+        :badge="`${1}`"
+        v-model:product-info="that.tableData[0]"/>
     </div>
-<!--   尺码表 -->
+    <!--   尺码表 -->
     <div class="flex" v-show="that.templateType === '3' && that.tableData.length > 0">
-        <ProductItem3
-          @change="changeList"
-          ref="productItem3Ref"
-          class="m-2"
-          @del-item="delItem"
-          :badge="`${1}`"
-          v-model:product-info="that.tableData[0]" />
+      <ProductItem3
+        @change="changeList"
+        ref="productItem3Ref"
+        class="m-2"
+        @del-item="delItem"
+        :badge="`${1}`"
+        v-model:product-info="that.tableData[0]"/>
     </div>
   </div>
 </template>
@@ -43,7 +47,8 @@ import ProductItem2 from "./ProductItem2.vue"
 import ProductItem3 from "./ProductItem3.vue"
 import {ProductInfoApi} from "@/api/oms/productinfo";
 import {useResetFields} from "@/hooks/ext";
-
+import {useI18n} from "vue-i18n";
+const {t} = useI18n()
 const emit = defineEmits(['change'])
 const productItem2Ref = ref();
 const productItem3Ref = ref();
@@ -81,9 +86,9 @@ const addSku = () => {
     specInfo: JSON.parse(JSON.stringify(that.specInfo)),
   })
 }
-const itemType  =()=>{
+const itemType = () => {
   //
-  if(that.cover){
+  if (that.cover) {
     // 无模板
 
   }
@@ -92,10 +97,10 @@ const init = (row) => {
   that.tableData = row.productSkuList;
   that.productId = row.productId
   that.listKey = row.key
-  if(that.productId){
+  if (that.productId) {
     //@ts-ignore
-    ProductInfoApi.getProductInfo(that.productId).then(res=>{
-      console.log("res",res)
+    ProductInfoApi.getProductInfo(that.productId).then(res => {
+      console.log("res", res)
       that.specInfo = {
         specSizeWidth: res.specSizeWidth,
         specSizeHeight: res.specSizeHeight,
@@ -105,22 +110,22 @@ const init = (row) => {
       }
       that.templateType = res.templateType;
       // 没有设计稿数据
-      if(res.templateType !== '1'){
+      if (res.templateType !== '1') {
         that.cover = res.cover
       }
-      console.log("that.tableData.length",that.tableData.length)
+      console.log("that.tableData.length", that.tableData.length)
       if (that.tableData.length === 0) {
         addSku();
-        if(res.templateType === '2'){
+        if (res.templateType === '2') {
           // 初始化
-          setTimeout(()=>{
+          setTimeout(() => {
             productItem2Ref.value.init(that.tableData);
-          },100)
-        }else if(res.templateType === '3'){
+          }, 100)
+        } else if (res.templateType === '3') {
           // 初始化
-          setTimeout(()=>{
+          setTimeout(() => {
             productItem3Ref.value.init(that.tableData);
-          },100)
+          }, 100)
         }
       }
 
@@ -132,23 +137,23 @@ const init = (row) => {
 const changeItem = () => {
   emit("change", that.tableData)
 }
-const changeList = (tableData)=>{
+const changeList = (tableData) => {
   that.tableData = tableData
   changeItem();
 }
 const delItem = (item) => {
   let index = -1
   for (let i = 0; i < that.tableData.length; i++) {
-   if( that.tableData[i].key === item.key){
-     index = i;
-     break;
-   }
+    if (that.tableData[i].key === item.key) {
+      index = i;
+      break;
+    }
   }
   // const index = that.tableData.find((v) => v.key === item.key);
-  console.log("that.tableData",that.tableData,item)
+  console.log("that.tableData", that.tableData, item)
   if (index != -1) {
     that.tableData.splice(index, 1);
-    useMessage().notifySuccess('删除成功');
+    useMessage().notifySuccess(t("delSuccess"));
   }
   emit("change", that.tableData)
 }
diff --git a/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/index.vue b/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/index.vue
index 5d339eb..d6095cc 100644
--- a/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/index.vue
+++ b/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/components/OrderAddProductStep/index.vue
@@ -3,12 +3,16 @@
   <div>
     <el-scrollbar height="38vh">
       <div>
-        <div class="title-border">订单产品列表</div>
+        <div class="title-border">
+          {{t('createOrder.skuTitleProductList')}}
+          </div>
         <ProductList ref="listRef" @row-click="rowClick" @del-row="delRow"/>
       </div>
     </el-scrollbar>
 
-    <el-divider content-position="left">订单产品明细</el-divider>
+    <el-divider content-position="left">
+      {{t('createOrder.skuTitleProductDetails')}}
+      </el-divider>
     <el-scrollbar height="48vh">
      <div>
        <ProductSkuList ref="skuListRef" @change="changeDetails"/>
@@ -21,9 +25,9 @@
 //@ts-nocheck
 import ProductList from "./ProductList.vue";
 import ProductSkuList from "./ProductSkuList.vue";
-import {useEmitt} from "@/hooks/web/useEmitt";
-import {STEP0_FINISH_EVENT} from "@/constants/EmitEventName";
 
+import {useI18n} from "@/hooks/web/useI18n";
+const {t} = useI18n() // 国际化
 const skuListRef = ref(null);
 const listRef = ref(null);
 const that = reactive({
diff --git a/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/index.vue b/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/index.vue
index b258c81..5f3eab5 100644
--- a/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/index.vue
+++ b/hangtag-ui/hangtag-ui-front/src/views/oms/order/createorder/index.vue
@@ -1,5 +1,9 @@
 <template>
-  <el-alert v-show="formData.rejectReason" :title="`驳回理由: ${formData.rejectReason}`" type="error" effect="dark" />
+  <el-alert
+    v-show="formData.rejectReason"
+    :title="`Grounds for rejection: ${formData.rejectReason}`"
+    type="error"
+    effect="dark"/>
   <ContentWrap v-if="stepIndex==0">
     <el-form
       ref="formRef"
@@ -12,30 +16,30 @@
         <el-collapse v-model="activeNames">
           <el-collapse-item name="1">
             <template #title>
-              <CardTitle title="订单信息"/>
+              <CardTitle :title="t('createOrder.title1')"/>
             </template>
             <el-card>
               <div>
                 <el-row>
                   <el-col :span="12" v-if="formData.orderCode">
-                    <el-form-item label="订单号码" prop="orderCode">
+                    <el-form-item :label="t('createOrder.labelOrderCode')" prop="orderCode">
                       <el-input v-model="formData.orderCode" disabled placeholder="*** New ***"/>
                     </el-form-item>
                   </el-col>
                   <el-col :span="12" v-if="formData.orderStatus">
-                    <el-form-item label="订单状态" prop="orderStatus">
+                    <el-form-item :label="t('createOrder.labelOrderStatus')" prop="orderStatus">
                       <el-input v-model="formData.orderStatus" disabled placeholder="INITIAL"/>
                     </el-form-item>
                   </el-col>
                 </el-row>
                 <el-row>
                   <el-col :span="12" v-if="formData.username">
-                    <el-form-item label="用户名称" prop="username">
+                    <el-form-item :label="t('createOrder.labelUserName')" prop="username">
                       <el-input v-model="formData.username" disabled/>
                     </el-form-item>
                   </el-col>
                   <el-col :span="12" v-if="formData.bizdate">
-                    <el-form-item label="创建日期 (GMT+8)" prop="bizdate">
+                    <el-form-item :label="t('createOrder.labelBizDate')" prop="bizdate">
                       <el-date-picker
                         v-model="formData.bizdate"
                         disabled
@@ -49,12 +53,12 @@
                 </el-row>
                 <el-row>
                   <el-col :span="12" v-if="formData.customerId">
-                    <el-form-item label="客户号" prop="customerId">
+                    <el-form-item :label="t('createOrder.labelCustomerId')" prop="customerId">
                       <el-input v-model="formData.customerId" disabled placeholder=""/>
                     </el-form-item>
                   </el-col>
                   <el-col :span="12" v-if="formData.company">
-                    <el-form-item label="企业公司" prop="company">
+                    <el-form-item :label="t('createOrder.labelCompanyName')" prop="company">
                       <el-input v-model="formData.company" disabled placeholder=""/>
                     </el-form-item>
                   </el-col>
@@ -62,9 +66,12 @@
               </div>
               <el-row>
                 <el-col :span="12">
-                  <el-form-item label="品牌" prop="brandId">
-                    <el-select :disabled="changeBrand" v-model="formData.brandId" filterable
-                               placeholder="请选择品牌">
+                  <el-form-item :label="t('createOrder.labelBrand')" prop="brandId">
+                    <el-select
+                      :disabled="changeBrand"
+                      v-model="formData.brandId"
+                      filterable
+                      placeholder="Please select the brand">
                       <el-option
                         v-for="brand in brandList"
                         :key="brand.id"
@@ -76,7 +83,7 @@
                 </el-col>
                 <el-col :span="8">
 
-                  <el-form-item label="交货日期" v-if="!formData.isBatch">
+                  <el-form-item :label="t('createOrder.labelPlanDate')" v-if="!formData.isBatch">
                     <el-date-picker
                       :disabledDate="(time)=> {  return time.getTime() < (Date.now() + 8 * 60 * 60 * 1000); }"
                       v-model="that.tmpFormData.planDate"
@@ -92,10 +99,12 @@
                   <el-tooltip
                     class="box-item"
                     effect="dark"
-                    content="选择分批交货，允许分别设置产品的交期"
+                    :content="t('createOrder.labelPlanDateTips')"
                     placement="top"
                   >
-                    <el-checkbox v-model="formData.isBatch">分批交货</el-checkbox>
+                    <el-checkbox v-model="formData.isBatch">
+                      {{ t('createOrder.labelPlanDateSplit') }}
+                    </el-checkbox>
                   </el-tooltip>
 
                 </el-col>
@@ -103,21 +112,22 @@
 
               <el-row>
                 <el-col :span="12">
-                  <el-form-item label="联系人" prop="contactName">
+                  <el-form-item :label="t('createOrder.labelContactName')" prop="contactName">
                     <el-input
                       clearable
                       :name="`auto$input_so_contactName`"
                       autocomplete="on"
-                      v-model="formData.contactName" placeholder="请填写联系人名称"/>
+                      v-model="formData.contactName"
+                      :placeholder="t('createOrder.placeContactName')"/>
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
-                  <el-form-item label="手机" prop="phone">
+                  <el-form-item :label="t('createOrder.labelPhone')" prop="phone">
                     <el-input
                       clearable
                       :name="`auto$input_so_phone`"
                       autocomplete="on"
-                      v-model="formData.phone" placeholder=""/>
+                      v-model="formData.phone" :placeholder="t('createOrder.placePhone')"/>
                   </el-form-item>
                 </el-col>
               </el-row>
@@ -125,53 +135,57 @@
 
               <el-row>
                 <el-col :span="12">
-                  <el-form-item label="电话" prop="tel">
+                  <el-form-item :label="t('createOrder.labelTel')" prop="tel">
                     <el-input
                       clearable
                       :name="`auto$input_so_tel`"
                       autocomplete="on"
-                      v-model="formData.tel" placeholder="请填写固定电话号码"/>
+                      v-model="formData.tel" :placeholder="t('createOrder.placeTel')"/>
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
-                  <el-form-item label="传真" prop="fax">
+                  <el-form-item :label="t('createOrder.labelFax')" prop="fax">
                     <el-input
                       clearable
                       :name="`auto$input_so_fax`"
                       autocomplete="on"
                       v-model="formData.fax"
-                      placeholder="请填写传真号码"/>
+                      :placeholder="t('createOrder.placeFax')"/>
                   </el-form-item>
                 </el-col>
               </el-row>
 
               <el-row>
                 <el-col :span="12">
-                  <el-form-item label="客户采购编号" prop="contractCode">
+                  <el-form-item :label="t('createOrder.labelContractCode')" prop="contractCode">
                     <div class="flex w-full">
                       <el-input
                         clearable
                         :disabled="isEditState"
                         v-model="formData.contractCode"
-                        placeholder="请填写客户采购编号"/>
+                        :placeholder="t('createOrder.placeContractCode')"/>
                     </div>
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
-                  <el-form-item label="零售商单号" prop="retailerCode">
+                  <el-form-item :label="t('createOrder.labelRetailerCode')" prop="retailerCode">
                     <el-input
                       clearable
                       :name="`auto$input_so_contractCode`"
                       autocomplete="on"
-                      v-model="formData.retailerCode" placeholder="请填写零售商单号"/>
+                      v-model="formData.retailerCode"
+                      :placeholder="t('createOrder.placeRetailerCode')"/>
                   </el-form-item>
                 </el-col>
               </el-row>
 
               <el-row>
                 <el-col :span="12">
-                  <el-form-item label="结算币种" prop="orderFollowerUser">
-                    <el-select v-model="formData.currency" filterable placeholder="请选择结算币种">
+                  <el-form-item :label="t('createOrder.labelCurrency')" prop="orderFollowerUser">
+                    <el-select
+                      v-model="formData.currency"
+                      filterable
+                      :placeholder="t('createOrder.placeCurrency')">
                       <el-option
                         v-for="c in that.currencyList"
                         :key="`${c.value}`"
@@ -181,8 +195,13 @@
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
-                  <el-form-item label="业务员" prop="orderFollowerUser">
-                    <el-select v-model="formData.orderFollowerUser" filterable placeholder="业务员">
+                  <el-form-item
+                    :label="t('createOrder.labelOrderFollowerUser')"
+                    prop="orderFollowerUser">
+                    <el-select
+                      v-model="formData.orderFollowerUser"
+                      filterable
+                      :placeholder="t('createOrder.placeOrderFollowerUser')">
                       <el-option
                         v-for="user in that.followerUserList"
                         :key="user.id"
@@ -195,11 +214,11 @@
               </el-row>
               <el-row>
                 <el-col>
-                  <el-form-item label="备注" prop="remarks">
+                  <el-form-item :label="t('createOrder.labelRemarks')" prop="remarks">
                     <el-input
                       v-model="formData.remarks"
                       :autosize="{ minRows: 4, maxRows: 6 }"
-                      placeholder="请输入备注"
+                      :placeholder="t('createOrder.placeRemarks')"
                       type="textarea"/>
                   </el-form-item>
                 </el-col>
@@ -210,24 +229,26 @@
 
           <el-collapse-item name="2">
             <template #title>
-              <CardTitle title="电子邮件通知"/>
+              <CardTitle :title="t('createOrder.titleEmail')"/>
             </template>
             <el-card shadow="never" style="width: 100%; margin-top: 20px">
               <el-row>
                 <el-col :span="12">
-                  <el-form-item label="电子邮件" prop="inputEmail">
+                  <el-form-item :label="t('createOrder.labelEmail')" prop="inputEmail">
                     <el-input
                       clearable
                       :name="`auto$input_so_inputEmail`"
                       autocomplete="on"
                       v-model="that.tmpFormData.inputEmail"
-                      placeholder="填写联系邮箱"/>
+                      :placeholder="t('createOrder.placeEmail')"/>
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
                   <div style="margin-left: 30px">
-                    <el-button @click="onAddEmail">增加</el-button>
-                    <el-button type="danger" @click="onDelEmail">删除</el-button>
+                    <el-button @click="onAddEmail">{{ t("createOrder.btnAddEmail") }}</el-button>
+                    <el-button type="danger" @click="onDelEmail">
+                      {{ t("createOrder.btnDelEmail") }}
+                    </el-button>
                   </div>
                 </el-col>
               </el-row>
@@ -261,9 +282,9 @@
                 <div>
                   <el-card>
                     <div class="flex items-center">
-                      <CardTitle title="发票信息"/>
+                      <CardTitle :title="t('createOrder.titleInvoice')"/>
                       <div class="pl-8px" v-if="false">
-                        <el-button type="primary" link>管理发票信息</el-button>
+                        <el-button type="primary" link>{{ t('createOrder.btnInvoice') }}</el-button>
                       </div>
                     </div>
 
@@ -273,34 +294,42 @@
                               style="padding-left: 0px; margin-top: 20px">
                         <el-row>
                           <el-col :span="12">
-                            <el-form-item label="发票抬头" prop="invoiceCode">
-                              <el-input v-model="formData.invoiceCode"
-                                        placeholder="请输入发票抬头"/>
+                            <el-form-item
+                              :label="t('createOrder.labelInvoiceCode')"
+                              prop="invoiceCode">
+                              <el-input
+                                v-model="formData.invoiceCode"
+                                :placeholder="t('createOrder.placeInvoiceCode')"/>
                             </el-form-item>
                           </el-col>
                           <el-col :span="12">
-                            <el-form-item label="发票名称" prop="invoiceName">
-                              <el-input v-model="formData.invoiceName"
-                                        placeholder="请输入发票名称"/>
+                            <el-form-item
+                              :label="t('createOrder.labelInvoiceName')"
+                              prop="invoiceName">
+                              <el-input
+                                v-model="formData.invoiceName"
+                                :placeholder="t('createOrder.placeInvoiceName')"/>
                             </el-form-item>
                           </el-col>
                         </el-row>
                         <el-row>
                           <el-col :span="24">
-                            <el-form-item label="发票地址" prop="invoiceAddress">
+                            <el-form-item :label="t('createOrder.labelInvoiceAddress')"
+                                          prop="invoiceAddress">
                               <el-input
                                 name="auto$input_so_invoiceAddress"
                                 autocomplete="on"
                                 v-model="formData.invoiceAddress"
-                                placeholder="请输入发票地址"/>
+                                :placeholder="t('createOrder.placeInvoiceAddress')"/>
                             </el-form-item>
                           </el-col>
                           <el-col :span="24">
-                            <el-form-item label="发票备注" prop="invoiceRemarks">
+                            <el-form-item :label="t('createOrder.labelInvoiceRemarks')"
+                                          prop="invoiceRemarks">
                               <el-input
                                 v-model="formData.invoiceRemarks"
                                 :autosize="{ minRows: 2, maxRows: 4 }"
-                                placeholder="请输入发票备注"
+                                :placeholder="t('createOrder.placeInvoiceRemarks')"
                                 type="textarea"/>
                             </el-form-item>
                           </el-col>
@@ -315,10 +344,11 @@
                 <div>
                   <el-card>
                     <div class="flex items-center">
-                      <CardTitle title="收货信息"/>
+                      <CardTitle :title="t('createOrder.titleAddress')"/>
                       <div class="pl-8px">
                         <AddressListDialog ref="addressRef">
-                          <el-button type="primary" link @click="editAddress">管理收货地址
+                          <el-button type="primary" link @click="editAddress">
+                            {{ t('createOrder.btnEditAddress') }}
                           </el-button>
                         </AddressListDialog>
 
@@ -330,11 +360,12 @@
                               style="padding-left: 0px; margin-top: 20px">
                         <el-row>
                           <el-col :span="24">
-                            <el-form-item label="送货公司">
-                              <el-select filterable
-                                         placeholder="选择地址"
-                                         v-model="that.addressId"
-                                         @change="onChangeAddress">
+                            <el-form-item :label="t('createOrder.labelAddressId')">
+                              <el-select
+                                filterable
+                                :placeholder="t('createOrder.placeAddressId')"
+                                v-model="that.addressId"
+                                @change="onChangeAddress">
                                 <el-option v-for="item in that.addressList" :label="item.name"
                                            :key="item.id" :value="item.id">
                                   <span>{{ item.name }}</span>
@@ -345,7 +376,7 @@
                         </el-row>
                         <el-row>
                           <el-col :span="24">
-                            <el-form-item label="详细地址">
+                            <el-form-item :label="t('createOrder.labelDeliveryAddress')">
                               <el-input
                                 name="auto$input_deliveryAddress"
                                 autocomplete="on"
@@ -353,15 +384,17 @@
                                 :autosize="{ minRows: 2, maxRows: 4 }"
                                 v-model="formData.deliveryAddress"
                                 type="textarea"
-                                placeholder="请输入收货地址"/>
+                                :placeholder="t('createOrder.placeDeliveryAddress')"
+                              />
                             </el-form-item>
                           </el-col>
                           <el-col :span="24">
-                            <el-form-item label="送货备注" prop="invoiceRemarks">
+                            <el-form-item :label="t('createOrder.labelDeliveryRemark')"
+                                          prop="invoiceRemarks">
                               <el-input
                                 v-model="formData.deliveryRemark"
                                 :autosize="{ minRows: 2, maxRows: 4 }"
-                                placeholder="请输入送货备注"
+                                :placeholder="t('createOrder.placeDeliveryRemark')"
                                 clearable
                                 type="textarea"/>
                             </el-form-item>
@@ -398,16 +431,18 @@
             v-if="stepIndex >= 1"
             style="margin-left: 10px;"
             type="primary"
-            @click="backStep()">上一步
+            @click="backStep()">
+            {{t('createOrder.btnPrevStep')}}
           </el-button>
         </div>
         <div v-if="hasLastIndex">
           <el-button style="margin-left: 10px;" type="primary" @click="addNewBill">
-            创建
+            {{ t('createOrder.btnCreate') }}
           </el-button>
         </div>
         <div v-else>
-          <el-button style="margin-left: 10px;" type="primary" @click="nextStep()">下一步
+          <el-button style="margin-left: 10px;" type="primary" @click="nextStep()">
+            {{ t('createOrder.btnNext') }}
           </el-button>
         </div>
       </div>
@@ -431,6 +466,8 @@ import {formatDate} from "@/utils/formatTime";
 import {ElLoading} from "element-plus";
 import {DICT_TYPE, getStrDictOptions} from "@/utils/dict";
 
+const {t} = useI18n() // 国际化
+
 const route = useRoute() // 路由
 // 计算当前时间之后指定天数的日期
 const calculateDateAfterDays = (days) => {
@@ -511,13 +548,13 @@ const isEditState = computed(() => {
   return route.query.id != undefined
 })
 const formRules = reactive({
-  contactName: [{required: true, message: '联系人不能为空', trigger: 'blur'}],
-  brandId: [{required: true, message: '品牌不能为空', trigger: 'blur'}],
-  contractCode: [{required: true, message: '客户采购编号不能为空', trigger: 'blur'}],
-  phone: [{required: true, message: '联系人手机号不能为空', trigger: 'blur'},
+  contactName: [{required: true, message: t('createOrder.ruleMsgContactName'), trigger: 'blur'}],
+  brandId: [{required: true, message: t('createOrder.ruleMsgBrandId'), trigger: 'blur'}],
+  contractCode: [{required: true, message: t('createOrder.ruleMsgContractCode'), trigger: 'blur'}],
+  phone: [{required: true, message: t('createOrder.ruleMsgPhone'), trigger: 'blur'},
     {
       pattern: /^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/,
-      message: '请输入正确的手机号码',
+      message: t('createOrder.ruleMsgPhoneError'),
       trigger: 'blur'
     }
   ],
@@ -537,7 +574,7 @@ const pushEmail = (input: string) => {
 }
 const onAddEmail = () => {
   if (!that.tmpFormData.inputEmail || that.tmpFormData.inputEmail.trim() === '') {
-    useMessage().warning('请输入邮箱');
+    useMessage().warning(t('createOrder.ruleMsgEmail'));
     return;
   }
   pushEmail(that.tmpFormData.inputEmail);
@@ -590,7 +627,7 @@ const nextStep = async () => {
         ...formData.value
       })
     }).catch(() => {
-      useMessage().warning("请先完善基本信息")
+      useMessage().warning(t('createOrder.tipsBaseInfo'))
     })
   } else {
     stepIndex.value = stepIndex.value + 1;
@@ -612,10 +649,11 @@ const submitPreHandler = (showMsg = true) => {
     // todo 校验
     const tableData = stepRef.value.getTableData();
     if (tableData.length === 0) {
+      const tips = t('createOrder.tipsAddProduct')
       if (showMsg) {
-        useMessage().warning("请添加产品")
+        useMessage().warning(tips)
       }
-      reject("请添加产品")
+      reject(tips)
     }
     if (that.tmpFormData.emailList) {
       formData.value.emails = that.tmpFormData.emailList.join(";")
@@ -626,7 +664,7 @@ const submitPreHandler = (showMsg = true) => {
     tableData.forEach((item, index) => {
 
       if (!item.productSkuList || item.productSkuList.length === 0) {
-        const t = `第${index + 1}行 ‘${item.productName}’ SKU不能为空`;
+        const t = `The SKU of the "${item.productName}" in row ${index + 1} cannot be left blank.`;
         if (showMsg) {
           useMessage().warning(t)
         }
@@ -635,7 +673,7 @@ const submitPreHandler = (showMsg = true) => {
       }
       item.productSkuList.forEach((item2, i2) => {
         if (!item2.previewImage) {
-          const t = `第${index + 1}行 ‘${item.productName}’SKU 第${i2 + 1}项 请批稿`;
+          const t = ` Please review row${index + 1} ‘${item.productName}’SKU ${i2 + 1}`;
           if (showMsg) {
             useMessage().warning(t)
           }
@@ -662,7 +700,7 @@ const addNewBill = () => {
       }).then(res => {
         that.pageLoading = ElLoading.service({
           lock: true,
-          text: '修改成功...',
+          text: t('createOrder.tipsLoadingEditing'),
           background: 'rgba(0,0,0,0.5)'
         })
         setTimeout(() => {
@@ -670,7 +708,7 @@ const addNewBill = () => {
           push("/")
         }, 3000)
       }).catch(e => {
-        useMessage().warning("出错：" + e.message ? e.message : e)
+        useMessage().warning("Error：" + e.message ? e.message : e)
       })
     } else {
       SaleOrderApi.placeOrder({
@@ -678,7 +716,7 @@ const addNewBill = () => {
       }).then(res => {
         that.pageLoading = ElLoading.service({
           lock: true,
-          text: '下单成功...',
+          text: t('createOrder.tipsLoadingOrderCompleted'),
           background: 'rgba(0,0,0,0.5)'
         })
         setTimeout(() => {
@@ -686,7 +724,7 @@ const addNewBill = () => {
           push("/")
         }, 3000)
       }).catch(e => {
-        useMessage().warning("出错：" + e.message ? e.message : e)
+        useMessage().warning("Error：" + e.message ? e.message : e)
       })
     }
 
@@ -770,55 +808,55 @@ onMounted(async () => {
   }
 
 })
-  const getCustomerAddressList = async () => {
-    const customerData = await CustomerApi.getCustomerInfo()
-    if (customerData) {
-      that.addressList = customerData.addressList;
-    }
+const getCustomerAddressList = async () => {
+  const customerData = await CustomerApi.getCustomerInfo()
+  if (customerData) {
+    that.addressList = customerData.addressList;
   }
-  const resFrom = (init = {}) => {
-
-    formData.value = {
-      contactName: '',
-      phone: '',
-      invoiceAddress: '',
-      orderStatus: '',
-      customerId: '',
-      username: '',
-      company: '',
-      brandId: '',
-      currency: '',
-      tel: '',
-      fax: '',
-      invoiceName: '',
-      invoiceCode: '',
-      invoiceRemarks: '',
-      contractCode: '',
-      retailerCode: '',
-      remarks: '',
-      isBatch: false,
-      orderCode: '',
-      emails: '',
-      bizdate: undefined,
-      plansenddate: undefined,
-      saleOrderEntry: [],
-      rejectReason: '',
-      ...init
-    }
-    if (customerData && !init.id) {
-      that.addressList = customerData.addressList;
-      formData.value.customerId = customerData.id;
-      formData.value.username = customerData.name;
-      formData.value.company = customerData.company;
-      formData.value.contactName = customerData.contacts;
-      formData.value.phone = customerData.phone;
-      formData.value.invoiceCode = customerData.invoiceCode;
-      formData.value.invoiceName = customerData.invoiceName;
-      formData.value.invoiceAddress = customerData.invoiceAddress;
-      console.log("formData", formData)
-    }
+}
+const resFrom = (init = {}) => {
 
+  formData.value = {
+    contactName: '',
+    phone: '',
+    invoiceAddress: '',
+    orderStatus: '',
+    customerId: '',
+    username: '',
+    company: '',
+    brandId: '',
+    currency: '',
+    tel: '',
+    fax: '',
+    invoiceName: '',
+    invoiceCode: '',
+    invoiceRemarks: '',
+    contractCode: '',
+    retailerCode: '',
+    remarks: '',
+    isBatch: false,
+    orderCode: '',
+    emails: '',
+    bizdate: undefined,
+    plansenddate: undefined,
+    saleOrderEntry: [],
+    rejectReason: '',
+    ...init
   }
+  if (customerData && !init.id) {
+    that.addressList = customerData.addressList;
+    formData.value.customerId = customerData.id;
+    formData.value.username = customerData.name;
+    formData.value.company = customerData.company;
+    formData.value.contactName = customerData.contacts;
+    formData.value.phone = customerData.phone;
+    formData.value.invoiceCode = customerData.invoiceCode;
+    formData.value.invoiceName = customerData.invoiceName;
+    formData.value.invoiceAddress = customerData.invoiceAddress;
+    console.log("formData", formData)
+  }
+
+}
 
 </script>
 
diff --git a/hangtag-ui/hangtag-ui-front/src/views/oms/saleorder/index.vue b/hangtag-ui/hangtag-ui-front/src/views/oms/saleorder/index.vue
index 06d61a6..91b0b6c 100644
--- a/hangtag-ui/hangtag-ui-front/src/views/oms/saleorder/index.vue
+++ b/hangtag-ui/hangtag-ui-front/src/views/oms/saleorder/index.vue
@@ -74,21 +74,21 @@
           />
         </el-select>
       </el-form-item>
-<!--      <el-form-item label="订单状态" prop="orderStatus">
-        <el-select
-          v-model="queryParams.orderStatus"
-          placeholder="请选择订单状态"
-          clearable
-          class="!w-240px"
-        >
-          <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.OMS_ORDER_STATUS)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>-->
+      <!--      <el-form-item label="订单状态" prop="orderStatus">
+              <el-select
+                v-model="queryParams.orderStatus"
+                placeholder="请选择订单状态"
+                clearable
+                class="!w-240px"
+              >
+                <el-option
+                  v-for="dict in getIntDictOptions(DICT_TYPE.OMS_ORDER_STATUS)"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>-->
       <el-form-item label="手机" prop="phone">
         <el-input
           v-model="queryParams.phone"
@@ -108,21 +108,27 @@
         />
       </el-form-item>
       <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button @click="handleQuery">
+          <Icon icon="ep:search" class="mr-5px"/>
+          搜索
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon icon="ep:refresh" class="mr-5px"/>
+          重置
+        </el-button>
       </el-form-item>
     </el-form>
 
     <el-row :gutter="10" class="-mb-1px">
       <el-col :span="1.5">
-<!--        <el-button
-          type="danger"
-          plain
-          @click="handleReject()"
-          :disabled="selectionList.length === 0"
-        >驳回
-        </el-button>
-        -->
+        <!--        <el-button
+                  type="danger"
+                  plain
+                  @click="handleReject()"
+                  :disabled="selectionList.length === 0"
+                >驳回
+                </el-button>
+                -->
         <el-button
           type="primary"
           plain
@@ -161,7 +167,8 @@
           @click="handleExport"
           :loading="exportLoading"
         >
-          <Icon icon="ep:upload" class="mr-5px" /> 导出
+          <Icon icon="ep:upload" class="mr-5px"/>
+          导出
         </el-button>
       </el-col>
     </el-row>
@@ -177,26 +184,29 @@
         :name="item.type"
       />
     </el-tabs>
-    <el-table v-loading="loading" :data="list" :stripe="true"
-              :show-overflow-tooltip="true"
-              @selection-change="handleSelectionChange"
-              :row-class-name="tableRowClassName"
+    <el-table
+      v-loading="loading"
+      :data="list"
+      :stripe="true"
+      :show-overflow-tooltip="true"
+      @selection-change="handleSelectionChange"
+      :row-class-name="tableRowClassName"
     >
-      <el-table-column width="30" label="选择" type="selection" />
-      <el-table-column label="单据编号" align="center" prop="billno"     width="120px"/>
-      <el-table-column label="客户" align="center" prop="customerId"     width="120px"/>
-      <el-table-column label="销售员" align="center" prop="customerId"   width="180px"/>
-      <el-table-column label="跟单员" align="center" prop="customerId"   width="180px"/>
+      <el-table-column width="30" label="选择" type="selection"/>
+      <el-table-column label="单据编号" align="center" prop="billno" width="120px"/>
+      <el-table-column label="客户" align="center" prop="customerId" width="120px"/>
+      <el-table-column label="销售员" align="center" prop="customerId" width="180px"/>
+      <el-table-column label="跟单员" align="center" prop="customerId" width="180px"/>
       <el-table-column label="订单状态" align="center" prop="billStatus" width="180px">
         <template #default="scope">
-          <dict-tag :type="DICT_TYPE.OMS_BILL_STATUS" :value="scope.row.billStatus" />
+          <dict-tag :type="DICT_TYPE.OMS_BILL_STATUS" :value="scope.row.billStatus"/>
         </template>
       </el-table-column>
-<!--      <el-table-column label="订单状态" align="center" prop="orderStatus" width="180px">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.OMS_ORDER_STATUS" :value="scope.row.orderStatus" />
-        </template>
-      </el-table-column>-->
+      <!--      <el-table-column label="订单状态" align="center" prop="orderStatus" width="180px">
+              <template #default="scope">
+                <dict-tag :type="DICT_TYPE.OMS_ORDER_STATUS" :value="scope.row.orderStatus" />
+              </template>
+            </el-table-column>-->
       <el-table-column
         label="业务日期"
         align="center"
@@ -218,8 +228,8 @@
         :formatter="dateFormatter2"
         width="180px"
       />
-      <el-table-column label="手机" align="center" prop="phone" />
-      <el-table-column label="备注" align="center" prop="remarks" />
+      <el-table-column label="手机" align="center" prop="phone"/>
+      <el-table-column label="备注" align="center" prop="remarks"/>
       <el-table-column
         label="创建时间"
         align="center"
@@ -237,39 +247,40 @@
       <el-table-column label="操作" align="center" width="150" fixed="right">
         <template #default="scope">
 
-          <router-link  :to="'/order/createorder?id='+scope.row.id+'&_t=2'" v-if="scope.row.billStatus == 'B' ">
+          <router-link :to="'/order/createorder?id='+scope.row.id+'&_t=2'"
+                       v-if="scope.row.billStatus == 'B' ">
             <el-button
               link
               type="primary">
-              <Icon icon="ep:edit" />
+              <Icon icon="ep:edit"/>
               修改
             </el-button>
           </router-link>
 
-<!--          <el-button
-            link
-            type="primary"
-            @click="openEdit(scope.row.id)"
-            v-if="scope.row.billStatus == 'B' "
-          >
-            <Icon icon="ep:edit" />
-            编辑
-          </el-button>-->
+          <!--          <el-button
+                      link
+                      type="primary"
+                      @click="openEdit(scope.row.id)"
+                      v-if="scope.row.billStatus == 'B' "
+                    >
+                      <Icon icon="ep:edit" />
+                      编辑
+                    </el-button>-->
           <el-button
             link
             type="primary"
             @click="openDetail(scope.row.id)"
           >
-            <Icon icon="ep:notification" />
+            <Icon icon="ep:notification"/>
             详情
           </el-button>
-<!--          <el-button
-            link
-            type="danger"
-            @click="handleDelete(scope.row.id)"
-          >
-            删除
-          </el-button>-->
+          <!--          <el-button
+                      link
+                      type="danger"
+                      @click="handleDelete(scope.row.id)"
+                    >
+                      删除
+                    </el-button>-->
         </template>
       </el-table-column>
     </el-table>
@@ -283,15 +294,16 @@
   </ContentWrap>
 
   <!-- 表单弹窗：添加/修改 -->
-  <SaleOrderForm ref="formRef" @success="getList" />
-
+  <SaleOrderForm ref="formRef" @success="getList"/>
 
 
   <!-- 驳回对话框 -->
-  <el-dialog :title="rejectTitle" v-model="rejectOpen" width="750px" style="height: 210px;" append-to-body>
-    <el-form ref="form" :model="rejectform"  label-width="80px" >
-      <el-form-item label="驳回原因" prop="rejectReason" >
-        <el-input v-model="rejectform.rejectReason"  :rows="3" type="textarea" placeholder="请输入驳回原因" />
+  <el-dialog :title="rejectTitle" v-model="rejectOpen" width="750px" style="height: 210px;"
+             append-to-body>
+    <el-form ref="form" :model="rejectform" label-width="80px">
+      <el-form-item label="驳回原因" prop="rejectReason">
+        <el-input v-model="rejectform.rejectReason" :rows="3" type="textarea"
+                  placeholder="请输入驳回原因"/>
       </el-form-item>
     </el-form>
     <div class="dialog-footer" style="text-align: right">
@@ -303,19 +315,19 @@
 </template>
 
 <script setup lang="ts">
-import { getIntDictOptions, getStrDictOptions, DICT_TYPE } from '@/utils/dict'
+import {getIntDictOptions, getStrDictOptions, DICT_TYPE} from '@/utils/dict'
 import {dateFormatter, dateFormatter2} from '@/utils/formatTime'
 import download from '@/utils/download'
-import { SaleOrderApi, SaleOrderVO } from '@/api/oms/saleorder'
+import {SaleOrderApi, SaleOrderVO} from '@/api/oms/saleorder'
 import SaleOrderForm from './SaleOrderForm.vue'
 import {checkPermi} from "@/utils/permission";
 
 /** 销售订单 列表 */
-defineOptions({ name: 'SaleOrder' })
+defineOptions({name: 'SaleOrder'})
 
-const { currentRoute, push } = useRouter() // 路由跳转
+const {currentRoute, push} = useRouter() // 路由跳转
 const message = useMessage() // 消息弹窗
-const { t } = useI18n() // 国际化
+const {t} = useI18n() // 国际化
 
 const loading = ref(true) // 列表的加载中
 const list = ref<SaleOrderVO[]>([]) // 列表的数据
@@ -390,9 +402,9 @@ const getTabsCount = async () => {
   const res = await SaleOrderApi.getTabsCount()
   for (let objName in res) {
     let data = tabsData.value
-    for (let obj in data){
+    for (let obj in data) {
       let tabsType = tabsData.value[Number(obj)].type;
-      if(tabsType == objName){
+      if (tabsType == objName) {
         tabsData.value[Number(obj)].count = res[objName]
       }
     }
@@ -428,7 +440,8 @@ const handleDelete = async (id: number) => {
     message.success(t('common.delSuccess'))
     // 刷新列表
     await getList()
-  } catch {}
+  } catch {
+  }
 }
 
 
@@ -437,8 +450,8 @@ const handleReject = async () => {
   const ids = selectionList.value.map((item) => item.id)
   const billStatus = selectionList.value.map((item) => item.billStatus)
   debugger
-  for(let vals of billStatus) {
-    if(vals!='B'){
+  for (let vals of billStatus) {
+    if (vals != 'B') {
       message.error("请选择订单状态待审核的数据行");
       return;
     }
@@ -452,19 +465,19 @@ const handleUpdateBillStatus = async (operateKey: string) => {
   try {
     const ids = selectionList.value.map((item) => item.id)
     const billStatus = selectionList.value.map((item) => item.billStatus)
-    for(let vals of billStatus) {
-      if("submit" == operateKey && vals!='AA'){
+    for (let vals of billStatus) {
+      if ("submit" == operateKey && vals != 'AA') {
         message.error("请选择订单状态驳回的数据行");
         return;
       }
-      if("audit" == operateKey && vals!='B'){
+      if ("audit" == operateKey && vals != 'B') {
         message.error("请选择订单状态待审核的数据行");
         return;
       }
-      if("invalid" == operateKey){
-        if((vals=='C') || (vals=='E')){
+      if ("invalid" == operateKey) {
+        if ((vals == 'C') || (vals == 'E')) {
           message.error("单据已审核不允许作废");
-        }else if(vals=='D'){
+        } else if (vals == 'D') {
           message.error("单据已作废");
         }
         return;
@@ -473,13 +486,13 @@ const handleUpdateBillStatus = async (operateKey: string) => {
     debugger
     // 审批的二次确认
     let operateName = ''
-    if(operateKey === 'submit'){
+    if (operateKey === 'submit') {
       operateName = '提交'
-    }else if(operateKey === "audit"){
+    } else if (operateKey === "audit") {
       operateName = '审核'
-    }else if(operateKey === "invalid"){
+    } else if (operateKey === "invalid") {
       operateName = '作废'
-    }else {
+    } else {
       return
     }
     await message.confirm(`确定${operateName}该订单吗？`)
@@ -489,7 +502,8 @@ const handleUpdateBillStatus = async (operateKey: string) => {
     // 刷新列表
     await getList()
     selectionList.value = selectionList.value.filter((item) => !ids.includes(item.id))
-  } catch {}
+  } catch {
+  }
 }
 
 
@@ -498,8 +512,8 @@ const generateProduceOrder = async () => {
   try {
     const ids = selectionList.value.map((item) => item.id)
     const billStatus = selectionList.value.map((item) => item.billStatus)
-    for(let vals of billStatus) {
-      if(vals!='C'){
+    for (let vals of billStatus) {
+      if (vals != 'C') {
         message.error("请选择单据状态已审核的数据行");
         return;
       }
@@ -513,11 +527,11 @@ const generateProduceOrder = async () => {
     // 刷新列表
     await getList()
     selectionList.value = selectionList.value.filter((item) => !ids.includes(item.id))
-  } catch {}
+  } catch {
+  }
 }
 
 
-
 /** 导出按钮操作 */
 const handleExport = async () => {
   try {
@@ -553,24 +567,24 @@ const submitRejectForm = async () => {
   const billStatus = selectionList.value.map((item) => item.billStatus)
 
 
-  if(rejectform.rejectReason != null) {
+  if (rejectform.rejectReason != null) {
     const data = {
-      ids:ids,
-      reason:rejectform.rejectReason
+      ids: ids,
+      reason: rejectform.rejectReason
     }
     await SaleOrderApi.rejectOrder(data).then(response => {
       message.success("驳回成功");
       rejectOpen.value = false;
       getList();
     });
-  }else {
+  } else {
     message.error(`请填写驳回原因！`)
   }
 }
 
 
 /** 驳回取消按钮 */
-const rejectCancel = () =>{
+const rejectCancel = () => {
   rejectOpen.value = false
   rejectform.rejectReason = undefined
 }
@@ -578,12 +592,12 @@ const rejectCancel = () =>{
 
 /** 订单编辑 */
 const openEdit = (id: number) => {
-  push({ name: 'SaleOrderEdit', params: { id } })
+  push({name: 'SaleOrderEdit', params: {id}})
 }
 
 /** 查看订单详情 */
 const openDetail = (id: number) => {
-  push({ name: 'SaleOrderDetail', params: { id } })
+  push({name: 'SaleOrderDetail', params: {id}})
 }
 
 const tableRowClassName = ({row, rowIndex}: {
@@ -619,10 +633,11 @@ onMounted(() => {
 
 
 <style>
-  .el-table .warning-row {
-    --el-table-tr-bg-color: #D4D4D4;
-  }
-  .el-table .success-row {
-    --el-table-tr-bg-color: var(--el-color-success-light-9);
-  }
+.el-table .warning-row {
+  --el-table-tr-bg-color: #D4D4D4;
+}
+
+.el-table .success-row {
+  --el-table-tr-bg-color: var(--el-color-success-light-9);
+}
 </style>