From dba93d4363ba270fe5d6d8f9ec0bd2631d594419 Mon Sep 17 00:00:00 2001
From: wanglin2 <1013335014@qq.com>
Date: Sat, 5 Nov 2022 14:42:15 +0800
Subject: [PATCH] =?UTF-8?q?demo=E7=BD=91=E7=AB=99=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E8=8B=B1=E6=96=87=E7=BF=BB=E8=AF=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/.prettierignore                           |   4 +-
 web/package.json                              |   2 +-
 web/src/api/index.js                          |  26 +
 web/src/config/en.js                          | 321 ++++++++++++
 web/src/config/index.js                       | 462 +++---------------
 web/src/config/zh.js                          | 393 +++++++++++++++
 web/src/i18n.js                               |   3 +-
 web/src/lang/en_us.js                         |  84 ++++
 web/src/lang/zh_cn.js                         |  84 ++++
 web/src/pages/Edit/components/BaseStyle.vue   |  10 +-
 web/src/pages/Edit/components/Contextmenu.vue |  12 +-
 .../Edit/components/NavigatorToolbar.vue      |   4 +-
 .../pages/Edit/components/NodeHyperlink.vue   |  12 +-
 web/src/pages/Edit/components/NodeIcon.vue    |   2 +-
 web/src/pages/Edit/components/NodeImage.vue   |  10 +-
 web/src/pages/Edit/components/NodeNote.vue    |   8 +-
 web/src/pages/Edit/components/NodeTag.vue     |  10 +-
 web/src/pages/Edit/components/Outline.vue     |   2 +-
 web/src/pages/Edit/components/Scale.vue       |  14 +-
 web/src/pages/Edit/components/ShortcutKey.vue |   9 +-
 web/src/pages/Edit/components/Structure.vue   |   2 +-
 web/src/pages/Edit/components/Style.vue       |  85 ++--
 web/src/pages/Edit/components/Theme.vue       |   2 +-
 web/src/pages/Edit/components/Toolbar.vue     |  42 +-
 web/src/utils/index.js                        |  10 +-
 25 files changed, 1130 insertions(+), 483 deletions(-)
 create mode 100644 web/src/config/en.js
 create mode 100644 web/src/config/zh.js

diff --git a/web/.prettierignore b/web/.prettierignore
index 58bcc11e..6c7a9a3d 100644
--- a/web/.prettierignore
+++ b/web/.prettierignore
@@ -6,4 +6,6 @@ public
 *.md
 .eslintrc.js
 .prettierignore
-.prettierrc
\ No newline at end of file
+.prettierrc
+package-lock.json
+package.json
\ No newline at end of file
diff --git a/web/package.json b/web/package.json
index 7003fcce..e6e36c5e 100644
--- a/web/package.json
+++ b/web/package.json
@@ -7,7 +7,7 @@
     "build": "vue-cli-service build && node ../copy.js",
     "lint": "vue-cli-service lint",
     "buildLibrary": "vue-cli-service build --target lib --name simpleMindMap ../simple-mind-map/index.js --dest ../simple-mind-map/dist",
-    "format": "prettier --write src/**"
+    "format": "prettier --write src/* src/*/* src/*/*/* src/*/*/*/*"
   },
   "dependencies": {
     "@toast-ui/editor": "^3.1.5",
diff --git a/web/src/api/index.js b/web/src/api/index.js
index c7e1b072..db1ad0a7 100644
--- a/web/src/api/index.js
+++ b/web/src/api/index.js
@@ -3,6 +3,7 @@ import { simpleDeepClone } from 'simple-mind-map/src/utils/index'
 import Vue from 'vue'
 
 const SIMPLE_MIND_MAP_DATA = 'SIMPLE_MIND_MAP_DATA'
+const SIMPLE_MIND_MAP_LANG = 'SIMPLE_MIND_MAP_LANG'
 
 /**
  * @Author: 王林
@@ -75,3 +76,28 @@ export const storeConfig = config => {
     console.log(error)
   }
 }
+
+/**
+ * javascript comment
+ * @Author: 王林
+ * @Date: 2022-11-05 14:36:50
+ * @Desc: 存储语言
+ */
+export const storeLang = lang => {
+  localStorage.setItem(SIMPLE_MIND_MAP_LANG, lang)
+}
+
+/**
+ * javascript comment
+ * @Author: 王林
+ * @Date: 2022-11-05 14:37:36
+ * @Desc: 获取存储的语言
+ */
+export const getLang = () => {
+  let lang = localStorage.getItem(SIMPLE_MIND_MAP_LANG)
+  if (lang) {
+    return lang
+  }
+  storeLang('zh')
+  return 'zh'
+}
diff --git a/web/src/config/en.js b/web/src/config/en.js
new file mode 100644
index 00000000..53305ff6
--- /dev/null
+++ b/web/src/config/en.js
@@ -0,0 +1,321 @@
+// 字体列表
+export const fontFamilyList = [
+  {
+    name: 'Song Ti',
+    value: '宋体, SimSun, Songti SC'
+  },
+  {
+    name: 'Microsoft Yahei',
+    value: '微软雅黑, Microsoft YaHei'
+  },
+  {
+    name: 'Italics',
+    value: '楷体, 楷体_GB2312, SimKai, STKaiti'
+  },
+  {
+    name: 'Boldface',
+    value: '黑体, SimHei, Heiti SC'
+  },
+  {
+    name: 'Official script',
+    value: '隶书, SimLi'
+  },
+  {
+    name: 'Andale Mono',
+    value: 'andale mono'
+  },
+  {
+    name: 'Arial',
+    value: 'arial, helvetica, sans-serif'
+  },
+  {
+    name: 'arialBlack',
+    value: 'arial black, avant garde'
+  },
+  {
+    name: 'Comic Sans Ms',
+    value: 'comic sans ms'
+  },
+  {
+    name: 'Impact',
+    value: 'impact, chicago'
+  },
+  {
+    name: 'Times New Roman',
+    value: 'times new roman'
+  },
+  {
+    name: 'Sans-Serif',
+    value: 'sans-serif'
+  },
+  {
+    name: 'serif',
+    value: 'serif'
+  }
+]
+
+// 边框样式
+export const borderDasharrayList = [
+  {
+    name: 'Solid',
+    value: 'none'
+  },
+  {
+    name: 'Dotted1',
+    value: '5,5'
+  },
+  {
+    name: 'Dotted2',
+    value: '10,10'
+  },
+  {
+    name: 'Dotted3',
+    value: '20,10,5,5,5,10'
+  },
+  {
+    name: 'Dotted4',
+    value: '5, 5, 1, 5'
+  },
+  {
+    name: 'Dotted5',
+    value: '15, 10, 5, 10, 15'
+  },
+  {
+    name: 'Dotted6',
+    value: '1, 5'
+  }
+]
+
+// 连线风格
+export const lineStyleList = [
+  {
+    name: 'Straight',
+    value: 'straight'
+  },
+  {
+    name: 'Curve',
+    value: 'curve'
+  },
+  {
+    name: 'Direct',
+    value: 'direct'
+  }
+]
+
+// 图片重复方式
+export const backgroundRepeatList = [
+  {
+    name: 'No repeat',
+    value: 'no-repeat'
+  },
+  {
+    name: 'Repeat',
+    value: 'repeat'
+  },
+  {
+    name: 'Repeat-x',
+    value: 'repeat-x'
+  },
+  {
+    name: 'Repeat-y',
+    value: 'repeat-y'
+  }
+]
+
+// 背景图片定位
+export const backgroundPositionList = [
+  {
+    name: 'Default',
+    value: '0% 0%'
+  },
+  {
+    name: 'Left top',
+    value: 'left top'
+  },
+  {
+    name: 'Left center',
+    value: 'left center'
+  },
+  {
+    name: 'Left bottom',
+    value: 'left bottom'
+  },
+  {
+    name: 'Right top',
+    value: 'right top'
+  },
+  {
+    name: 'Right center',
+    value: 'right center'
+  },
+  {
+    name: 'Right bottom',
+    value: 'right bottom'
+  },
+  {
+    name: 'Center top',
+    value: 'center top'
+  },
+  {
+    name: 'Center center',
+    value: 'center center'
+  },
+  {
+    name: 'Center bottom',
+    value: 'center bottom'
+  }
+]
+
+// 快捷键列表
+export const shortcutKeyList = [
+  {
+    type: 'Node operation',
+    list: [
+      {
+        icon: 'icontianjiazijiedian',
+        name: 'Inert child node',
+        value: 'Tab'
+      },
+      {
+        icon: 'iconjiedian',
+        name: 'Insert sibling node',
+        value: 'Enter'
+      },
+      {
+        icon: 'iconshangyi',
+        name: 'Move up node',
+        value: 'Ctrl + ↑'
+      },
+      {
+        icon: 'iconxiayi',
+        name: 'Move down node',
+        value: 'Ctrl + ↓'
+      },
+      {
+        icon: 'icongaikuozonglan',
+        name: 'Insert summary',
+        value: 'Ctrl + S'
+      },
+      {
+        icon: 'iconzhankai',
+        name: 'Expand/UnExpand node',
+        value: '/'
+      },
+      {
+        icon: 'iconshanchu',
+        name: 'Delete node',
+        value: 'Delete | Backspace'
+      },
+      {
+        icon: 'iconfuzhi',
+        name: 'Copy node',
+        value: 'Ctrl + C'
+      },
+      {
+        icon: 'iconjianqie',
+        name: 'Cut node',
+        value: 'Ctrl + X'
+      },
+      {
+        icon: 'iconniantie',
+        name: 'Paste node',
+        value: 'Ctrl + V'
+      },
+      {
+        icon: 'iconbianji',
+        name: 'Edit node',
+        value: 'F2'
+      },
+      {
+        icon: 'iconhuanhang',
+        name: 'Text Wrap',
+        value: 'Shift + Enter'
+      },
+      {
+        icon: 'iconhoutui-shi',
+        name: 'Undo',
+        value: 'Ctrl + Z'
+      },
+      {
+        icon: 'iconqianjin1',
+        name: 'Redo',
+        value: 'Ctrl + Y'
+      },
+      {
+        icon: 'iconquanxuan',
+        name: 'Select All',
+        value: 'Ctrl + A'
+      },
+      {
+        icon: 'iconquanxuan',
+        name: 'Multiple choice',
+        value: 'Right click / Ctrl + Left click'
+      },
+      {
+        icon: 'iconzhengli',
+        name: 'Arrange layout',
+        value: 'Ctrl + L'
+      }
+    ]
+  },
+  {
+    type: 'Canvas operation',
+    list: [
+      {
+        icon: 'iconfangda',
+        name: 'Zoom in',
+        value: 'Ctrl + +'
+      },
+      {
+        icon: 'iconsuoxiao',
+        name: 'Zoom out',
+        value: 'Ctrl + -'
+      },
+      {
+        icon: 'icondingwei',
+        name: 'Reset',
+        value: 'Ctrl + Enter'
+      }
+    ]
+  }
+]
+
+// 形状列表
+export const shapeList = [
+  {
+    name: 'Rectangle',
+    value: 'rectangle'
+  },
+  {
+    name: 'Diamond',
+    value: 'diamond'
+  },
+  {
+    name: 'Parallelogram',
+    value: 'parallelogram'
+  },
+  {
+    name: 'Rounded rectangle',
+    value: 'roundedRectangle'
+  },
+  {
+    name: 'Octagonal rectangle',
+    value: 'octagonalRectangle'
+  },
+  {
+    name: 'Outer triangular rectangle',
+    value: 'outerTriangularRectangle'
+  },
+  {
+    name: 'Inner triangular rectangle',
+    value: 'innerTriangularRectangle'
+  },
+  {
+    name: 'Ellipse',
+    value: 'ellipse'
+  },
+  {
+    name: 'Circle',
+    value: 'circle'
+  }
+]
diff --git a/web/src/config/index.js b/web/src/config/index.js
index 3f630e46..cf506c98 100644
--- a/web/src/config/index.js
+++ b/web/src/config/index.js
@@ -1,393 +1,79 @@
-// 字体列表
-export const fontFamilyList = [
-  {
-    name: '宋体',
-    value: '宋体, SimSun, Songti SC'
-  },
-  {
-    name: '微软雅黑',
-    value: '微软雅黑, Microsoft YaHei'
-  },
-  {
-    name: '楷体',
-    value: '楷体, 楷体_GB2312, SimKai, STKaiti'
-  },
-  {
-    name: '黑体',
-    value: '黑体, SimHei, Heiti SC'
-  },
-  {
-    name: '隶书',
-    value: '隶书, SimLi'
-  },
-  {
-    name: 'Andale Mono',
-    value: 'andale mono'
-  },
-  {
-    name: 'Arial',
-    value: 'arial, helvetica, sans-serif'
-  },
-  {
-    name: 'arialBlack',
-    value: 'arial black, avant garde'
-  },
-  {
-    name: 'Comic Sans Ms',
-    value: 'comic sans ms'
-  },
-  {
-    name: 'Impact',
-    value: 'impact, chicago'
-  },
-  {
-    name: 'Times New Roman',
-    value: 'times new roman'
-  },
-  {
-    name: 'Sans-Serif',
-    value: 'sans-serif'
-  },
-  {
-    name: 'serif',
-    value: 'serif'
-  }
-]
+import {
+  fontSizeList,
+  lineHeightList,
+  colorList,
+  borderWidthList,
+  borderRadiusList,
+  lineWidthList,
+  store,
+  langList,
+  fontFamilyList as fontFamilyListZh,
+  borderDasharrayList as borderDasharrayListZh,
+  lineStyleList as lineStyleListZh,
+  backgroundRepeatList as backgroundRepeatListZh,
+  backgroundPositionList as backgroundPositionListZh,
+  shortcutKeyList as shortcutKeyListZh,
+  shapeList as shapeListZh
+} from './zh'
+import {
+  fontFamilyList as fontFamilyListEn,
+  borderDasharrayList as borderDasharrayListEn,
+  lineStyleList as lineStyleListEn,
+  backgroundRepeatList as backgroundRepeatListEn,
+  backgroundPositionList as backgroundPositionListEn,
+  shortcutKeyList as shortcutKeyListEn,
+  shapeList as shapeListEn
+} from './en'
 
-// 字号
-export const fontSizeList = [10, 12, 16, 18, 24, 32, 48]
-
-// 行高
-export const lineHeightList = [1, 1.5, 2, 2.5, 3]
-
-// 颜色
-export const colorList = [
-  '#4D4D4D',
-  '#999999',
-  '#FFFFFF',
-  '#F44E3B',
-  '#FE9200',
-  '#FCDC00',
-  '#DBDF00',
-  '#A4DD00',
-  '#68CCCA',
-  '#73D8FF',
-  '#AEA1FF',
-  '#FDA1FF',
-  '#333333',
-  '#808080',
-  '#cccccc',
-  '#D33115',
-  '#E27300',
-  '#FCC400',
-  '#B0BC00',
-  '#68BC00',
-  '#16A5A5',
-  '#009CE0',
-  '#7B64FF',
-  '#FA28FF',
-  '#000000',
-  '#666666',
-  '#B3B3B3',
-  '#9F0500',
-  '#C45100',
-  '#FB9E00',
-  '#808900',
-  '#194D33',
-  '#0C797D',
-  '#0062B1',
-  '#653294',
-  '#AB149E'
-]
-
-// 边框宽度
-export const borderWidthList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
-
-// 边框样式
-export const borderDasharrayList = [
-  {
-    name: '实线',
-    value: 'none'
-  },
-  {
-    name: '虚线1',
-    value: '5,5'
-  },
-  {
-    name: '虚线2',
-    value: '10,10'
-  },
-  {
-    name: '虚线3',
-    value: '20,10,5,5,5,10'
-  },
-  {
-    name: '虚线4',
-    value: '5, 5, 1, 5'
-  },
-  {
-    name: '虚线5',
-    value: '15, 10, 5, 10, 15'
-  },
-  {
-    name: '虚线6',
-    value: '1, 5'
-  }
-]
-
-// 圆角
-export const borderRadiusList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
-
-// 线宽
-export const lineWidthList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
-
-// 连线风格
-export const lineStyleList = [
-  {
-    name: '直线',
-    value: 'straight'
-  },
-  {
-    name: '曲线',
-    value: 'curve'
-  },
-  {
-    name: '直连',
-    value: 'direct'
-  }
-]
-
-// 图片重复方式
-export const backgroundRepeatList = [
-  {
-    name: '不重复',
-    value: 'no-repeat'
-  },
-  {
-    name: '重复',
-    value: 'repeat'
-  },
-  {
-    name: '水平方向重复',
-    value: 'repeat-x'
-  },
-  {
-    name: '垂直方向重复',
-    value: 'repeat-y'
-  }
-]
-
-// 背景图片定位
-export const backgroundPositionList = [
-  {
-    name: '默认',
-    value: '0% 0%'
-  },
-  {
-    name: '左上',
-    value: 'left top'
-  },
-  {
-    name: '左中',
-    value: 'left center'
-  },
-  {
-    name: '左下',
-    value: 'left bottom'
-  },
-  {
-    name: '右上',
-    value: 'right top'
-  },
-  {
-    name: '右中',
-    value: 'right center'
-  },
-  {
-    name: '右下',
-    value: 'right bottom'
-  },
-  {
-    name: '中上',
-    value: 'center top'
-  },
-  {
-    name: '居中',
-    value: 'center center'
-  },
-  {
-    name: '中下',
-    value: 'center bottom'
-  }
-]
-
-// 数据存储
-export const store = {
-  sidebarZIndex: 1 //侧边栏zIndex
+const fontFamilyList = {
+  zh: fontFamilyListZh,
+  en: fontFamilyListEn
 }
 
-// 快捷键列表
-export const shortcutKeyList = [
-  {
-    type: '节点操作',
-    list: [
-      {
-        icon: 'icontianjiazijiedian',
-        name: '插入下级节点',
-        value: 'Tab'
-      },
-      {
-        icon: 'iconjiedian',
-        name: '插入同级节点',
-        value: 'Enter'
-      },
-      {
-        icon: 'iconshangyi',
-        name: '上移节点',
-        value: 'Ctrl + ↑'
-      },
-      {
-        icon: 'iconxiayi',
-        name: '下移节点',
-        value: 'Ctrl + ↓'
-      },
-      {
-        icon: 'icongaikuozonglan',
-        name: '插入概要',
-        value: 'Ctrl + S'
-      },
-      {
-        icon: 'iconzhankai',
-        name: '展开/收起节点',
-        value: '/'
-      },
-      {
-        icon: 'iconshanchu',
-        name: '删除节点',
-        value: 'Delete | Backspace'
-      },
-      {
-        icon: 'iconfuzhi',
-        name: '复制节点',
-        value: 'Ctrl + C'
-      },
-      {
-        icon: 'iconjianqie',
-        name: '剪切节点',
-        value: 'Ctrl + X'
-      },
-      {
-        icon: 'iconniantie',
-        name: '粘贴节点',
-        value: 'Ctrl + V'
-      },
-      {
-        icon: 'iconbianji',
-        name: '编辑节点',
-        value: 'F2'
-      },
-      {
-        icon: 'iconhuanhang',
-        name: '文本换行',
-        value: 'Shift + Enter'
-      },
-      {
-        icon: 'iconhoutui-shi',
-        name: '回退',
-        value: 'Ctrl + Z'
-      },
-      {
-        icon: 'iconqianjin1',
-        name: '前进',
-        value: 'Ctrl + Y'
-      },
-      {
-        icon: 'iconquanxuan',
-        name: '全选',
-        value: 'Ctrl + A'
-      },
-      {
-        icon: 'iconquanxuan',
-        name: '多选',
-        value: '右键 / Ctrl + 左键'
-      },
-      {
-        icon: 'iconzhengli',
-        name: '一键整理布局',
-        value: 'Ctrl + L'
-      }
-    ]
-  },
-  {
-    type: '画布操作',
-    list: [
-      {
-        icon: 'iconfangda',
-        name: '放大',
-        value: 'Ctrl + +'
-      },
-      {
-        icon: 'iconsuoxiao',
-        name: '缩小',
-        value: 'Ctrl + -'
-      },
-      {
-        icon: 'icondingwei',
-        name: '恢复默认',
-        value: 'Ctrl + Enter'
-      }
-    ]
-  }
-]
+const borderDasharrayList = {
+  zh: borderDasharrayListZh,
+  en: borderDasharrayListEn
+}
 
-// 形状列表
-export const shapeList = [
-  {
-    name: '矩形',
-    value: 'rectangle'
-  },
-  {
-    name: '菱形',
-    value: 'diamond'
-  },
-  {
-    name: '平行四边形',
-    value: 'parallelogram'
-  },
-  {
-    name: '圆角矩形',
-    value: 'roundedRectangle'
-  },
-  {
-    name: '八角矩形',
-    value: 'octagonalRectangle'
-  },
-  {
-    name: '外三角矩形',
-    value: 'outerTriangularRectangle'
-  },
-  {
-    name: '内三角矩形',
-    value: 'innerTriangularRectangle'
-  },
-  {
-    name: '椭圆',
-    value: 'ellipse'
-  },
-  {
-    name: '圆',
-    value: 'circle'
-  }
-]
+const lineStyleList = {
+  zh: lineStyleListZh,
+  en: lineStyleListEn
+}
 
-// 多语言列表
-export const langList = [
-  {
-    value: 'zh',
-    name: '简体中文'
-  },
-  {
-    value: 'en',
-    name: 'English'
-  }
-]
\ No newline at end of file
+const backgroundRepeatList = {
+  zh: backgroundRepeatListZh,
+  en: backgroundRepeatListEn
+}
+
+const backgroundPositionList = {
+  zh: backgroundPositionListZh,
+  en: backgroundPositionListEn
+}
+
+const shortcutKeyList = {
+  zh: shortcutKeyListZh,
+  en: shortcutKeyListEn
+}
+
+const shapeList = {
+  zh: shapeListZh,
+  en: shapeListEn
+}
+
+export {
+  fontSizeList,
+  lineHeightList,
+  borderWidthList,
+  borderRadiusList,
+  lineWidthList,
+  store,
+  colorList,
+  langList,
+  fontFamilyList,
+  borderDasharrayList,
+  lineStyleList,
+  backgroundRepeatList,
+  backgroundPositionList,
+  shortcutKeyList,
+  shapeList
+}
diff --git a/web/src/config/zh.js b/web/src/config/zh.js
new file mode 100644
index 00000000..b38e164f
--- /dev/null
+++ b/web/src/config/zh.js
@@ -0,0 +1,393 @@
+// 字体列表
+export const fontFamilyList = [
+  {
+    name: '宋体',
+    value: '宋体, SimSun, Songti SC'
+  },
+  {
+    name: '微软雅黑',
+    value: '微软雅黑, Microsoft YaHei'
+  },
+  {
+    name: '楷体',
+    value: '楷体, 楷体_GB2312, SimKai, STKaiti'
+  },
+  {
+    name: '黑体',
+    value: '黑体, SimHei, Heiti SC'
+  },
+  {
+    name: '隶书',
+    value: '隶书, SimLi'
+  },
+  {
+    name: 'Andale Mono',
+    value: 'andale mono'
+  },
+  {
+    name: 'Arial',
+    value: 'arial, helvetica, sans-serif'
+  },
+  {
+    name: 'arialBlack',
+    value: 'arial black, avant garde'
+  },
+  {
+    name: 'Comic Sans Ms',
+    value: 'comic sans ms'
+  },
+  {
+    name: 'Impact',
+    value: 'impact, chicago'
+  },
+  {
+    name: 'Times New Roman',
+    value: 'times new roman'
+  },
+  {
+    name: 'Sans-Serif',
+    value: 'sans-serif'
+  },
+  {
+    name: 'serif',
+    value: 'serif'
+  }
+]
+
+// 字号
+export const fontSizeList = [10, 12, 16, 18, 24, 32, 48]
+
+// 行高
+export const lineHeightList = [1, 1.5, 2, 2.5, 3]
+
+// 颜色
+export const colorList = [
+  '#4D4D4D',
+  '#999999',
+  '#FFFFFF',
+  '#F44E3B',
+  '#FE9200',
+  '#FCDC00',
+  '#DBDF00',
+  '#A4DD00',
+  '#68CCCA',
+  '#73D8FF',
+  '#AEA1FF',
+  '#FDA1FF',
+  '#333333',
+  '#808080',
+  '#cccccc',
+  '#D33115',
+  '#E27300',
+  '#FCC400',
+  '#B0BC00',
+  '#68BC00',
+  '#16A5A5',
+  '#009CE0',
+  '#7B64FF',
+  '#FA28FF',
+  '#000000',
+  '#666666',
+  '#B3B3B3',
+  '#9F0500',
+  '#C45100',
+  '#FB9E00',
+  '#808900',
+  '#194D33',
+  '#0C797D',
+  '#0062B1',
+  '#653294',
+  '#AB149E'
+]
+
+// 边框宽度
+export const borderWidthList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+
+// 边框样式
+export const borderDasharrayList = [
+  {
+    name: '实线',
+    value: 'none'
+  },
+  {
+    name: '虚线1',
+    value: '5,5'
+  },
+  {
+    name: '虚线2',
+    value: '10,10'
+  },
+  {
+    name: '虚线3',
+    value: '20,10,5,5,5,10'
+  },
+  {
+    name: '虚线4',
+    value: '5, 5, 1, 5'
+  },
+  {
+    name: '虚线5',
+    value: '15, 10, 5, 10, 15'
+  },
+  {
+    name: '虚线6',
+    value: '1, 5'
+  }
+]
+
+// 圆角
+export const borderRadiusList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+
+// 线宽
+export const lineWidthList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+
+// 连线风格
+export const lineStyleList = [
+  {
+    name: '直线',
+    value: 'straight'
+  },
+  {
+    name: '曲线',
+    value: 'curve'
+  },
+  {
+    name: '直连',
+    value: 'direct'
+  }
+]
+
+// 图片重复方式
+export const backgroundRepeatList = [
+  {
+    name: '不重复',
+    value: 'no-repeat'
+  },
+  {
+    name: '重复',
+    value: 'repeat'
+  },
+  {
+    name: '水平方向重复',
+    value: 'repeat-x'
+  },
+  {
+    name: '垂直方向重复',
+    value: 'repeat-y'
+  }
+]
+
+// 背景图片定位
+export const backgroundPositionList = [
+  {
+    name: '默认',
+    value: '0% 0%'
+  },
+  {
+    name: '左上',
+    value: 'left top'
+  },
+  {
+    name: '左中',
+    value: 'left center'
+  },
+  {
+    name: '左下',
+    value: 'left bottom'
+  },
+  {
+    name: '右上',
+    value: 'right top'
+  },
+  {
+    name: '右中',
+    value: 'right center'
+  },
+  {
+    name: '右下',
+    value: 'right bottom'
+  },
+  {
+    name: '中上',
+    value: 'center top'
+  },
+  {
+    name: '居中',
+    value: 'center center'
+  },
+  {
+    name: '中下',
+    value: 'center bottom'
+  }
+]
+
+// 数据存储
+export const store = {
+  sidebarZIndex: 1 //侧边栏zIndex
+}
+
+// 快捷键列表
+export const shortcutKeyList = [
+  {
+    type: '节点操作',
+    list: [
+      {
+        icon: 'icontianjiazijiedian',
+        name: '插入下级节点',
+        value: 'Tab'
+      },
+      {
+        icon: 'iconjiedian',
+        name: '插入同级节点',
+        value: 'Enter'
+      },
+      {
+        icon: 'iconshangyi',
+        name: '上移节点',
+        value: 'Ctrl + ↑'
+      },
+      {
+        icon: 'iconxiayi',
+        name: '下移节点',
+        value: 'Ctrl + ↓'
+      },
+      {
+        icon: 'icongaikuozonglan',
+        name: '插入概要',
+        value: 'Ctrl + S'
+      },
+      {
+        icon: 'iconzhankai',
+        name: '展开/收起节点',
+        value: '/'
+      },
+      {
+        icon: 'iconshanchu',
+        name: '删除节点',
+        value: 'Delete | Backspace'
+      },
+      {
+        icon: 'iconfuzhi',
+        name: '复制节点',
+        value: 'Ctrl + C'
+      },
+      {
+        icon: 'iconjianqie',
+        name: '剪切节点',
+        value: 'Ctrl + X'
+      },
+      {
+        icon: 'iconniantie',
+        name: '粘贴节点',
+        value: 'Ctrl + V'
+      },
+      {
+        icon: 'iconbianji',
+        name: '编辑节点',
+        value: 'F2'
+      },
+      {
+        icon: 'iconhuanhang',
+        name: '文本换行',
+        value: 'Shift + Enter'
+      },
+      {
+        icon: 'iconhoutui-shi',
+        name: '回退',
+        value: 'Ctrl + Z'
+      },
+      {
+        icon: 'iconqianjin1',
+        name: '前进',
+        value: 'Ctrl + Y'
+      },
+      {
+        icon: 'iconquanxuan',
+        name: '全选',
+        value: 'Ctrl + A'
+      },
+      {
+        icon: 'iconquanxuan',
+        name: '多选',
+        value: '右键 / Ctrl + 左键'
+      },
+      {
+        icon: 'iconzhengli',
+        name: '一键整理布局',
+        value: 'Ctrl + L'
+      }
+    ]
+  },
+  {
+    type: '画布操作',
+    list: [
+      {
+        icon: 'iconfangda',
+        name: '放大',
+        value: 'Ctrl + +'
+      },
+      {
+        icon: 'iconsuoxiao',
+        name: '缩小',
+        value: 'Ctrl + -'
+      },
+      {
+        icon: 'icondingwei',
+        name: '恢复默认',
+        value: 'Ctrl + Enter'
+      }
+    ]
+  }
+]
+
+// 形状列表
+export const shapeList = [
+  {
+    name: '矩形',
+    value: 'rectangle'
+  },
+  {
+    name: '菱形',
+    value: 'diamond'
+  },
+  {
+    name: '平行四边形',
+    value: 'parallelogram'
+  },
+  {
+    name: '圆角矩形',
+    value: 'roundedRectangle'
+  },
+  {
+    name: '八角矩形',
+    value: 'octagonalRectangle'
+  },
+  {
+    name: '外三角矩形',
+    value: 'outerTriangularRectangle'
+  },
+  {
+    name: '内三角矩形',
+    value: 'innerTriangularRectangle'
+  },
+  {
+    name: '椭圆',
+    value: 'ellipse'
+  },
+  {
+    name: '圆',
+    value: 'circle'
+  }
+]
+
+// 多语言列表
+export const langList = [
+  {
+    value: 'zh',
+    name: '简体中文'
+  },
+  {
+    value: 'en',
+    name: 'English'
+  }
+]
diff --git a/web/src/i18n.js b/web/src/i18n.js
index f665233f..24559442 100644
--- a/web/src/i18n.js
+++ b/web/src/i18n.js
@@ -1,11 +1,12 @@
 import Vue from 'vue'
 import VueI18n from 'vue-i18n'
 import messages from './lang'
+import { getLang } from '@/api'
 
 Vue.use(VueI18n)
 
 const i18n = new VueI18n({
-  locale: 'zh',
+  locale: getLang(),
   messages
 })
 
diff --git a/web/src/lang/en_us.js b/web/src/lang/en_us.js
index 4c7ec71e..835e8493 100644
--- a/web/src/lang/en_us.js
+++ b/web/src/lang/en_us.js
@@ -76,5 +76,89 @@ export default {
     openMiniMap: 'Open mini map',
     readonly: 'Readonly',
     edit: 'Edit'
+  },
+  nodeHyperlink: {
+    title: 'Link',
+    link: 'Href',
+    name: 'Name'
+  },
+  nodeIcon: {
+    title: 'Icon'
+  },
+  nodeImage: {
+    title: 'Image',
+    imgTitle: 'Title'
+  },
+  nodeNote: {
+    title: 'Note'
+  },
+  nodeTag: {
+    title: 'Tag',
+    addTip: 'Press Enter to add'
+  },
+  outline: {
+    title: 'Outline'
+  },
+  scale: {
+    zoomIn: 'Zoom in',
+    zoomOut: 'Zoom out'
+  },
+  shortcutKey: {
+    title: 'Shortcut key'
+  },
+  strusture: {
+    title: 'Strusture'
+  },
+  style: {
+    title: 'Node style',
+    normal: 'Normal',
+    active: 'Active',
+    text: 'Text',
+    fontFamily: 'Font family',
+    fontSize: 'Font size',
+    lineHeight: 'Line height',
+    color: 'color',
+    addFontWeight: 'add font weight',
+    italic: 'Italic',
+    textDecoration: 'Text decoration',
+    underline: 'Underline',
+    lineThrough: 'Line through',
+    overline: 'Overline',
+    border: 'Border',
+    style: 'Style',
+    width: 'Width',
+    borderRadius: 'Border radius',
+    background: 'Background',
+    shape: 'Shape',
+    line: 'Line',
+    nodePadding: 'Node padding',
+    horizontal: 'Horizontal',
+    vertical: 'Vertical'
+  },
+  theme: {
+    title: 'Theme'
+  },
+  toolbar: {
+    undo: 'Undo',
+    redo: 'Redo',
+    insertSiblingNode: 'Insert sibling node',
+    insertChildNode: 'Insert child node',
+    deleteNode: 'Delete node',
+    image: 'Image',
+    icon: 'Icon',
+    link: 'Link',
+    note: 'Note',
+    tag: 'Tag',
+    summary: 'Summary',
+    displayOutline: 'Display outline',
+    baseStyle: 'Base style',
+    theme: 'Theme',
+    strusture: 'Strusture',
+    newFile: 'New file',
+    openFile: 'Open file',
+    saveAs: 'Save as',
+    import: 'Import',
+    export: 'Export',
+    shortcutKey: 'Shortcut key'
   }
 }
diff --git a/web/src/lang/zh_cn.js b/web/src/lang/zh_cn.js
index 7fb2be58..213df682 100644
--- a/web/src/lang/zh_cn.js
+++ b/web/src/lang/zh_cn.js
@@ -76,5 +76,89 @@ export default {
     openMiniMap: '开启小地图',
     readonly: '只读模式',
     edit: '编辑模式'
+  },
+  nodeHyperlink: {
+    title: '超链接',
+    link: '链接',
+    name: '名称'
+  },
+  nodeIcon: {
+    title: '图标'
+  },
+  nodeImage: {
+    title: '图片',
+    imgTitle: '图片标题'
+  },
+  nodeNote: {
+    title: '备注'
+  },
+  nodeTag: {
+    title: '标签',
+    addTip: '请按回车键添加'
+  },
+  outline: {
+    title: '大纲'
+  },
+  scale: {
+    zoomIn: '放大',
+    zoomOut: '缩小'
+  },
+  shortcutKey: {
+    title: '快捷键'
+  },
+  strusture: {
+    title: '结构'
+  },
+  style: {
+    title: '节点样式',
+    normal: '常态',
+    active: '选中状态',
+    text: '文字',
+    fontFamily: '字体',
+    fontSize: '字号',
+    lineHeight: '行高',
+    color: '颜色',
+    addFontWeight: '加粗',
+    italic: '斜体',
+    textDecoration: '划线',
+    underline: '下划线',
+    lineThrough: '中划线',
+    overline: '上划线',
+    border: '边框',
+    style: '样式',
+    width: '宽度',
+    borderRadius: '圆角',
+    background: '背景',
+    shape: '形状',
+    line: '线条',
+    nodePadding: '节点内边距',
+    horizontal: '水平',
+    vertical: '垂直'
+  },
+  theme: {
+    title: '主题'
+  },
+  toolbar: {
+    undo: '回退',
+    redo: '前进',
+    insertSiblingNode: '插入同级节点',
+    insertChildNode: '插入子节点',
+    deleteNode: '删除节点',
+    image: '图片',
+    icon: '图标',
+    link: '超链接',
+    note: '备注',
+    tag: '标签',
+    summary: '概要',
+    displayOutline: '显示大纲',
+    baseStyle: '基础样式',
+    theme: '主题',
+    strusture: '结构',
+    newFile: '新建',
+    openFile: '打开',
+    saveAs: '另存为',
+    import: '导入',
+    export: '导出',
+    shortcutKey: '快捷键'
   }
 }
diff --git a/web/src/pages/Edit/components/BaseStyle.vue b/web/src/pages/Edit/components/BaseStyle.vue
index c35a14c0..13765843 100644
--- a/web/src/pages/Edit/components/BaseStyle.vue
+++ b/web/src/pages/Edit/components/BaseStyle.vue
@@ -323,8 +323,6 @@ export default {
   data() {
     return {
       lineWidthList,
-      lineStyleList,
-      backgroundRepeatList,
       activeTab: 'color',
       marginActiveTab: 'second',
       style: {
@@ -346,6 +344,14 @@ export default {
       }
     }
   },
+  computed: {
+    lineStyleList() {
+      return lineStyleList[this.$i18n.locale] || lineStyleList.zh
+    },
+    backgroundRepeatList() {
+      return backgroundRepeatList[this.$i18n.locale] || backgroundRepeatList.zh
+    }
+  },
   created() {
     this.$bus.$on('showBaseStyle', () => {
       this.$refs.sidebar.show = false
diff --git a/web/src/pages/Edit/components/Contextmenu.vue b/web/src/pages/Edit/components/Contextmenu.vue
index 0b112bdc..b1ec0a6f 100644
--- a/web/src/pages/Edit/components/Contextmenu.vue
+++ b/web/src/pages/Edit/components/Contextmenu.vue
@@ -116,8 +116,12 @@ export default {
       type: '',
       isMousedown: false,
       mosuedownX: 0,
-      mosuedownY: 0,
-      expandList: [
+      mosuedownY: 0
+    }
+  },
+  computed: {
+    expandList() {
+      return [
         this.$t('contextmenu.level1'),
         this.$t('contextmenu.level2'),
         this.$t('contextmenu.level3'),
@@ -125,9 +129,7 @@ export default {
         this.$t('contextmenu.level5'),
         this.$t('contextmenu.level6')
       ]
-    }
-  },
-  computed: {
+    },
     insertNodeBtnDisabled() {
       return !this.node || this.node.isRoot
     },
diff --git a/web/src/pages/Edit/components/NavigatorToolbar.vue b/web/src/pages/Edit/components/NavigatorToolbar.vue
index c5f3ce6d..f61ed7be 100644
--- a/web/src/pages/Edit/components/NavigatorToolbar.vue
+++ b/web/src/pages/Edit/components/NavigatorToolbar.vue
@@ -43,6 +43,7 @@ import Scale from './Scale'
 import Fullscreen from './Fullscreen'
 import { langList } from '@/config'
 import i18n from '@/i18n'
+import { storeLang, getLang } from '@/api'
 
 /**
  * @Author: 王林
@@ -63,7 +64,7 @@ export default {
   data() {
     return {
       langList,
-      lang: 'zh',
+      lang: getLang(),
       isReadonly: false,
       openMiniMap: false
     }
@@ -82,6 +83,7 @@ export default {
 
     onLangChange(lang) {
       i18n.locale = lang
+      storeLang(lang)
     }
   }
 }
diff --git a/web/src/pages/Edit/components/NodeHyperlink.vue b/web/src/pages/Edit/components/NodeHyperlink.vue
index 4e364111..a6a96b56 100644
--- a/web/src/pages/Edit/components/NodeHyperlink.vue
+++ b/web/src/pages/Edit/components/NodeHyperlink.vue
@@ -1,12 +1,12 @@
 <template>
   <el-dialog
     class="nodeDialog"
-    title="超链接"
+    :title="$t('nodeHyperlink.title')"
     :visible.sync="dialogVisible"
     width="500"
   >
     <div class="item">
-      <span class="name">链接</span>
+      <span class="name">{{ $t('nodeHyperlink.link') }}</span>
       <el-input
         v-model="link"
         size="mini"
@@ -14,12 +14,14 @@
       ></el-input>
     </div>
     <div class="item">
-      <span class="name">名称</span>
+      <span class="name">{{ $t('nodeHyperlink.name') }}</span>
       <el-input v-model="linkTitle" size="mini"></el-input>
     </div>
     <span slot="footer" class="dialog-footer">
-      <el-button @click="cancel">取 消</el-button>
-      <el-button type="primary" @click="confirm">确 定</el-button>
+      <el-button @click="cancel">{{ $t('dialog.cancel') }}</el-button>
+      <el-button type="primary" @click="confirm">{{
+        $t('dialog.confirm')
+      }}</el-button>
     </span>
   </el-dialog>
 </template>
diff --git a/web/src/pages/Edit/components/NodeIcon.vue b/web/src/pages/Edit/components/NodeIcon.vue
index 89eed139..e9b34eeb 100644
--- a/web/src/pages/Edit/components/NodeIcon.vue
+++ b/web/src/pages/Edit/components/NodeIcon.vue
@@ -1,7 +1,7 @@
 <template>
   <el-dialog
     class="nodeDialog"
-    title="图标"
+    :title="$t('nodeIcon.title')"
     :visible.sync="dialogVisible"
     width="500"
   >
diff --git a/web/src/pages/Edit/components/NodeImage.vue b/web/src/pages/Edit/components/NodeImage.vue
index 938ddc3b..2f105e31 100644
--- a/web/src/pages/Edit/components/NodeImage.vue
+++ b/web/src/pages/Edit/components/NodeImage.vue
@@ -1,18 +1,20 @@
 <template>
   <el-dialog
     class="nodeDialog"
-    title="图片"
+    :title="$t('nodeImage.title')"
     :visible.sync="dialogVisible"
     width="500"
   >
     <ImgUpload ref="ImgUpload" v-model="img"></ImgUpload>
     <div class="imgTitleBox">
-      <span class="title">图片标题</span>
+      <span class="title">{{ $t('nodeImage.imgTitle') }}</span>
       <el-input v-model="imgTitle" size="mini"></el-input>
     </div>
     <span slot="footer" class="dialog-footer">
-      <el-button @click="cancel">取 消</el-button>
-      <el-button type="primary" @click="confirm">确 定</el-button>
+      <el-button @click="cancel">{{ $t('dialog.cancel') }}</el-button>
+      <el-button type="primary" @click="confirm">{{
+        $t('dialog.confirm')
+      }}</el-button>
     </span>
   </el-dialog>
 </template>
diff --git a/web/src/pages/Edit/components/NodeNote.vue b/web/src/pages/Edit/components/NodeNote.vue
index 725a25dc..63f66c9e 100644
--- a/web/src/pages/Edit/components/NodeNote.vue
+++ b/web/src/pages/Edit/components/NodeNote.vue
@@ -1,7 +1,7 @@
 <template>
   <el-dialog
     class="nodeDialog"
-    title="备注"
+    :title="$t('nodeNote.title')"
     :visible.sync="dialogVisible"
     width="500"
   >
@@ -15,8 +15,10 @@
     <div class="noteEditor" ref="noteEditor"></div>
     <!-- <div class="tip">换行请使用：Enter+Shift</div> -->
     <span slot="footer" class="dialog-footer">
-      <el-button @click="cancel">取 消</el-button>
-      <el-button type="primary" @click="confirm">确 定</el-button>
+      <el-button @click="cancel">{{ $t('dialog.cancel') }}</el-button>
+      <el-button type="primary" @click="confirm">{{
+        $t('dialog.confirm')
+      }}</el-button>
     </span>
   </el-dialog>
 </template>
diff --git a/web/src/pages/Edit/components/NodeTag.vue b/web/src/pages/Edit/components/NodeTag.vue
index 41c1eee9..5eebdd07 100644
--- a/web/src/pages/Edit/components/NodeTag.vue
+++ b/web/src/pages/Edit/components/NodeTag.vue
@@ -1,7 +1,7 @@
 <template>
   <el-dialog
     class="nodeDialog"
-    title="标签"
+    :title="$t('nodeTag.title')"
     :visible.sync="dialogVisible"
     width="500"
   >
@@ -9,7 +9,7 @@
       v-model="tag"
       @keyup.native.enter="add"
       :disabled="tagArr.length >= max"
-      placeholder="请按回车键添加"
+      :placeholder="$t('nodeTag.addTip')"
     >
     </el-input>
     <div class="tagList">
@@ -29,8 +29,10 @@
       </div>
     </div>
     <span slot="footer" class="dialog-footer">
-      <el-button @click="cancel">取 消</el-button>
-      <el-button type="primary" @click="confirm">确 定</el-button>
+      <el-button @click="cancel">{{ $t('dialog.cancel') }}</el-button>
+      <el-button type="primary" @click="confirm">{{
+        $t('dialog.confirm')
+      }}</el-button>
     </span>
   </el-dialog>
 </template>
diff --git a/web/src/pages/Edit/components/Outline.vue b/web/src/pages/Edit/components/Outline.vue
index 031b72ba..724a1c50 100644
--- a/web/src/pages/Edit/components/Outline.vue
+++ b/web/src/pages/Edit/components/Outline.vue
@@ -1,5 +1,5 @@
 <template>
-  <Sidebar ref="sidebar" title="大纲">
+  <Sidebar ref="sidebar" :title="$t('outline.title')">
     <el-tree :data="data" :props="defaultProps" default-expand-all></el-tree>
   </Sidebar>
 </template>
diff --git a/web/src/pages/Edit/components/Scale.vue b/web/src/pages/Edit/components/Scale.vue
index e9c9b1d3..d47264ef 100644
--- a/web/src/pages/Edit/components/Scale.vue
+++ b/web/src/pages/Edit/components/Scale.vue
@@ -1,10 +1,20 @@
 <template>
   <div class="scaleContainer">
-    <el-tooltip class="item" effect="dark" content="缩小" placement="top">
+    <el-tooltip
+      class="item"
+      effect="dark"
+      :content="$t('scale.zoomOut')"
+      placement="top"
+    >
       <div class="btn el-icon-minus" @click="narrow"></div>
     </el-tooltip>
     <div class="scaleInfo">{{ scaleNum }}%</div>
-    <el-tooltip class="item" effect="dark" content="放大" placement="top">
+    <el-tooltip
+      class="item"
+      effect="dark"
+      :content="$t('scale.zoomIn')"
+      placement="top"
+    >
       <div class="btn el-icon-plus" @click="enlarge"></div>
     </el-tooltip>
   </div>
diff --git a/web/src/pages/Edit/components/ShortcutKey.vue b/web/src/pages/Edit/components/ShortcutKey.vue
index db5050e0..3fe30186 100644
--- a/web/src/pages/Edit/components/ShortcutKey.vue
+++ b/web/src/pages/Edit/components/ShortcutKey.vue
@@ -1,5 +1,5 @@
 <template>
-  <Sidebar ref="sidebar" title="快捷键">
+  <Sidebar ref="sidebar" :title="$t('shortcutKey.title')">
     <div class="box">
       <div v-for="item in shortcutKeyList" :key="item.type">
         <div class="title">{{ item.type }}</div>
@@ -34,8 +34,11 @@ export default {
     Sidebar
   },
   data() {
-    return {
-      shortcutKeyList
+    return {}
+  },
+  computed: {
+    shortcutKeyList() {
+      return shortcutKeyList[this.$i18n.locale] || shortcutKeyList.zh
     }
   },
   created() {
diff --git a/web/src/pages/Edit/components/Structure.vue b/web/src/pages/Edit/components/Structure.vue
index dca538f6..fb2fee16 100644
--- a/web/src/pages/Edit/components/Structure.vue
+++ b/web/src/pages/Edit/components/Structure.vue
@@ -1,5 +1,5 @@
 <template>
-  <Sidebar ref="sidebar" title="结构">
+  <Sidebar ref="sidebar" :title="$t('strusture.title')">
     <div class="layoutList">
       <div
         class="layoutItem"
diff --git a/web/src/pages/Edit/components/Style.vue b/web/src/pages/Edit/components/Style.vue
index 08c8b6f6..a112cc53 100644
--- a/web/src/pages/Edit/components/Style.vue
+++ b/web/src/pages/Edit/components/Style.vue
@@ -1,16 +1,16 @@
 <template>
-  <Sidebar ref="sidebar" title="节点样式">
+  <Sidebar ref="sidebar" :title="$t('style.title')">
     <div class="styleBox">
       <el-tabs class="tab" v-model="activeTab" @tab-click="handleTabClick">
-        <el-tab-pane label="常态" name="normal"></el-tab-pane>
-        <el-tab-pane label="选中状态" name="active"></el-tab-pane>
+        <el-tab-pane :label="$t('style.normal')" name="normal"></el-tab-pane>
+        <el-tab-pane :label="$t('style.active')" name="active"></el-tab-pane>
       </el-tabs>
       <div class="sidebarContent" v-if="activeNodes.length > 0">
         <!-- 文字 -->
-        <div class="title noTop">文字</div>
+        <div class="title noTop">{{ $t('style.text') }}</div>
         <div class="row">
           <div class="rowItem">
-            <span class="name">字体</span>
+            <span class="name">{{ $t('style.fontFamily') }}</span>
             <el-select
               size="mini"
               v-model="style.fontFamily"
@@ -31,7 +31,7 @@
         </div>
         <div class="row">
           <div class="rowItem">
-            <span class="name">字号</span>
+            <span class="name">{{ $t('style.fontSize') }}</span>
             <el-select
               size="mini"
               style="width: 80px"
@@ -50,7 +50,7 @@
             </el-select>
           </div>
           <div class="rowItem">
-            <span class="name">行高</span>
+            <span class="name">{{ $t('style.lineHeight') }}</span>
             <el-select
               size="mini"
               style="width: 80px"
@@ -71,7 +71,7 @@
         </div>
         <div class="row">
           <div class="btnGroup">
-            <el-tooltip content="颜色" placement="bottom">
+            <el-tooltip :content="$t('style.color')" placement="bottom">
               <div
                 class="styleBtn"
                 v-popover:popover
@@ -84,7 +84,7 @@
                 ></span>
               </div>
             </el-tooltip>
-            <el-tooltip content="加粗" placement="bottom">
+            <el-tooltip :content="$t('style.addFontWeight')" placement="bottom">
               <div
                 class="styleBtn"
                 :class="{
@@ -96,7 +96,7 @@
                 B
               </div>
             </el-tooltip>
-            <el-tooltip content="斜体" placement="bottom">
+            <el-tooltip :content="$t('style.italic')" placement="bottom">
               <div
                 class="styleBtn i"
                 :class="{
@@ -108,7 +108,10 @@
                 I
               </div>
             </el-tooltip>
-            <el-tooltip content="划线" placement="bottom">
+            <el-tooltip
+              :content="$t('style.textDecoration')"
+              placement="bottom"
+            >
               <div
                 class="styleBtn u"
                 :style="{ textDecoration: style.textDecoration || 'none' }"
@@ -138,17 +141,23 @@
               v-model="style.textDecoration"
               @change="update('textDecoration')"
             >
-              <el-radio-button label="underline">下划线</el-radio-button>
-              <el-radio-button label="line-through">中划线</el-radio-button>
-              <el-radio-button label="overline">上划线</el-radio-button>
+              <el-radio-button label="underline">{{
+                $t('style.underline')
+              }}</el-radio-button>
+              <el-radio-button label="line-through">{{
+                $t('style.lineThrough')
+              }}</el-radio-button>
+              <el-radio-button label="overline">{{
+                $t('style.overline')
+              }}</el-radio-button>
             </el-radio-group>
           </el-popover>
         </div>
         <!-- 边框 -->
-        <div class="title">边框</div>
+        <div class="title">{{ $t('style.border') }}</div>
         <div class="row">
           <div class="rowItem">
-            <span class="name">颜色</span>
+            <span class="name">{{ $t('style.color') }}</span>
             <span
               class="block"
               v-popover:popover3
@@ -168,7 +177,7 @@
             </el-popover>
           </div>
           <div class="rowItem">
-            <span class="name">样式</span>
+            <span class="name">{{ $t('style.style') }}</span>
             <el-select
               size="mini"
               style="width: 80px"
@@ -189,7 +198,7 @@
         </div>
         <div class="row">
           <div class="rowItem">
-            <span class="name">宽度</span>
+            <span class="name">{{ $t('style.width') }}</span>
             <el-select
               size="mini"
               style="width: 80px"
@@ -208,7 +217,7 @@
             </el-select>
           </div>
           <div class="rowItem">
-            <span class="name">圆角</span>
+            <span class="name">{{ $t('style.borderRadius') }}</span>
             <el-select
               size="mini"
               style="width: 80px"
@@ -228,10 +237,10 @@
           </div>
         </div>
         <!-- 背景 -->
-        <div class="title">背景</div>
+        <div class="title">{{ $t('style.background') }}</div>
         <div class="row">
           <div class="rowItem">
-            <span class="name">颜色</span>
+            <span class="name">{{ $t('style.color') }}</span>
             <span
               class="block"
               v-popover:popover4
@@ -249,10 +258,10 @@
           </div>
         </div>
         <!-- 形状 -->
-        <div class="title">形状</div>
+        <div class="title">{{ $t('style.shape') }}</div>
         <div class="row">
           <div class="rowItem">
-            <span class="name">形状</span>
+            <span class="name">{{ $t('style.shape') }}</span>
             <el-select
               size="mini"
               style="width: 120px"
@@ -272,10 +281,10 @@
           </div>
         </div>
         <!-- 线条 -->
-        <div class="title">线条</div>
+        <div class="title">{{ $t('style.line') }}</div>
         <div class="row">
           <div class="rowItem">
-            <span class="name">颜色</span>
+            <span class="name">{{ $t('style.color') }}</span>
             <span
               class="block"
               v-popover:popover5
@@ -292,7 +301,7 @@
             </el-popover>
           </div>
           <div class="rowItem">
-            <span class="name">样式</span>
+            <span class="name">{{ $t('style.style') }}</span>
             <el-select
               size="mini"
               style="width: 80px"
@@ -313,7 +322,7 @@
         </div>
         <div class="row">
           <div class="rowItem">
-            <span class="name">宽度</span>
+            <span class="name">{{ $t('style.width') }}</span>
             <el-select
               size="mini"
               style="width: 80px"
@@ -333,10 +342,10 @@
           </div>
         </div>
         <!-- 节点内边距 -->
-        <div class="title noTop">节点内边距</div>
+        <div class="title noTop">{{ $t('style.nodePadding') }}</div>
         <div class="row">
           <div class="rowItem">
-            <span class="name">水平</span>
+            <span class="name">{{ $t('style.horizontal') }}</span>
             <el-slider
               style="width: 200px"
               v-model="style.paddingX"
@@ -347,7 +356,7 @@
         </div>
         <div class="row">
           <div class="rowItem">
-            <span class="name">垂直</span>
+            <span class="name">{{ $t('style.vertical') }}</span>
             <el-slider
               style="width: 200px"
               v-model="style.paddingY"
@@ -389,11 +398,10 @@ export default {
   data() {
     return {
       supportActiveStyle,
-      shapeList,
-      fontFamilyList,
+
       fontSizeList,
       borderWidthList,
-      borderDasharrayList,
+
       borderRadiusList,
       lineHeightList,
       activeNodes: [],
@@ -420,6 +428,17 @@ export default {
       }
     }
   },
+  computed: {
+    fontFamilyList() {
+      return fontFamilyList[this.$i18n.locale] || fontFamilyList.zh
+    },
+    borderDasharrayList() {
+      return borderDasharrayList[this.$i18n.locale] || borderDasharrayList.zh
+    },
+    shapeList() {
+      return shapeList[this.$i18n.locale] || shapeList.zh
+    }
+  },
   created() {
     this.$bus.$on('node_active', (...args) => {
       if (this.$refs.sidebar) this.$refs.sidebar.show = false
diff --git a/web/src/pages/Edit/components/Theme.vue b/web/src/pages/Edit/components/Theme.vue
index da0bc698..682298da 100644
--- a/web/src/pages/Edit/components/Theme.vue
+++ b/web/src/pages/Edit/components/Theme.vue
@@ -1,5 +1,5 @@
 <template>
-  <Sidebar ref="sidebar" title="主题">
+  <Sidebar ref="sidebar" :title="$t('style.title')">
     <div class="themeList">
       <div
         class="themeItem"
diff --git a/web/src/pages/Edit/components/Toolbar.vue b/web/src/pages/Edit/components/Toolbar.vue
index 3a9dca74..bdc6a66d 100644
--- a/web/src/pages/Edit/components/Toolbar.vue
+++ b/web/src/pages/Edit/components/Toolbar.vue
@@ -11,7 +11,7 @@
           @click="$bus.$emit('execCommand', 'BACK')"
         >
           <span class="icon iconfont iconhoutui-shi"></span>
-          <span class="text">回退</span>
+          <span class="text">{{ $t('toolbar.undo') }}</span>
         </div>
         <div
           class="toolbarBtn"
@@ -21,7 +21,7 @@
           @click="$bus.$emit('execCommand', 'FORWARD')"
         >
           <span class="icon iconfont iconqianjin1"></span>
-          <span class="text">前进</span>
+          <span class="text">{{ $t('toolbar.redo') }}</span>
         </div>
         <div
           class="toolbarBtn"
@@ -31,7 +31,7 @@
           @click="$bus.$emit('execCommand', 'INSERT_NODE')"
         >
           <span class="icon iconfont iconjiedian"></span>
-          <span class="text">插入同级节点</span>
+          <span class="text">{{ $t('toolbar.insertSiblingNode') }}</span>
         </div>
         <div
           class="toolbarBtn"
@@ -41,7 +41,7 @@
           @click="$bus.$emit('execCommand', 'INSERT_CHILD_NODE')"
         >
           <span class="icon iconfont icontianjiazijiedian"></span>
-          <span class="text">插入子节点</span>
+          <span class="text">{{ $t('toolbar.insertChildNode') }}</span>
         </div>
         <div
           class="toolbarBtn"
@@ -51,7 +51,7 @@
           @click="$bus.$emit('execCommand', 'REMOVE_NODE')"
         >
           <span class="icon iconfont iconshanchu"></span>
-          <span class="text">删除节点</span>
+          <span class="text">{{ $t('toolbar.deleteNode') }}</span>
         </div>
         <div
           class="toolbarBtn"
@@ -61,7 +61,7 @@
           @click="$bus.$emit('showNodeImage')"
         >
           <span class="icon iconfont iconimage"></span>
-          <span class="text">图片</span>
+          <span class="text">{{ $t('toolbar.image') }}</span>
         </div>
         <div
           class="toolbarBtn"
@@ -71,7 +71,7 @@
           @click="$bus.$emit('showNodeIcon')"
         >
           <span class="icon iconfont iconxiaolian"></span>
-          <span class="text">图标</span>
+          <span class="text">{{ $t('toolbar.icon') }}</span>
         </div>
         <div
           class="toolbarBtn"
@@ -81,7 +81,7 @@
           @click="$bus.$emit('showNodeLink')"
         >
           <span class="icon iconfont iconchaolianjie"></span>
-          <span class="text">超链接</span>
+          <span class="text">{{ $t('toolbar.link') }}</span>
         </div>
         <div
           class="toolbarBtn"
@@ -91,7 +91,7 @@
           @click="$bus.$emit('showNodeNote')"
         >
           <span class="icon iconfont iconflow-Mark"></span>
-          <span class="text">备注</span>
+          <span class="text">{{ $t('toolbar.note') }}</span>
         </div>
         <div
           class="toolbarBtn"
@@ -101,7 +101,7 @@
           @click="$bus.$emit('showNodeTag')"
         >
           <span class="icon iconfont iconbiaoqian"></span>
-          <span class="text">标签</span>
+          <span class="text">{{ $t('toolbar.tag') }}</span>
         </div>
         <div
           class="toolbarBtn"
@@ -111,53 +111,53 @@
           @click="$bus.$emit('execCommand', 'ADD_GENERALIZATION')"
         >
           <span class="icon iconfont icongaikuozonglan"></span>
-          <span class="text">概要</span>
+          <span class="text">{{ $t('toolbar.summary') }}</span>
         </div>
       </div>
       <!-- 通用操作 -->
       <div class="toolbarBlock">
         <div class="toolbarBtn" @click="$bus.$emit('showOutline')">
           <span class="icon iconfont iconfuhao-dagangshu"></span>
-          <span class="text">显示大纲</span>
+          <span class="text">{{ $t('toolbar.displayOutline') }}</span>
         </div>
         <div class="toolbarBtn" @click="$bus.$emit('showBaseStyle')">
           <span class="icon iconfont iconyangshi"></span>
-          <span class="text">基础样式</span>
+          <span class="text">{{ $t('toolbar.baseStyle') }}</span>
         </div>
         <div class="toolbarBtn" @click="$bus.$emit('showTheme')">
           <span class="icon iconfont iconjingzi"></span>
-          <span class="text">主题</span>
+          <span class="text">{{ $t('toolbar.theme') }}</span>
         </div>
         <div class="toolbarBtn" @click="$bus.$emit('showStructure')">
           <span class="icon iconfont iconjiegou"></span>
-          <span class="text">结构</span>
+          <span class="text">{{ $t('toolbar.strusture') }}</span>
         </div>
       </div>
       <!-- 导出 -->
       <div class="toolbarBlock">
         <div class="toolbarBtn" @click="createNewLocalFile">
           <span class="icon iconfont iconxinjian"></span>
-          <span class="text">新建</span>
+          <span class="text">{{ $t('toolbar.newFile') }}</span>
         </div>
         <div class="toolbarBtn" @click="openLocalFile">
           <span class="icon iconfont icondakai"></span>
-          <span class="text">打开</span>
+          <span class="text">{{ $t('toolbar.openFile') }}</span>
         </div>
         <div class="toolbarBtn" @click="saveLocalFile">
           <span class="icon iconfont iconlingcunwei"></span>
-          <span class="text">另存为</span>
+          <span class="text">{{ $t('toolbar.saveAs') }}</span>
         </div>
         <div class="toolbarBtn" @click="$bus.$emit('showImport')">
           <span class="icon iconfont icondaoru"></span>
-          <span class="text">导入</span>
+          <span class="text">{{ $t('toolbar.import') }}</span>
         </div>
         <div class="toolbarBtn" @click="$bus.$emit('showExport')">
           <span class="icon iconfont iconexport"></span>
-          <span class="text">导出</span>
+          <span class="text">{{ $t('toolbar.export') }}</span>
         </div>
         <div class="toolbarBtn" @click="$bus.$emit('showShortcutKey')">
           <span class="icon iconfont iconjianpan"></span>
-          <span class="text">快捷键</span>
+          <span class="text">{{ $t('toolbar.shortcutKey') }}</span>
         </div>
       </div>
     </div>
diff --git a/web/src/utils/index.js b/web/src/utils/index.js
index 881352c9..6f5386eb 100644
--- a/web/src/utils/index.js
+++ b/web/src/utils/index.js
@@ -32,11 +32,11 @@ export const fullScreen = element => {
   }
 }
 
-/** 
- * javascript comment 
- * @Author: 王林25 
- * @Date: 2022-10-24 14:16:18 
- * @Desc: 文件转buffer 
+/**
+ * javascript comment
+ * @Author: 王林25
+ * @Date: 2022-10-24 14:16:18
+ * @Desc: 文件转buffer
  */
 export const fileToBuffer = file => {
   return new Promise(r => {