diff --git a/src/components/common/modalSzie.vue b/src/components/common/modalSzie.vue
index 1754e16a..8003bcf7 100644
--- a/src/components/common/modalSzie.vue
+++ b/src/components/common/modalSzie.vue
@@ -7,16 +7,27 @@
 -->
 
 <template>
-  <Modal v-model="modal" :title="props.title" footer-hide>
+  <Modal v-model="modal" :title="props.title" footer-hide :before-close="resetUnit">
     <h3>
       {{ $t('importFiles.createDesign.customSize') }}
     </h3>
-    <Form ref="formInline" inline :label-width="40">
-      <FormItem label="宽度">
-        <InputNumber v-model="width" :min="1" placeholder="请输入"></InputNumber>
+    <Form ref="formInline" inline :label-width="46">
+      <FormItem :label="$t('importFiles.createDesign.width')">
+        <InputNumber v-model="width" :min="1" placeholder="请输入" :precision="1"></InputNumber>
       </FormItem>
-      <FormItem label="高度">
-        <InputNumber v-model="height" :min="1" placeholder="请输入"></InputNumber>
+      <FormItem :label="$t('importFiles.createDesign.height')">
+        <InputNumber v-model="height" :min="1" placeholder="请输入" :precision="1"></InputNumber>
+        <Tooltip theme="light">
+          <template #content>
+            <UnitMenu v-model="unit" :options="unitList" />
+          </template>
+          <div class="unit-select">
+            <p class="label">
+              {{ unit }}
+            </p>
+            <i class="ivu-icon ivu-icon-ios-arrow-down"></i>
+          </div>
+        </Tooltip>
       </FormItem>
       <FormItem :label-width="0">
         <Button type="primary" @click="customSizeCreate">
@@ -31,10 +42,10 @@
     <CellGroup @on-click="setSize">
       <Cell
         :title="item.name"
-        :label="`${item.width}x${item.height}${item.unit}`"
+        :label="`${item._width[unit]}x${item._height[unit]}${unit}`"
         :arrow="false"
         :key="item.name"
-        :name="`${item.width}x${item.height}x${item.unit}`"
+        :name="`${item._width[unit]}x${item._height[unit]}x${unit}`"
         v-for="item in sizeList"
       >
         <template #extra>
@@ -48,8 +59,12 @@
 <script name="ImportJson" setup>
 import useSelect from '@/hooks/select';
 import { Message } from 'view-ui-plus';
+import { useI18n } from 'vue-i18n';
+import UnitMenu from '../unitMenu.vue';
+import { fabric } from 'fabric';
+const { t } = useI18n();
 const { canvasEditor } = useSelect();
-const emit = defineEmits(['set']);
+const emit = defineEmits(['set', 'setUnit']);
 
 const props = defineProps({
   title: {
@@ -62,12 +77,95 @@ const modal = ref(false);
 const width = ref(null);
 const height = ref(null);
 const sizeList = ref([]);
-const showSetSize = (w, h) => {
+const unit = ref('px');
+
+const unitList = [
+  { value: 'px', label: 'px' },
+  { value: 'cm', label: 'cm' },
+  { value: 'mm', label: 'mm' },
+];
+
+/**
+ * @param value 传入的像素值，{xxx}px
+ * @param unit 需要转化的单位，默认为mm
+ * @param fontSize 画布的文字大小，默认fabric.DPI为16
+ * @returns 返回转化后的值，如果没有匹配到单位则直接去掉原像素的px单位，变成数字
+ */
+const convertPxToUnit = (value, unit = 'mm', fontSize) => {
+  const pixels = parseFloat(value);
+  if (!fontSize) {
+    fontSize = fabric.Text.DEFAULT_SVG_FONT_SIZE;
+  }
+  let convertedValue;
+  switch (unit) {
+    case 'mm':
+      convertedValue = (pixels / fabric.DPI) * 25.4;
+      break;
+    case 'cm':
+      convertedValue = (pixels / fabric.DPI) * 2.54;
+      break;
+    case 'in':
+      convertedValue = pixels / fabric.DPI;
+      break;
+    case 'pt':
+      convertedValue = (pixels / fabric.DPI) * 72;
+      break;
+    case 'pc':
+      convertedValue = ((pixels / fabric.DPI) * 72) / 12;
+      break;
+    case 'em':
+      convertedValue = pixels / fontSize;
+      break;
+    default:
+      convertedValue = pixels;
+  }
+  return convertedValue;
+};
+
+watch(
+  () => unit.value,
+  (newUnit, oldUnit) => {
+    if (resetTrigger) {
+      resetTrigger = false;
+      return;
+    }
+    let w = width.value,
+      h = height.value;
+    // 先统一转化成px
+    if (oldUnit !== 'px') {
+      w = fabric.util.parseUnit(width.value + oldUnit);
+      h = fabric.util.parseUnit(height.value + oldUnit);
+    }
+    width.value = convertPxToUnit(w, newUnit);
+    height.value = convertPxToUnit(h, newUnit);
+  }
+);
+
+let resetTrigger = false;
+const resetUnit = () => {
+  resetTrigger = true;
+  unit.value = 'px';
+};
+const showSetSize = (w, h, u) => {
   width.value = w || null;
   height.value = h || null;
+  unit.value = u || 'px';
   // 获取素材
   canvasEditor.getSizeList().then((res) => {
-    sizeList.value = res;
+    sizeList.value = res.map((item) => {
+      item.unit = unit.value;
+      item._width = {
+        px: item.width,
+        mm: parseInt(convertPxToUnit(item.width, 'mm')),
+        cm: parseInt(convertPxToUnit(item.width, 'cm')),
+      };
+      item._height = {
+        px: item.height,
+        mm: parseInt(convertPxToUnit(item.height, 'mm')),
+        cm: parseInt(convertPxToUnit(item.height, 'cm')),
+      };
+      return item;
+    });
   });
   modal.value = true;
 };
@@ -79,10 +177,10 @@ const setSize = (itemString) => {
 
 const customSizeCreate = async () => {
   if (width.value && height.value) {
-    emit('set', width.value, height.value);
+    emit('set', width.value, height.value, unit.value);
     modal.value = false;
   } else {
-    Message.warning('请检查尺寸');
+    Message.warning(t('importFiles.createDesign.checkMsg'));
   }
 };
 
@@ -97,4 +195,22 @@ h3 {
 .divider {
   margin-top: 0;
 }
+.unit-select {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  padding: 0 8px;
+  margin-left: 6px;
+  border-radius: 6px;
+  border-color: transparent;
+  background-color: rgba(0, 0, 0, 0);
+  .label {
+    min-width: 26px;
+    text-align: center;
+  }
+  &:hover {
+    background: #0000000a;
+  }
+}
 </style>
diff --git a/src/components/setSize.vue b/src/components/setSize.vue
index 6b69910d..9ec262b2 100644
--- a/src/components/setSize.vue
+++ b/src/components/setSize.vue
@@ -12,19 +12,32 @@
     <Divider plain orientation="left">
       <h4>{{ $t('bgSeting.size') }}</h4>
     </Divider>
-    <Form :label-width="40" inline class="form-wrap">
+    <Form :label-width="46" inline class="form-wrap">
       <FormItem :label="$t('bgSeting.width')" prop="name">
-        <InputNumber disabled v-model="width" readonly @on-change="setSize"></InputNumber>
+        <InputNumber
+          disabled
+          v-model="width"
+          readonly
+          @on-change="setSize"
+          :precision="1"
+        ></InputNumber>
       </FormItem>
       <FormItem :label="$t('bgSeting.height')" prop="name">
-        <InputNumber disabled v-model="height" readonly @on-change="setSize"></InputNumber>
+        <InputNumber
+          disabled
+          v-model="height"
+          readonly
+          @on-change="setSize"
+          :precision="1"
+        ></InputNumber>
       </FormItem>
       <FormItem :label-width="0">
-        <Button type="text" @click="showSetSize">
-          <Icon type="md-create" />
-        </Button>
+        {{ unit }}
       </FormItem>
     </Form>
+    <Button type="text" @click="showSetSize">
+      <Icon type="md-create" />
+    </Button>
 
     <!-- <Divider plain></Divider> -->
     <!-- 修改尺寸 -->
@@ -47,6 +60,7 @@ const modalSizeRef = ref(null);
 
 let width = ref(DefaultSize.width);
 let height = ref(DefaultSize.height);
+let unit = ref('px');
 
 onMounted(() => {
   canvasEditor.setSize(width.value, height.value);
@@ -61,11 +75,12 @@ const setSize = () => {
 };
 
 const showSetSize = () => {
-  modalSizeRef.value.showSetSize(width.value, height.value);
+  modalSizeRef.value.showSetSize(width.value, height.value, unit.value);
 };
-const handleConfirm = (w, h) => {
+const handleConfirm = (w, h, u) => {
   width.value = w;
   height.value = h;
+  unit.value = u;
   setSize();
 };
 </script>
diff --git a/src/components/unitMenu.vue b/src/components/unitMenu.vue
new file mode 100644
index 00000000..27eaa7a9
--- /dev/null
+++ b/src/components/unitMenu.vue
@@ -0,0 +1,68 @@
+<!--
+ * @Author: 余震
+ * @Date: 2024-06-05 15:03:55
+ * @LastEditors: 余震
+ * @LastEditTime: 2024-06-05 15:03:55
+ * @Description: 单位选择
+-->
+
+<template>
+  <div class="unit-menu-list">
+    <div
+      class="unit-menu-item"
+      :class="{ active: item.value === modelValue }"
+      v-for="item in options"
+      :key="item.value"
+      @click="handleClick(item.value)"
+    >
+      <div>{{ item.label }}</div>
+      <i v-if="item.value === modelValue" class="ivu-icon ivu-icon-ios-checkmark"></i>
+    </div>
+  </div>
+</template>
+
+<script name="UnitMenu" setup>
+defineProps({
+  modelValue: {
+    type: String,
+    default: '',
+  },
+  options: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emits = defineEmits(['update:modelValue']);
+const handleClick = (val) => {
+  emits('update:modelValue', val);
+};
+</script>
+<style scoped lang="less">
+.unit-menu-list {
+  display: flex;
+  flex-direction: column;
+  font-size: 16px;
+  .unit-menu-item {
+    cursor: pointer;
+    padding: 10px 6px;
+    width: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: #222529;
+    font-weight: 400;
+    line-height: 20px;
+    white-space: nowrap;
+    position: relative;
+    cursor: pointer;
+    border-radius: 8px;
+  }
+  .active {
+    font-weight: 600;
+  }
+  .ivu-icon-ios-checkmark {
+    font-weight: 600;
+  }
+}
+</style>
diff --git a/src/language/en.json b/src/language/en.json
index 0d80717a..892ec6d9 100644
--- a/src/language/en.json
+++ b/src/language/en.json
@@ -30,9 +30,29 @@
   "please_choose": "Please choose",
   "string": "string",
   "file": "file",
+  "importFiles": {
+    "file": "File",
+    "createDesign": {
+      "title": "Create template",
+      "customSize": "Custom Size",
+      "systemSize": "Recommend Size",
+      "width": "Width",
+      "height": "Height",
+      "create": "OK",
+      "checkMsg": "Please, check size"
+    },
+    "importFiles": "Import files"
+  },
   "import_files": "Import files",
   "select_json": "Select JSON",
   "repleaceImg": "repleace Image",
+  "bgSeting": {
+    "size": "Size",
+    "color": "Color",
+    "colorMacthing": "Background",
+    "width": "Width",
+    "height": "Height"
+  },
   "waterMark": {
     "text": "WaterMark",
     "modalTitle": "WaterMark Setting",
diff --git a/src/language/zh.json b/src/language/zh.json
index e2631e0e..244931f9 100644
--- a/src/language/zh.json
+++ b/src/language/zh.json
@@ -80,7 +80,8 @@
       "systemSize": "系统推荐尺寸",
       "width": "宽度",
       "height": "高度",
-      "create": "确定"
+      "create": "确定",
+      "checkMsg": "请检查尺寸"
     },
     "importFiles": "导入文件"
   },