init

2020-12-10 22:40:15 +08:00 · 2020-12-10 22:40:15 +08:00 · 9b121dd871
parent a2919945d8
commit 9b121dd871
45 changed files with 3533 additions and 163 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -12,8 +12,57 @@ module.exports = {
    ecmaVersion: 2020
  },
  rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+    'curly': ['error', 'multi-line'], // if、while等仅允许在单行中省略大括号
+    'quotes': ['error', 'single', { // 字符串使用单引号（允许含有单引号的字符串使用双引号，允许模板字符串）
+      'avoidEscape': true,
+      'allowTemplateLiterals': true,
+    }],
+    'key-spacing': ['error', { // 强制在对象字面量的键和值之间使用一致的空格
+      'beforeColon': false,
+      'afterColon': true,
+      'mode': 'strict',
+    }],
+    'no-empty': 'error', // 禁止空白块
+    'no-else-return': 'error', // 禁止 if 语句中 return 语句之后有 else 块
+    'no-multi-spaces': 'error', // 禁止出现多个空格
+    'require-await': 'error', // 禁止使用不带 await 表达式的 async 函数
+    'brace-style': ['error', 'stroustrup'], // 大括号风格要求
+    'spaced-comment': ['error', 'always'], // 要求在注释前有空白
+    'arrow-spacing': 'error', // 要求箭头函数的箭头之前或之后有空格
+    'no-duplicate-imports': 'error', // 禁止重复导入
+    'semi': ['error', 'never'], // 禁止行末分号
+    'comma-spacing': ['error', { 'before': false, 'after': true }], // 强制在逗号周围使用空格
+    'indent': ['error', 2, {'SwitchCase': 1}], // 两个空格的缩进
+    'eqeqeq': ['error', 'always', {'null': 'ignore'}], // 必须使用全等判断（null的判断除外）
+    'default-case': 'error', // switch块必须有default结尾
+    'no-eval': 'error', // 禁止eval 
+    'no-var': 'error', // 禁止var
+    'no-with': 'error', // 禁止with
+    'max-depth': ['error', 5], // 代码最大嵌套5层
+    'consistent-this': ['error', 'self'], // 只能使用self代替this
+    'max-lines': ['error', 1200], // 单文件最大1200行
+    'no-multi-str': 'error', // 禁止多行字符串
+    'space-infix-ops': 'error', // 中缀操作符周围有空格
+    'space-before-blocks': ['error', 'always'], // 函数大括号前有空格
+    'space-before-function-paren': ['error', { // 函数小括号前无空格（匿名异步函数前有）
+      'anonymous': 'never',
+      'named': 'never',
+      'asyncArrow': 'always',
+    }],
+    'keyword-spacing': ['error', { 'overrides': { // 强制关键字周围空格的一致性
+      'if': { 'after': false },
+      'for': { 'after': false },
+      'while': { 'after': false },
+      'function': { 'after': false },
+      'switch': { 'after': false },
+    }}],
+    'prefer-const': 'error', // 必须优先使用const
+    'no-useless-return': 'error', // 禁止多余的return
+    'array-bracket-spacing': 'error', // 强制数组方括号中使用一致的空格
+    'no-useless-escape': 'off', // 关闭禁用不必要的转义
+    'no-alert': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 禁止alert
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 禁止console
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 禁止debugger
  },
  overrides: [
    {
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@ -0,0 +1,33 @@
+module.exports = {
+  extends: 'stylelint-config-standard',
+  rules: {
+    'at-rule-empty-line-before': null,
+    'rule-empty-line-before': null,
+    'no-missing-end-of-source-newline': null,
+    'selector-list-comma-newline-after': null,
+    'font-family-no-missing-generic-family-keyword': null,
+    'no-descending-specificity': null,
+    'number-leading-zero': null,
+    'at-rule-no-unknown': null,
+    'max-empty-lines': null,
+    'selector-pseudo-element-no-unknown': null,
+    'color-hex-case': 'lower',
+    'color-hex-length': 'short',
+    'color-no-invalid-hex': true,
+    'font-weight-notation': 'numeric',
+    'function-calc-no-unspaced-operator': true,
+    'function-url-quotes': 'never',
+    'string-no-newline': true,
+    'string-quotes': 'single',
+    'block-no-empty': true,
+    'block-opening-brace-newline-after': 'always',
+    'block-opening-brace-space-before': 'always',
+    'indentation': 2,
+    'max-nesting-depth': 5,
+    'no-eol-whitespace': true,
+    'declaration-block-no-duplicate-properties': true,
+    'declaration-block-semicolon-newline-after': 'always',
+    'declaration-block-trailing-semicolon': 'always',
+    'selector-pseudo-element-colon-notation': 'double',
+  }
+}
--- a/babel.config.js
+++ b/babel.config.js
@ -1,5 +1,15 @@
 module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
+  ],
+  plugins: [
+    [
+      'import',
+      {
+        libraryName: 'ant-design-vue',
+        libraryDirectory: 'es',
+        style: true,
+      }
+    ]
  ]
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -9,12 +9,20 @@
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
+    "@ant-design/icons-vue": "^5.1.7",
+    "ant-design-vue": "^2.0.0-rc.3",
+    "clipboard": "^2.0.6",
    "core-js": "^3.6.5",
+    "crypto-js": "^4.0.0",
+    "lodash": "^4.17.20",
+    "store2": "^2.12.0",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
+    "@types/clipboard": "^2.0.1",
+    "@types/crypto-js": "^4.0.1",
    "@types/jest": "^24.0.19",
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
@ -30,9 +38,15 @@
    "@vue/test-utils": "^2.0.0-0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
+    "babel-plugin-import": "^1.13.3",
+    "less": "^3.12.2",
+    "less-loader": "^7.1.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3",
-    "vue-jest": "^5.0.0-0"
+    "vue-jest": "^5.0.0-0",
+    "stylelint": "^13.8.0",
+    "stylelint-config-standard": "^20.0.0",
+    "stylelint-webpack-plugin": "^2.1.1"
  }
 }
--- a/public/index.html
+++ b/public/index.html
@ -1,11 +1,12 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>演示文稿在线编辑</title>
  </head>
  <body>
    <noscript>
--- a/src/App.vue
+++ b/src/App.vue
@ -1,30 +1,9 @@
 <template>
-  <div id="nav">
-    <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
-  </div>
  <router-view/>
 </template>

 <style lang="scss">
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
+  height: 100%;
 }
-
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
-}
-</style>
+</style>
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/styles/global.scss
+++ b/src/assets/styles/global.scss
@ -0,0 +1,63 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  vertical-align: baseline;
+  box-sizing: border-box;
+}
+
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}
+html, body {
+  height: 100%;
+  overflow: hidden;
+  background-color: #fff;
+  color: #333;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote::before, blockquote::after,
+q::before, q::after {
+  content: '';
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+a {
+  text-decoration: none;
+  color: #fff;
+}
+
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+  background-color: #fff;
+}
+::-webkit-scrollbar-thumb {
+  background-color: #e1e1e1;
+  border-radius: 5px;
+}
--- a/src/assets/styles/mixin.scss
+++ b/src/assets/styles/mixin.scss
@ -0,0 +1,30 @@
+// 单行文字行末省略
+@mixin ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+// 多行文字尾行行末省略
+@mixin multi-ellipsis($line: 2) {
+  word-wrap: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: $line;
+  -webkit-box-orient: vertical;
+}
+
+// 表格式布局
+@mixin grid-layout-wrapper() {
+  display: flex;
+  flex-wrap: wrap;
+}
+@mixin grid-layout-item($col, $colWidth) {
+  width: $colWidth;
+  margin-bottom: calc(#{100 - $col * $colWidth} / #{$col - 1});
+
+  &:not(:nth-child(#{$col}n)) {
+    margin-right: calc(#{100 - $col * $colWidth} / #{$col - 1});
+  }
+}
--- a/src/assets/styles/variable.scss
+++ b/src/assets/styles/variable.scss
@ -0,0 +1,2 @@
+$themeColor: #41464b;
+$borderRadius: 2px;
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@ -1,64 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest" target="_blank" rel="noopener">unit-jest</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'HelloWorld',
-  props: {
-    msg: String,
-  },
-});
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
--- a/src/components/IconFont.ts
+++ b/src/components/IconFont.ts
@ -0,0 +1,5 @@
+import { createFromIconfontCN } from '@ant-design/icons-vue'
+
+export default createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
+})
--- a/src/configs/animation.ts
+++ b/src/configs/animation.ts
@ -0,0 +1,160 @@
+export const ANIMATIONS_TYPES = ['弹跳', '淡入', '翻转', '旋转', '滑入', '缩放']
+
+export const ANIMATIONS = [
+  {
+    key: 'bounceIn',
+    type: '弹跳',
+    name: '弹跳',
+    icon: 'icon-anime-bounce'
+  },
+  {
+    key: 'bounceInDown',
+    type: '弹跳',
+    name: '上方弹跳',
+    icon: 'icon-anime-bounce-down',
+  },
+  {
+    key: 'bounceInLeft',
+    type: '弹跳',
+    name: '左侧弹跳',
+    icon: 'icon-anime-bounce-left',
+  },
+  {
+    key: 'bounceInRight',
+    type: '弹跳',
+    name: '右侧弹跳',
+    icon: 'icon-anime-bounce-right',
+  },
+  {
+    key: 'bounceInUp',
+    type: '弹跳',
+    name: '下方弹跳',
+    icon: 'icon-anime-bounce-up',
+  },
+  {
+    key: 'fadeIn',
+    type: '淡入',
+    name: '淡入',
+    icon: 'icon-anime-fade',
+  },
+  {
+    key: 'fadeInDown',
+    type: '淡入',
+    name: '上方淡入',
+    icon: 'icon-anime-fade-down',
+  },
+  {
+    key: 'fadeInLeft',
+    type: '淡入',
+    name: '左侧淡入',
+    icon: 'icon-anime-fade-left',
+  },
+  {
+    key: 'fadeInRight',
+    type: '淡入',
+    name: '右侧淡入',
+    icon: 'icon-anime-fade-right',
+  },
+  {
+    key: 'fadeInUp',
+    type: '淡入',
+    name: '下方淡入',
+    icon: 'icon-anime-fade-up',
+  },
+  {
+    key: 'flipInX',
+    type: '翻转',
+    name: '水平翻转',
+    icon: 'icon-anime-flip-x',
+  },
+  {
+    key: 'flipInY',
+    type: '翻转',
+    name: '垂直翻转',
+    icon: 'icon-anime-flip-y',
+  },
+  {
+    key: 'rotateIn',
+    type: '旋转',
+    name: '旋转',
+    icon: 'icon-anime-rotate',
+  },
+  {
+    key: 'rotateInDownLeft',
+    type: '旋转',
+    name: '左下旋转',
+    icon: 'icon-anime-rotate-up-right',
+  },
+  {
+    key: 'rotateInDownRight',
+    type: '旋转',
+    name: '右下旋转',
+    icon: 'icon-anime-rotate-up-left',
+  },
+  {
+    key: 'rotateInUpLeft',
+    type: '旋转',
+    name: '左上旋转',
+    icon: 'icon-anime-rotate-down-right',
+  },
+  {
+    key: 'rotateInUpRight',
+    type: '旋转',
+    name: '右上旋转',
+    icon: 'icon-anime-rotate-down-left',
+  },
+  {
+    key: 'slideInDown',
+    type: '滑入',
+    name: '上方滑入',
+    icon: 'icon-anime-slide-down',
+  },
+  {
+    key: 'slideInLeft',
+    type: '滑入',
+    name: '左侧滑入',
+    icon: 'icon-anime-slide-left',
+  },
+  {
+    key: 'slideInRight',
+    type: '滑入',
+    name: '右侧滑入',
+    icon: 'icon-anime-slide-right',
+  },
+  {
+    key: 'slideInUp',
+    type: '滑入',
+    name: '下方滑入',
+    icon: 'icon-anime-slide-up',
+  },
+  {
+    key: 'zoomIn',
+    type: '缩放',
+    name: '放大',
+    icon: 'icon-anime-zoom',
+  },
+  {
+    key: 'zoomInDown',
+    type: '缩放',
+    name: '上方放大',
+    icon: 'icon-anime-zoom-down',
+  },
+  {
+    key: 'zoomInLeft',
+    type: '缩放',
+    name: '左侧放大',
+    icon: 'icon-anime-zoom-left',
+  },
+  {
+    key: 'zoomInRight',
+    type: '缩放',
+    name: '右侧放大',
+    icon: 'icon-anime-zoom-right',
+  },
+  {
+    key: 'zoomInUp',
+    type: '缩放',
+    name: '下方放大',
+    icon: 'icon-anime-zoom-up',
+  },
+]
--- a/src/configs/canvas.ts
+++ b/src/configs/canvas.ts
@ -0,0 +1 @@
+export const VIEWPORT_SIZE = 1000
--- a/src/configs/chart.ts
+++ b/src/configs/chart.ts
@ -0,0 +1,54 @@
+export const DEFAULT_BAR_DATA = {
+  axisData: ['类别1', '类别2', '类别3', '类别4', '类别5'],
+  series: [
+    { name: '系列1', data: [120, 200, 150, 80, 70] },
+    { name: '系列2', data: [80, 220, 170, 180, 40] }
+  ]
+}
+
+export const DEFAULT_PIE_DATA = [
+  { name: '类别1', value: 335 },
+  { name: '类别2', value: 310 },
+  { name: '类别3', value: 234 },
+  { name: '类别4', value: 135 },
+  { name: '类别5', value: 1548 },
+]
+
+export const CHARTS = [
+  {
+    key: 'bar',
+    name: '柱状图',
+    value: DEFAULT_BAR_DATA,
+  },
+  {
+    key: 'barY',
+    name: '条形图',
+    value: DEFAULT_BAR_DATA,
+  },
+  {
+    key: 'line',
+    name: '折线图',
+    value: DEFAULT_BAR_DATA,
+  },
+  {
+    key: 'pie',
+    name: '饼状图',
+    value: DEFAULT_PIE_DATA,
+  },
+  {
+    key: 'pieDoughnut',
+    name: '环形图',
+    value: DEFAULT_PIE_DATA,
+  },
+]
+
+export const CHART_THEME = {
+  purple: ['#8a7ca8', '#e098c7', '#8fd3e8', '#71669e', '#cc70af'],
+  shine: ['#c12e34', '#e6b600', '#0098d9', '#2b821d', '#005eaa'],
+  halloween: ['#ff715e', '#ffaf51', '#ffee51', '#797fba', '#715c87'],
+  vintage: ['#d87c7c', '#919e8b', '#d7ab82', '#6e7074', '#61a0a8'],
+  dark: ['#dd6b66', '#759aa0', '#e69d87', '#8dc1a9', '#ea7e53'],
+  westeros: ['#516b91', '#59c4e6', '#edafda', '#93b7e3', '#a5e7f0'],
+  wonderland: ['#4ea397', '#22c3aa', '#7bd9a5', '#d0648a', '#f58db2'],
+  chalk: ['#fc97af', '#87f7cf', '#f7f494', '#72ccff', '#f7c5a0'],
+}
--- a/src/configs/defaultElement.ts
+++ b/src/configs/defaultElement.ts
@ -0,0 +1,81 @@
+const DEFAULT_COLOR = '#888'
+
+export const DEFAULT_TEXT = {
+  type: 'text',
+  left: 0,
+  top: 0,
+  width: 300,
+  height: 0,
+  padding: 5,
+  opacity: 1,
+  lineHeight: 1.5,
+  segmentSpacing: 5,
+  textType: 'content',
+  content: '<div>“单击此处添加文本”</div>',
+}
+
+export const DEFAULT_IMAGE = {
+  type: 'image',
+  left: 0,
+  top: 0,
+  lockRatio: true,
+}
+
+export const DEFAULT_SHAPE = {
+  type: 'shape',
+  fill: DEFAULT_COLOR,
+  lockRatio: false,
+}
+
+export const DEFAULT_SHAPE_LINE = {
+  type: 'shape',
+  borderStyle: 'solid',
+  borderWidth: 2,
+  borderColor: DEFAULT_COLOR,
+  fill: 'rgba(0, 0, 0, 0)',
+  lockRatio: false,
+}
+
+export const DEFAULT_ICON = {
+  type: 'icon',
+  left: 0,
+  top: 0,
+  width: 80,
+  height: 80,
+  color: DEFAULT_COLOR,
+  lockRatio: true,
+}
+
+export const DEFAULT_LINE = {
+  type: 'line',
+  style: 'solid',
+  marker: ['', ''],
+  width: 4,
+  color: DEFAULT_COLOR,
+}
+
+export const DEFAULT_CHART = {
+  type: 'chart',
+  left: 0,
+  top: 0,
+  width: 500,
+  height: 500,
+}
+
+export const DEFAULT_IFRAME = {
+  type: 'iframe',
+  left: 0,
+  top: 0,
+  width: 800,
+  height: 480,
+}
+
+export const DEFAULT_TABLE = {
+  type: 'table',
+  left: 0,
+  top: 0,
+  isLock: false,
+  borderStyle: 'solid',
+  borderWidth: 2,
+  borderColor: DEFAULT_COLOR,
+}
--- a/src/configs/element.ts
+++ b/src/configs/element.ts
@ -0,0 +1,42 @@
+export const ELEMENT_SIZE_RANGE = {
+  text: { width: 15, height: 15 },
+  image: { width: 15, height: 15 },
+  shape: { width: 15, height: 15 },
+  icon: { width: 15, height: 15 },
+  chart: { width: 200, height: 200 },
+  iframe: { width: 200, height: 200 },
+  table: { width: 50, height: 30 },
+}
+
+export const ELEMENT_TYPE_TABS = {
+  text: { key: 'element-text', label: '文本属性' },
+  image: { key: 'element-image', label: '图片属性' },
+  shape: { key: 'element-shape', label: '形状属性' },
+  icon: { key: 'element-icon', label: '图标属性' },
+  line: { key: 'element-line', label: '线条属性' },
+  chart: { key: 'element-chart', label: '图表属性' },
+  iframe: { key: 'element-iframe', label: 'Iframe属性' },
+  table: { key: 'element-table', label: '表格属性' },
+}
+
+export const ELEMENTS = {
+  text: '文本',
+  image: '图片',
+  shape: '形状',
+  icon: '图标',
+  line: '线条',
+  chart: '图表',
+  iframe: 'Iframe',
+  table: '表格',
+}
+
+export const OPERATE_KEYS = {
+  LEFT_TOP: 1,
+  TOP: 2,
+  RIGHT_TOP: 3,
+  LEFT: 4,
+  RIGHT: 5,
+  LEFT_BOTTOM: 6,
+  BOTTOM: 7,
+  RIGHT_BOTTOM: 8,
+}
--- a/src/configs/fontName.ts
+++ b/src/configs/fontName.ts
@ -0,0 +1,32 @@
+export const FONT_FAMILYS = [
+  { source: 'windows', zh: '微软雅黑', en: 'Microsoft Yahei' },
+  { source: 'windows', zh: '宋体', en: 'SimSun' },
+  { source: 'windows', zh: '黑体', en: 'SimHei' },
+  { source: 'windows', zh: '楷体', en: 'KaiTi' },
+  { source: 'windows', zh: '新宋体', en: 'NSimSun' },
+  { source: 'windows', zh: '仿宋', en: 'FangSong' },
+
+  { source: 'osx', zh: '苹方', en: 'PingFang SC' },
+  { source: 'osx', zh: '华文黑体', en: 'STHeiti' },
+  { source: 'osx', zh: '华文楷体', en: 'STKaiti' },
+  { source: 'osx', zh: '华文宋体', en: 'STSong' },
+  { source: 'osx', zh: '华文仿宋', en: 'STFangSong' },
+  { source: 'osx', zh: '华文中宋', en: 'STZhongSong' },
+  { source: 'osx', zh: '华文琥珀', en: 'STHupo' },
+  { source: 'osx', zh: '华文新魏', en: 'STXinwei' },
+  { source: 'osx', zh: '华文隶书', en: 'STLiti' },
+  { source: 'osx', zh: '华文行楷', en: 'STXingkai' },
+  { source: 'osx', zh: '冬青黑体简', en: 'Hiragino Sans GB' },
+  { source: 'osx', zh: '兰亭黑-简', en: 'Lantinghei SC' },
+  { source: 'osx', zh: '偏偏体-简', en: 'Hanzipen SC' },
+  { source: 'osx', zh: '手札体-简', en: 'Hannotate SC' },
+  { source: 'osx', zh: '宋体-简', en: 'Songti SC' },
+  { source: 'osx', zh: '娃娃体-简', en: 'Wawati SC' },
+  { source: 'osx', zh: '行楷-简', en: 'Xingkai SC' },
+  { source: 'osx', zh: '圆体-简', en: 'Yuanti SC' },
+  
+  { source: 'office', zh: '华文细黑', en: 'STXihei' },
+  { source: 'office', zh: '幼圆', en: 'YouYuan' },
+  { source: 'office', zh: '隶书', en: 'LiSu' },
+  { source: '', zh: 'Arial', en: 'Arial' },
+]
--- a/src/configs/icons.ts
+++ b/src/configs/icons.ts
@ -0,0 +1,130 @@
+export const ICONS = [  
+  {
+    key: 'time',
+    path: '<path d="M512 2.27555555C230.51377778 2.27555555 2.27555555 230.51377778 2.27555555 512s228.23822222 509.72444445 509.72444445 509.72444445 509.72444445-228.23822222 509.72444445-509.72444445S793.48622222 2.27555555 512 2.27555555z m0 932.97777778c-233.69955555 0-423.25333333-189.55377778-423.25333333-423.25333333s189.55377778-423.25333333 423.25333333-423.25333333 423.25333333 189.55377778 423.25333333 423.25333333-189.55377778 423.25333333-423.25333333 423.25333333z" p-id="1786"></path><path d="M710.76977778 656.04266667L548.52266667 538.73777778V257.13777778c0-5.00622222-4.096-9.10222222-9.10222222-9.10222223H484.69333333c-5.00622222 0-9.10222222 4.096-9.10222222 9.10222223v313.344c0 2.95822222 1.36533333 5.68888889 3.75466667 7.39555555l188.18844444 137.216c4.096 2.95822222 9.78488889 2.048 12.74311111-1.93422222l32.54044445-44.37333333c2.95822222-4.20977778 2.048-9.89866667-2.048-12.74311111z"></path>'
+  },
+  {
+    key: 'plus',
+    path: '<path d="M721.35111111 475.59111111H548.40888889V302.64888889c0-5.00622222-4.096-9.10222222-9.10222222-9.10222222h-54.61333334c-5.00622222 0-9.10222222 4.096-9.10222222 9.10222222v172.94222222H302.64888889c-5.00622222 0-9.10222222 4.096-9.10222222 9.10222222v54.61333334c0 5.00622222 4.096 9.10222222 9.10222222 9.10222222h172.94222222v172.94222222c0 5.00622222 4.096 9.10222222 9.10222222 9.10222222h54.61333334c5.00622222 0 9.10222222-4.096 9.10222222-9.10222222V548.40888889h172.94222222c5.00622222 0 9.10222222-4.096 9.10222222-9.10222222v-54.61333334c0-5.00622222-4.096-9.10222222-9.10222222-9.10222222z" p-id="1924"></path><path d="M512 2.27555555C230.51377778 2.27555555 2.27555555 230.51377778 2.27555555 512s228.23822222 509.72444445 509.72444445 509.72444445 509.72444445-228.23822222 509.72444445-509.72444445S793.48622222 2.27555555 512 2.27555555z m0 932.97777778c-233.69955555 0-423.25333333-189.55377778-423.25333333-423.25333333s189.55377778-423.25333333 423.25333333-423.25333333 423.25333333 189.55377778 423.25333333 423.25333333-189.55377778 423.25333333-423.25333333 423.25333333z"></path>'
+  },
+  {
+    key: 'remove',
+    path: '<path d="M721.35111111 475.59111111H302.64888889c-5.00622222 0-9.10222222 4.096-9.10222222 9.10222222v54.61333334c0 5.00622222 4.096 9.10222222 9.10222222 9.10222222h418.70222222c5.00622222 0 9.10222222-4.096 9.10222222-9.10222222v-54.61333334c0-5.00622222-4.096-9.10222222-9.10222222-9.10222222z" p-id="2062"></path><path d="M512 2.27555555C230.51377778 2.27555555 2.27555555 230.51377778 2.27555555 512s228.23822222 509.72444445 509.72444445 509.72444445 509.72444445-228.23822222 509.72444445-509.72444445S793.48622222 2.27555555 512 2.27555555z m0 932.97777778c-233.69955555 0-423.25333333-189.55377778-423.25333333-423.25333333s189.55377778-423.25333333 423.25333333-423.25333333 423.25333333 189.55377778 423.25333333 423.25333333-189.55377778 423.25333333-423.25333333 423.25333333z"></path>'
+  },
+  {
+    key: 'checkmark',
+    path: '<path d="M724.76444445 331.09333333h-53.36177778c-11.60533333 0-22.64177778 5.57511111-29.46844445 15.13244445L463.07555555 594.26133333l-81.00977777-112.41244444c-6.82666667-9.44355555-17.74933333-15.13244445-29.46844445-15.13244444H299.23555555c-7.39555555 0-11.71911111 8.41955555-7.39555555 14.44977777l141.76711111 196.608c14.44977778 20.13866667 44.37333333 20.13866667 58.82311111 0l239.616-332.23111111c4.43733333-6.03022222 0.11377778-14.44977778-7.28177777-14.44977778z" p-id="2200"></path><path d="M512 2.27555555C230.51377778 2.27555555 2.27555555 230.51377778 2.27555555 512s228.23822222 509.72444445 509.72444445 509.72444445 509.72444445-228.23822222 509.72444445-509.72444445S793.48622222 2.27555555 512 2.27555555z m0 932.97777778c-233.69955555 0-423.25333333-189.55377778-423.25333333-423.25333333s189.55377778-423.25333333 423.25333333-423.25333333 423.25333333 189.55377778 423.25333333 423.25333333-189.55377778 423.25333333-423.25333333 423.25333333z"></path>'
+  },
+  {
+    key: 'close',
+    path: '<path d="M709.29066667 333.14133333c0-5.00622222-4.096-9.10222222-9.10222222-9.10222222l-75.09333334 0.34133334L512 459.20711111l-112.98133333-134.71288889-75.20711112-0.34133333c-5.00622222 0-9.10222222 3.98222222-9.10222222 9.10222222 0 2.16177778 0.79644445 4.20977778 2.16177778 5.91644444l148.02488889 176.35555556L316.87111111 691.76888889c-1.36533333 1.70666667-2.16177778 3.75466667-2.16177778 5.91644444 0 5.00622222 4.096 9.10222222 9.10222222 9.10222222l75.20711112-0.34133333L512 571.61955555l112.98133333 134.7128889 75.09333334 0.34133333c5.00622222 0 9.10222222-3.98222222 9.10222222-9.10222223 0-2.16177778-0.79644445-4.20977778-2.16177778-5.91644444L559.21777778 515.41333333l148.02488889-176.35555555c1.36533333-1.59288889 2.048-3.75466667 2.048-5.91644445z" p-id="2338"></path><path d="M512 3.41333333C230.51377778 3.41333333 2.27555555 231.65155555 2.27555555 513.13777778s228.23822222 509.72444445 509.72444445 509.72444444 509.72444445-228.23822222 509.72444445-509.72444444S793.48622222 3.41333333 512 3.41333333z m0 932.97777778c-233.69955555 0-423.25333333-189.55377778-423.25333333-423.25333333s189.55377778-423.25333333 423.25333333-423.25333333 423.25333333 189.55377778 423.25333333 423.25333333-189.55377778 423.25333333-423.25333333 423.25333333z"></path>'
+  },
+  {
+    key: 'info',
+    path: '<path d="M512 2.27555555C230.51377778 2.27555555 2.27555555 230.51377778 2.27555555 512s228.23822222 509.72444445 509.72444445 509.72444445 509.72444445-228.23822222 509.72444445-509.72444445S793.48622222 2.27555555 512 2.27555555z m0 932.97777778c-233.69955555 0-423.25333333-189.55377778-423.25333333-423.25333333s189.55377778-423.25333333 423.25333333-423.25333333 423.25333333 189.55377778 423.25333333 423.25333333-189.55377778 423.25333333-423.25333333 423.25333333z" p-id="2476"></path><path d="M512 712.24888889m-54.61333333 0a54.61333333 54.61333333 0 1 0 109.22666666 0 54.61333333 54.61333333 0 1 0-109.22666666 0Z" p-id="2477"></path><path d="M484.69333333 584.81777778h54.61333334c5.00622222 0 9.10222222-4.096 9.10222222-9.10222223V266.24c0-5.00622222-4.096-9.10222222-9.10222222-9.10222222h-54.61333334c-5.00622222 0-9.10222222 4.096-9.10222222 9.10222222v309.47555555c0 5.00622222 4.096 9.10222222 9.10222222 9.10222223z"></path>'
+  },
+  {
+    key: 'question',
+    path: '<path d="M512 2.27555555C230.51377778 2.27555555 2.27555555 230.51377778 2.27555555 512s228.23822222 509.72444445 509.72444445 509.72444445 509.72444445-228.23822222 509.72444445-509.72444445S793.48622222 2.27555555 512 2.27555555z m0 932.97777778c-233.69955555 0-423.25333333-189.55377778-423.25333333-423.25333333s189.55377778-423.25333333 423.25333333-423.25333333 423.25333333 189.55377778 423.25333333 423.25333333-189.55377778 423.25333333-423.25333333 423.25333333z" p-id="2615"></path><path d="M638.976 289.792C604.84266667 259.86844445 559.78666667 243.48444445 512 243.48444445s-92.84266667 16.49777778-126.976 46.30755555C349.52533333 320.85333333 329.95555555 362.60977778 329.95555555 407.32444445v8.6471111c0 5.00622222 4.096 9.10222222 9.10222223 9.10222223h54.61333333c5.00622222 0 9.10222222-4.096 9.10222222-9.10222223V407.32444445c0-50.176 49.03822222-91.02222222 109.22666667-91.02222223s109.22666667 40.84622222 109.22666667 91.02222223c0 35.38488889-25.03111111 67.81155555-63.82933334 82.71644444-24.12088889 9.216-44.60088889 25.37244445-59.27822222 46.53511111-14.90488889 21.61777778-22.64177778 47.55911111-22.64177778 73.84177778V634.88c0 5.00622222 4.096 9.10222222 9.10222222 9.10222222h54.61333334c5.00622222 0 9.10222222-4.096 9.10222222-9.10222222v-25.82755555c0-22.41422222 14.10844445-42.89422222 35.15733334-50.97244445 67.12888889-25.82755555 110.47822222-84.992 110.47822222-150.75555555 0.11377778-44.71466667-19.456-86.47111111-54.95466667-117.53244445z" p-id="2616"></path><path d="M512 762.31111111m-45.51111111 0a45.51111111 45.51111111 0 1 0 91.02222222 0 45.51111111 45.51111111 0 1 0-91.02222222 0Z"></path>'
+  },
+  {
+    key: 'meh',
+    path: '<path d="M311.75111111 408.46222222m-54.61333333 0a54.61333333 54.61333333 0 1 0 109.22666667 0 54.61333333 54.61333333 0 1 0-109.22666667 0Z" p-id="1926"></path><path d="M712.24888889 408.46222222m-54.61333334 0a54.61333333 54.61333333 0 1 0 109.22666667 0 54.61333333 54.61333333 0 1 0-109.22666667 0Z" p-id="1927"></path><path d="M512 2.27555555C230.51377778 2.27555555 2.27555555 230.51377778 2.27555555 512s228.23822222 509.72444445 509.72444445 509.72444445 509.72444445-228.23822222 509.72444445-509.72444445S793.48622222 2.27555555 512 2.27555555z m299.23555555 808.96c-38.912 38.912-84.19555555 69.40444445-134.5991111 90.79466667C624.64 924.10311111 569.23022222 935.25333333 512 935.25333333c-57.23022222 0-112.64-11.15022222-164.75022222-33.22311111-50.40355555-21.27644445-95.68711111-51.88266667-134.59911111-90.79466667-38.912-38.912-69.40444445-84.19555555-90.79466667-134.5991111C99.89688889 624.64 88.74666667 569.23022222 88.74666667 512s11.15022222-112.64 33.22311111-164.75022222c21.27644445-50.40355555 51.88266667-95.68711111 90.79466667-134.59911111 38.912-38.912 84.19555555-69.40444445 134.5991111-90.79466667C399.36 99.89688889 454.76977778 88.74666667 512 88.74666667c57.23022222 0 112.64 11.15022222 164.75022222 33.22311111 50.40355555 21.27644445 95.68711111 51.88266667 134.59911111 90.79466667 38.912 38.912 69.40444445 84.19555555 90.79466667 134.5991111C924.10311111 399.36 935.25333333 454.76977778 935.25333333 512s-11.15022222 112.64-33.22311111 164.75022222c-21.27644445 50.40355555-51.88266667 95.68711111-90.79466667 134.48533333z" p-id="1928"></path><path d="M684.94222222 572.30222222H339.05777778c-5.00622222 0-9.10222222 4.096-9.10222223 9.10222223v54.61333333c0 5.00622222 4.096 9.10222222 9.10222223 9.10222222h345.88444444c5.00622222 0 9.10222222-4.096 9.10222223-9.10222222v-54.61333333c0-5.00622222-4.096-9.10222222-9.10222223-9.10222223z"></path>'
+  },
+  {
+    key: 'time-2',
+    path: '<path d="M512 37.00813495c-262.25662224 0-474.85387739 212.59592955-474.85387739 474.85387739s212.59592955 474.85387739 474.85387739 474.85387738c262.2513237 0 474.85255179-212.59725516 474.85255179-474.85387738S774.2513237 37.00813495 512 37.00813495L512 37.00813495zM673.52574747 692.21717237l-16.78671274 16.79068696c-9.27428836 9.26898853-24.30708556 9.26898853-33.5773997 0L469.18143011 555.02633009c-5.32135621-5.32135621-4.66695028-16.01838227-4.66695028-26.54452019L464.51447983 226.95021563c0-13.11594461 10.63211533-23.74276009 23.74143576-23.74276009l23.74276009 0c13.11064477 0 23.74276009 10.62681548 23.7427601 23.74276009l0 293.90127111 137.78298737 137.78828592C682.80003453 667.91273543 682.80003453 682.94155968 673.52574747 692.21717237L673.52574747 692.21717237z"></path>'
+  },
+  {
+    key: 'plus-2',
+    path: '<path d="M512 7.13007408C233.61763555 7.13007408 7.13007408 233.61763555 7.13007408 512s226.48756148 504.86992592 504.86992592 504.86992592 504.86992592-226.48756148 504.86992592-504.86992592S790.38236445 7.13007408 512 7.13007408z m194.18074075 543.70607407h-155.3445926v155.3445926a38.83614815 38.83614815 0 0 1-77.6722963 0v-155.3445926h-155.3445926a38.83614815 38.83614815 0 0 1 0-77.6722963h155.3445926v-155.3445926a38.83614815 38.83614815 0 0 1 77.6722963 0v155.3445926h155.3445926a38.83614815 38.83614815 0 0 1 0 77.6722963z"></path>'
+  },
+  {
+    key: 'remove-2',
+    path: '<path d="M512 7.13007408C233.61763555 7.13007408 7.13007408 233.61763555 7.13007408 512s226.48756148 504.86992592 504.86992592 504.86992592 504.86992592-226.48756148 504.86992592-504.86992592S790.38236445 7.13007408 512 7.13007408z m194.18074075 543.70607407H317.81925925a38.83614815 38.83614815 0 0 1 0-77.6722963h388.3614815a38.83614815 38.83614815 0 0 1 0 77.6722963z"></path>'
+  },
+  {
+    key: 'checkmark-2',
+    path: '<path d="M512 7.13007408C233.61763555 7.13007408 7.13007408 233.61763555 7.13007408 512s226.48756148 504.86992592 504.86992592 504.86992592 504.86992592-226.48756148 504.86992592-504.86992592S790.38236445 7.13007408 512 7.13007408z m262.75081482 335.66568295l-326.22364445 388.36148149a38.83614815 38.83614815 0 0 1-29.12711112 13.85965037h-0.65536a38.83614815 38.83614815 0 0 1-28.86011258-12.86447407l-139.81013334-155.3445926a38.83614815 38.83614815 0 1 1 57.72022519-51.94334814l109.93057185 122.13968592 297.5577126-354.16139852a38.83614815 38.83614815 0 0 1 59.46785185 49.95299555z"></path>'
+  },
+  {
+    key: 'close-2',
+    path: '<path d="M512 7.13007408C233.61763555 7.13007408 7.13007408 233.61763555 7.13007408 512s226.48756148 504.86992592 504.86992592 504.86992592 504.86992592-226.48756148 504.86992592-504.86992592S790.38236445 7.13007408 512 7.13007408z m182.79689482 632.76221629a38.83614815 38.83614815 0 1 1-54.90460445 54.90460445L512 566.92887703l-127.89229037 127.86801779a38.83614815 38.83614815 0 0 1-54.90460445-54.90460445L457.07112297 512l-127.86801779-127.89229037a38.83614815 38.83614815 0 0 1 54.90460445-54.90460445L512 457.07112297l127.89229037-127.86801779a38.83614815 38.83614815 0 0 1 54.90460445 54.90460445L566.92887703 512z"></path>'
+  },
+  {
+    key: 'info-2',
+    path: '<path d="M512 7.13007408C233.61763555 7.13007408 7.13007408 233.61763555 7.13007408 512s226.48756148 504.86992592 504.86992592 504.86992592 504.86992592-226.48756148 504.86992592-504.86992592S790.38236445 7.13007408 512 7.13007408z m0 776.50450962a48.54518518 48.54518518 0 1 1 48.54518518-48.54518518 48.54518518 48.54518518 0 0 1-48.54518518 48.54518518z m52.72007111-488.2432l-13.93246814 296.12562963a38.83614815 38.83614815 0 0 1-77.6722963 0l-13.93246815-295.97999408v-0.12136295a52.7686163 52.7686163 0 1 1 105.44014223 0z"></path>'
+  },
+  {
+    key: 'question-2',
+    path: '<path d="M512 2.27555555C230.51377778 2.27555555 2.27555555 230.51377778 2.27555555 512s228.23822222 509.72444445 509.72444445 509.72444445 509.72444445-228.23822222 509.72444445-509.72444445S793.48622222 2.27555555 512 2.27555555z m0 805.54666667c-25.14488889 0-45.51111111-20.36622222-45.51111111-45.51111111s20.36622222-45.51111111 45.51111111-45.51111111 45.51111111 20.36622222 45.51111111 45.51111111-20.36622222 45.51111111-45.51111111 45.51111111z m71.56622222-249.74222222c-21.04888889 8.07822222-35.15733333 28.55822222-35.15733333 50.97244445V634.88c0 5.00622222-4.096 9.10222222-9.10222222 9.10222222h-54.61333334c-5.00622222 0-9.10222222-4.096-9.10222222-9.10222222v-24.46222222c0-26.28266667 7.62311111-52.224 22.64177778-73.84177778 14.67733333-21.16266667 35.15733333-37.31911111 59.27822222-46.53511111 38.68444445-14.90488889 63.71555555-47.33155555 63.71555556-82.71644444 0-50.176-49.03822222-91.02222222-109.22666667-91.02222223s-109.22666667 40.84622222-109.22666667 91.02222223v8.6471111c0 5.00622222-4.096 9.10222222-9.10222222 9.10222223h-54.61333333c-5.00622222 0-9.10222222-4.096-9.10222223-9.10222223V407.32444445c0-44.71466667 19.56977778-86.47111111 55.06844445-117.53244445C419.15733333 259.86844445 464.21333333 243.48444445 512 243.48444445s92.84266667 16.49777778 126.976 46.30755555C674.47466667 320.85333333 694.04444445 362.60977778 694.04444445 407.32444445c0 65.76355555-43.34933333 124.928-110.47822223 150.75555555z"></path>'
+  },
+  {
+    key: 'meh-2',
+    path: '<path d="M512 2.27555555C230.51377778 2.27555555 2.27555555 230.51377778 2.27555555 512s228.23822222 509.72444445 509.72444445 509.72444445 509.72444445-228.23822222 509.72444445-509.72444445S793.48622222 2.27555555 512 2.27555555zM257.13777778 408.46222222c0-30.15111111 24.46222222-54.61333333 54.61333333-54.61333333s54.61333333 24.46222222 54.61333334 54.61333333-24.46222222 54.61333333-54.61333334 54.61333333-54.61333333-24.46222222-54.61333333-54.61333333z m436.90666667 227.55555556c0 5.00622222-4.096 9.10222222-9.10222223 9.10222222H339.05777778c-5.00622222 0-9.10222222-4.096-9.10222223-9.10222222v-54.61333333c0-5.00622222 4.096-9.10222222 9.10222223-9.10222223h345.88444444c5.00622222 0 9.10222222 4.096 9.10222223 9.10222223v54.61333333z m18.20444444-172.94222223c-30.15111111 0-54.61333333-24.46222222-54.61333334-54.61333333s24.46222222-54.61333333 54.61333334-54.61333333 54.61333333 24.46222222 54.61333333 54.61333333-24.46222222 54.61333333-54.61333333 54.61333333z"></path>'
+  },
+  {
+    key: 'star',
+    path: '<path d="M1024 397.056l-353.792-51.392L512 25.088 353.792 345.664 0 397.056l256 249.536-60.416 352.32L512 832.576l316.416 166.336L768 646.592l256-249.536z m-512 356.416l-223.488 117.504 42.688-248.832L150.4 445.952l249.856-36.288L512 183.296l111.744 226.368 249.856 36.288-180.8 176.192 42.688 248.832L512 753.472z"></path>'
+  },
+  {
+    key: 'star-2',
+    path: '<path d="M1024 397.056l-353.792-51.392L512 25.088 353.792 345.664 0 397.056l256 249.536-60.416 352.32L512 832.576l316.416 166.336L768 646.592l256-249.536z"></path>'
+  },
+  {
+    key: 'star-3',
+    path: '<path d="M1024 397.056l-353.792-51.392L512 25.088 353.792 345.664 0 397.056l256 249.536-60.416 352.32L512 832.576l316.416 166.336L768 646.592l256-249.536z m-512 356.416l-0.96 0.512L512 183.232 623.744 409.6l249.856 36.288-180.8 176.192 42.688 248.832L512 753.408z"></path>'
+  },
+  {
+    key: 'user',
+    path: '<path d="M960.55751111 837.70582914c-24.46677333-57.99531457-59.67821431-110.03575309-104.33978469-154.69732345-44.66157037-44.66157037-96.70200889-79.74355753-154.69732345-104.33978471-0.51781531-0.25890765-1.03563061-0.38836148-1.55344594-0.64726913C780.61669136 519.76722963 833.04549136 424.87757431 833.04549136 317.81925925c0-177.3517432-143.69374815-321.04549136-321.04549136-321.04549135S190.95450864 140.46751605 190.95450864 317.81925925c0 107.05831506 52.4288 201.94797037 133.07853433 260.33164644-0.51781531 0.25890765-1.03563061 0.38836148-1.55344594 0.64726913-57.99531457 24.46677333-110.03575309 59.5487605-154.69732345 104.33978468-44.66157037 44.66157037-79.74355753 96.70200889-104.33978469 154.69732347C39.36407703 894.53605925 26.54814815 954.73208889 25.25360987 1016.61101827c-0.12945383 5.82542222 4.53088395 10.61521383 10.35630618 10.61521383h77.6722963c5.69596839 0 10.22685235-4.53088395 10.35630617-10.09739852 2.58907653-99.93835457 42.71976297-193.53347161 113.66046024-264.47416889 73.40032-73.40032 170.87905185-113.78991408 274.70102124-113.78991408s201.30070124 40.38959408 274.70102124 113.78991408C857.64171852 823.59536197 897.77240494 917.19047902 900.36148148 1017.12883358c0.12945383 5.69596839 4.66033778 10.09739852 10.35630617 10.09739852h77.6722963c5.82542222 0 10.48576-4.78979161 10.35630618-10.61521383-1.29453827-61.87892939-14.11046717-122.07495902-38.18887902-178.90518913zM512 540.47984197c-59.41930667 0-115.34336-23.17223506-157.41585383-65.24472888S289.33941728 377.23856592 289.33941728 317.81925925c0-59.41930667 23.17223506-115.34336 65.24472889-157.41585382S452.58069333 95.15867653 512 95.15867653s115.34336 23.17223506 157.41585383 65.2447289S734.66058272 258.39995259 734.66058272 317.81925925c0 59.41930667-23.17223506 115.34336-65.24472889 157.41585384S571.41930667 540.47984197 512 540.47984197z"></path>'
+  },
+  {
+    key: 'search',
+    path: '<path d="M999.12666078 913.4444089L770.74583703 685.06358518a421.88193187 421.88193187 0 0 0 84.5657126-253.84277334C855.31154963 197.37865482 665.06296889 7.13007408 431.22081184 7.13007408S7.13007408 197.37865482 7.13007408 431.22081184s190.24858075 424.09073778 424.09073779 424.09073779A421.88193187 421.88193187 0 0 0 685.06358518 770.74583703l228.38082372 228.38082371a60.68148148 60.68148148 0 0 0 85.68225184-85.68225187zM128.2988563 431.22081184a302.92195555 302.92195555 0 1 1 302.92195554 302.92195557 303.28604446 303.28604446 0 0 1-302.92195554-302.92195554z"></path>'
+  },
+  {
+    key: 'share',
+    path: '<path d="M822.68918518 706.18074075a154.81059555 154.81059555 0 0 0-111.94519703 47.8170074l-359.23437037-202.11787853a154.98050371 154.98050371 0 0 0 0-79.75973924l359.23437037-202.11787853a154.85914075 154.85914075 0 1 0-38.18078816-67.64771557l-359.23437035 202.11787854a155.3445926 155.3445926 0 1 0-2e-8 215.05517036l359.2343704 202.11787851A155.3445926 155.3445926 0 1 0 822.68918518 706.18074075z"></path>'
+  },
+  {
+    key: 'blocked',
+    path: '<path d="M874.04800001 149.95199999C777.344 53.248 648.76800001 0 512 0S246.656 53.248 149.95199999 149.95199999C53.248 246.656 0 375.23199999 0 512s53.248 265.344 149.95199999 362.04800001C246.656 970.752 375.23199999 1024 512 1024s265.344-53.248 362.04800001-149.95199999C970.752 777.344 1024 648.76800001 1024 512s-53.248-265.344-149.95199999-362.04800001zM896.00000001 512a382.08 382.08 0 0 1-71.10400002 222.40000001L289.59999999 199.10400001A382.08 382.08 0 0 1 512 127.99999999c211.71199999 0 384.00000001 172.288 384.00000001 384.00000001zM127.99999999 512a382.08 382.08 0 0 1 71.10400002-222.40000001l535.29599998 535.296A382.08 382.08 0 0 1 512 896.00000001c-211.71199999 0-384.00000001-172.288-384.00000001-384.00000001z"></path>'
+  },
+  {
+    key: 'spinner',
+    path: '<path d="M512 0A512 512 0 0 0 0.128 499.968C6.016 258.112 189.952 64 416 64 645.76 64 832 264.576 832 512a96 96 0 0 0 192 0 512 512 0 0 0-512-512z m0 1024a512 512 0 0 0 511.872-499.968C1017.984 765.888 834.048 960 608 960 378.24 960 192 759.424 192 512a96 96 0 0 0-192 0 512 512 0 0 0 512 512z"></path>'
+  },
+  {
+    key: 'spinner2',
+    path: '<path d="M192 512c0-12.16 0.704-24.192 2.048-36.032l-184.96-60.096A517.44 517.44 0 0 0 0.064 512c0 147.2 62.144 279.936 161.664 373.312l114.304-157.312A318.848 318.848 0 0 1 192.064 512z m640 0a318.592 318.592 0 0 1-83.968 216l114.304 157.312A510.4 510.4 0 0 0 1024 512c0-32.832-3.136-64.96-9.024-96.128l-184.96 60.096c1.344 11.84 2.048 23.872 2.048 36.032zM576 198.4a320.64 320.64 0 0 1 214.464 155.84l184.96-60.096A512.64 512.64 0 0 0 576 3.968V198.4zM233.536 354.24A320.448 320.448 0 0 1 448 198.4V3.968A512.32 512.32 0 0 0 48.576 294.144l184.96 60.096z m411.008 449.088C604.16 821.76 559.296 832 512 832s-92.16-10.24-132.544-28.672L265.152 960.64C338.368 1001.024 422.464 1024 512 1024s173.632-22.976 246.848-63.36l-114.304-157.312z"></path>'
+  },
+  {
+    key: 'contrast',
+    path: '<path d="M512 2.27555555A509.72444445 509.72444445 0 0 0 151.57475555 872.42524445 509.72444445 509.72444445 0 1 0 872.42524445 151.57475555 506.37937778 506.37937778 0 0 0 512 2.27555555zM75.09333333 512c0-240.91306667 195.9936-436.90666667 436.90666667-436.90666667v873.81333334c-240.91306667 0-436.90666667-195.9936-436.90666667-436.90666667z"></path>'
+  },
+  {
+    key: 'moon',
+    path: '<path d="M530.20444445 1021.72444445A527.92888889 527.92888889 0 0 1 2.27555555 493.79555555c0-213.90222222 122.88-405.68604445 313.1392-488.4935111a36.40888889 36.40888889 0 0 1 47.9232 47.9232C341.49262222 103.37848889 329.95555555 167.61742222 329.95555555 238.93333333c0 250.94826667 204.16284445 455.11111111 455.11111112 455.11111112 71.31591111 0 135.55484445-11.53706667 185.70808888-33.3824a36.40888889 36.40888889 0 0 1 47.9232 47.9232C935.89048889 898.84444445 744.10666667 1021.72444445 530.20444445 1021.72444445z"></path>'
+  },
+  {
+    key: 'volume',
+    path: '<path d="M637.68720026 1015.34581521a75.16094574 75.16094574 0 0 1-44.6503779-14.73682424l-2.0738388-1.6025118-287.38378337-235.66350047H84.66351917a75.41232014 75.41232014 0 0 1-75.41232016-75.41232016V336.03791965a75.41232014 75.41232014 0 0 1 75.41232016-75.41232016h218.85283742l287.38378337-235.66350045 2.0738388-1.60251182A75.41232014 75.41232014 0 0 1 713.09952038 84.12934855v855.7413029a75.41232014 75.41232014 0 0 1-75.41232012 75.41232014zM914.1990408 763.37440051a50.27488011 50.27488011 0 0 1-44.90175229-72.83573255c29.81928826-59.38720211 44.93317409-119.40284023 44.93317409-178.53866796 0-60.83260491-14.64255883-119.15146583-44.77606511-178.25587177a50.27488011 50.27488011 0 0 1 89.55213019-45.68729728C996.52415696 361.6781085 1014.74880099 434.92232445 1014.74880099 512c0 74.87814956-18.85308003 150.1333607-55.6165861 223.66037284A50.27488011 50.27488011 0 0 1 914.1990408 763.37440051z"></path>'
+  },
+  {
+    key: 'tag',
+    path: '<path d="M992.14222222 32.31288889A101.14844445 101.14844445 0 0 0 919.98435555 2.27555555H640.25031111a69.70026667 69.70026667 0 0 0-48.96995556 20.2296889L32.06257778 581.60924445a101.9904 101.9904 0 0 0 0 144.08817777l266.24 266.24a102.01315555 102.01315555 0 0 0 144.13368889 0l558.99022222-558.87644444A69.632 69.632 0 0 0 1021.72444445 384.11377778v-279.89333333a100.67057778 100.67057778 0 0 0-29.58222223-71.90755556zM803.27111111 293.54666667a72.81777778 72.81777778 0 1 1 72.81777778-72.81777778 72.81777778 72.81777778 0 0 1-72.81777778 72.81777778z"></path>'
+  },
+  {
+    key: 'send',
+    path: '<path d="M22.24674843 408.23873015L978.01723326 9.97006832a29.72154209 29.72154209 0 0 1 40.27268977 34.62559594l-238.06955071 952.35250793a29.72154209 29.72154209 0 0 1-47.85168256 15.60380953l-206.71332468-172.23633579a29.72154209 29.72154209 0 0 0-40.04977779 1.85759696l-106.03160076 105.95729678a29.72154209 29.72154209 0 0 1-50.67522946-20.95368737V703.22503414a29.72154209 29.72154209 0 0 1 8.69355174-21.02799136l431.18526984-431.18526984-509.05571047 381.84751033a29.72154209 29.72154209 0 0 1-36.85471185-0.96594993L14.66775464 458.46813562a29.72154209 29.72154209 0 0 1 7.57899381-50.22940547z"></path>'
+  },
+  {
+    key: 'cube',
+    path: '<path d="M932.75022222 239.616a9.10222224 9.10222224 0 0 0 0-15.7240889L585.18186668 21.9591111a145.95413333 145.95413333 0 0 0-146.38648891 3e-8L91.29528889 223.8919111a9.10222224 9.10222224 0 0 0 0 15.7240889L507.44888889 484.42026667a9.10222224 9.10222224 0 0 0 9.23875556 0zM52.33777778 301.53386668a9.10222224 9.10222224 0 0 0-13.65333333 7.94168887v395.69635558a109.22666667 109.22666667 0 0 0 54.24924442 94.18524442L461.93777778 1020.60942223a9.10222224 9.10222224 0 0 0 13.65333333-7.87342224V553.64266667a9.10222224 9.10222224 0 0 0-4.55111111-7.87342222zM548.40888889 555.23555555v457.38666666a9.10222224 9.10222224 0 0 0 13.65333333 7.87342224l368.98133334-221.25226668A109.22666667 109.22666667 0 0 0 985.31555555 705.17191113V309.47555555a9.10222224 9.10222224 0 0 0-13.65333333-7.85066668l-418.70222222 245.76000003a9.10222224 9.10222224 0 0 0-4.55111111 7.85066665z"></path>'
+  },
+  {
+    key: 'like',
+    path: '<path d="M972.97891405 538.75379095c20.71261235-27.37023774 32.17852275-60.90494344 32.17852275-95.79583209 0-55.35692228-30.94562916-107.75489994-80.75453028-136.97447808a83.42990936 83.42990936 0 0 0-42.28825019-11.46591041H586.46677296l7.39736155-151.52262246c1.72605103-36.61693968-11.21933169-71.38453897-36.37036097-97.89175121-25.27431864-26.50721222-59.30218177-41.17864597-96.04241082-41.17864596-64.11046679 0-120.82357201 43.15127571-137.83750358 104.91924467l-105.90555955 383.42990711h-0.36986808v527.67845739h582.2956435c11.34262104 0 22.43866337-2.21920846 32.6716802-6.6576254 58.68573498-25.02773992 96.53556825-82.35729194 96.53556825-145.9746013 0-15.53445926-2.21920846-30.82233981-6.6576254-45.61706289 20.71261235-27.37023774 32.17852275-60.90494344 32.17852275-95.7958321 0-15.53445926-2.21920846-30.82233981-6.6576254-45.61706291 20.71261235-27.37023774 32.17852275-60.90494344 32.17852276-95.7958321-0.24657871-15.53445926-2.46578717-30.94562916-6.90420412-45.74035226zM18.8425632 531.72629748v448.77326747c0 21.82221658 17.63037836 39.45259495 39.45259495 39.45259496h80.13808347V492.27370252h-80.13808347c-21.82221658 0-39.45259495 17.63037836-39.45259495 39.45259496z"></path>'
+  },
+]
--- a/src/configs/imageClip.ts
+++ b/src/configs/imageClip.ts
@ -0,0 +1,51 @@
+export const CLIPPATHS = {
+  rect: {
+    name: '矩形',
+    type: 'rect',
+    radius: '0',
+    style: '',
+  },
+  roundRect: {
+    name: '圆角矩形',
+    type: 'rect',
+    radius: '10%',
+    style: 'inset(0 0 0 0 round 10% 10% 10% 10%)',
+  },
+  ellipse: {
+    name: '圆形',
+    type: 'ellipse',
+    style: 'ellipse(50% 50% at 50% 50%)',
+  },
+  triangle: {
+    name: '三角形',
+    type: 'polygon',
+    style: 'polygon(50% 0%, 0% 100%, 100% 100%)',
+    createPath: (width: number, height: number) => {
+      return `M ${width / 2} 0 L 0 ${height} L ${width} ${height} Z`
+    },
+  },
+  pentagon: {
+    name: '五边形',
+    type: 'polygon',
+    style: 'polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)',
+    createPath: (width: number, height: number) => {
+      return `M ${width / 2} 0 L ${width} ${0.38 * height} L ${0.82 * width} ${height} L ${0.18 * width} ${height} L 0 ${0.38 * height} Z`
+    },
+  },
+  rhombus: {
+    name: '菱形',
+    type: 'polygon',
+    style: 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)',
+    createPath: (width: number, height: number) => {
+      return `M ${width / 2} 0 L ${width} ${height / 2} L ${width / 2} ${height} L 0 ${height / 2} Z`
+    },
+  },
+  star: {
+    name: '五角星',
+    type: 'polygon',
+    style: 'polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)',
+    createPath: (width: number, height: number) => {
+      return `M ${width / 2} 0 L ${0.61 * width} ${0.35 * height} L ${0.98 * width} ${0.35 * height} L ${0.68 * width} ${0.57 * height} L ${0.79 * width} ${0.91 * height} L ${0.50 * width} ${0.70 * height} L ${0.21 * width} ${0.91 * height} L ${0.32 * width} ${0.57 * height} L ${0.02 * width} ${0.35 * height} L ${0.39 * width} ${0.35 * height} Z`
+    },
+  },
+}
--- a/src/configs/keyCode.ts
+++ b/src/configs/keyCode.ts
@ -0,0 +1,18 @@
+export const KEYCODE = {
+  S: 83,
+  C: 67,
+  X: 88,
+  Z: 90,
+  Y: 89,
+  A: 65,
+  G: 71,
+  L: 76,
+  DELETE: 46,
+  UP: 38,
+  DOWN: 40,
+  LEFT: 37,
+  RIGHT: 39,
+  ENTER: 13,
+  SPACE: 32,
+  TAB: 9,
+}
--- a/src/configs/lines.ts
+++ b/src/configs/lines.ts
@ -0,0 +1,21 @@
+export const LINES = [
+  { type: 'line', path: 'M0,0 L20,20', style: 'solid', marker: ['', ''] },
+  { type: 'line', path: 'M0,0 L20,20', style: 'solid', marker: ['', 'arrow'] },
+  { type: 'line', path: 'M0,0 L20,20', style: 'solid', marker: ['arrow', 'arrow'] },
+  { type: 'line', path: 'M0,0 L20,20', style: 'solid', marker: ['', 'cusp'] },
+  { type: 'line', path: 'M0,0 L20,20', style: 'solid', marker: ['cusp', 'cusp'] },
+  { type: 'line', path: 'M0,0 L20,20', style: 'solid', marker: ['', 'dot'] },
+  { type: 'line', path: 'M0,0 L20,20', style: 'solid', marker: ['dot', 'dot'] },
+  { type: 'line', path: 'M0,0 L20,20', style: 'dashed', marker: ['', ''] },
+  { type: 'line', path: 'M0,0 L20,20', style: 'dashed', marker: ['', 'arrow'] },
+  { type: 'line', path: 'M0,0 L20,20', style: 'dashed', marker: ['arrow', 'arrow'] },
+
+  { type: 'polyline-x', path: 'M0,0 L0,20 L20,20', style: 'solid', marker: ['', 'arrow'] },
+  { type: 'polyline-y', path: 'M0,0 L20,0 L20,20', style: 'solid', marker: ['', 'arrow'] },
+
+  { type: 'polyline-x2', path: 'M0,0 L10,0 L10,20 L20,20', style: 'solid', marker: ['', 'arrow'] },
+  { type: 'polyline-y2', path: 'M0,0 L0,10 L20,10 L20,20', style: 'solid', marker: ['', 'arrow'] },
+
+  { type: 'curve-x', path: 'M0,0 C20,0 0,20 20,20', style: 'solid', marker: ['', 'arrow'] },
+  { type: 'curve-y', path: 'M0,0 C0,20 20,0 20,20', style: 'solid', marker: ['', 'arrow'] },
+]
--- a/src/configs/shadows.ts
+++ b/src/configs/shadows.ts
@ -0,0 +1,77 @@
+export const TEXT_SHADOWS = [
+  {
+    key: '无阴影',
+    value: '',
+  },
+  {
+    key: '左上方偏移-深色',
+    value: '-1px -1px 3px #666',
+  },
+  {
+    key: '右上方偏移-深色',
+    value: '1px -1px 3px #666',
+  },
+  {
+    key: '左下方偏移-深色',
+    value: '-1px 1px 3px #666',
+  },
+  {
+    key: '右下方偏移-深色',
+    value: '1px 1px 3px #666',
+  },
+  {
+    key: '左上方偏移-浅色',
+    value: '-1px -1px 3px #ccc',
+  },
+  {
+    key: '右上方偏移-浅色',
+    value: '1px -1px 3px #ccc',
+  },
+  {
+    key: '左下方偏移-浅色',
+    value: '-1px 1px 3px #ccc',
+  },
+  {
+    key: '右下方偏移-浅色',
+    value: '1px 1px 3px #ccc',
+  },
+]
+
+export const SHAPE_SHADOWS = [
+  {
+    key: '无阴影',
+    value: '',
+  },
+  {
+    key: '左上-深色',
+    value: '-3px -3px 6px #666',
+  },
+  {
+    key: '左下-深色',
+    value: '-3px 3px 6px #666',
+  },
+  {
+    key: '右上-深色',
+    value: '3px -3px 6px #666',
+  },
+  {
+    key: '右下-深色',
+    value: '3px 3px 6px #666',
+  },
+  {
+    key: '左上-浅色',
+    value: '-3px -3px 6px #ccc',
+  },
+  {
+    key: '左下-浅色',
+    value: '-3px 3px 6px #ccc',
+  },
+  {
+    key: '右上-浅色',
+    value: '3px -3px 6px #ccc',
+  },
+  {
+    key: '右下-浅色',
+    value: '3px 3px 6px #ccc',
+  },
+]
--- a/src/configs/shapes.ts
+++ b/src/configs/shapes.ts
@ -0,0 +1,350 @@
+export const SHAPES = [
+  {
+    key: 'rect',
+    path: 'M 0 0 L 200 0 L 200 200 L 0 200 Z'
+  },
+  {
+    key: 'rect-2',
+    path: 'M 0 200 L 0 0 L 150 0 L 200 50 L 200 200 L 0 200'
+  },
+  {
+    key: 'rect-3',
+    path: 'M 0 150 L 0 0 L 150 0 L 200 50 L 200 200 L 50 200 L 0 150'
+  },
+  {
+    key: 'roundRect',
+    path: 'M 20 0 L 180 0 Q 200 0 200 20 L 200 180 Q 200 200 180 200 L 20 200 Q 0 200 0 180 L 0 20 Q 0 0 20 0 '
+  },
+  {
+    key: 'roundRect-2',
+    path: 'M 0 50 Q 0 0 50 0 L 150 0 Q 200 0 200 50 L 200 150 Q 200 200 150 200 L 50 200 Q 0 200 0 150 L 0 50 Z'
+  },
+  {
+    key: 'roundRect-3',
+    path: 'M 0 0 L 140 0 Q 200 0 200 60 L 200 200 L 60 200 Q 0 200 0 140 L 0 0 Z'
+  },
+  {
+    key: 'roundRect-4',
+    path: 'M 0 0 L 140 0 Q 200 0 200 60 L 200 200 L 0 200 L 0 0 Z'
+  },
+  {
+    key: 'ellipse',
+    path: 'M 100 0 A 50 50 0 1 1 100 200 A 50 50 0 1 1 100 0 Z'
+  },
+  {
+    key: 'ellipse-half',
+    path: 'M 0 200 A 50 100 0 1 1 200 200 L 0 200 Z'
+  },  
+  {
+    key: 'ellipse-quarter',
+    path: 'M 200 0 Q 0 0 0 200 L 200 200 L 200 0'
+  },
+  {
+    key: 'pie',
+    path: 'M 100 0 A 100 100 0 1 1 0 100 L 100 100 L 100 0 Z'
+  },
+  {
+    key: 'pie-2',
+    path: 'M 200 100 A 100 100 0 1 1 160 20 L 100 100 Z'
+  },
+  {
+    key: 'triangle',
+    path: 'M 100 0 L 0 200 L 200 200 L 100 0 Z'
+  },
+  {
+    key: 'triangle-2',
+    path: 'M 0 0 L 200 0 L 100 200 L 0 0 Z'
+  },
+  {
+    key: 'triangle-3',
+    path: 'M 0 100 L 200 0 L 200 200 L 0 100 Z'
+  },
+  {
+    key: 'triangle-4',
+    path: 'M 0 0 L 200 100 L 0 200 L 0 0 Z'
+  },
+  {
+    key: 'triangle-5',
+    path: 'M 0 0 L 0 200 L 200 200 Z'
+  },
+  {
+    key: 'triangle-6',
+    path: 'M 0 0 L 200 0 L 200 200 Z'
+  },
+  {
+    key: 'parallelogram',
+    path: 'M 50 0 L 200 0 L 150 200 L 0 200 L 50 0 Z'
+  },
+  {
+    key: 'diamond',
+    path: 'M 100 0 L 0 100 L 100 200 L 200 100 L 100 0 Z'
+  },
+  {
+    key: 'trapezoid',
+    path: 'M 50 0 L 150 0 L 200 200 L 0 200 L 50 0 Z'
+  },
+  {
+    key: 'pentagon',
+    path: 'M 100 0 L 0 90 L 50 200 L 150 200 L 200 90 L 100 0 Z'
+  },
+  {
+    key: 'hexagon',
+    path: 'M 100 0 L 0 60 L 0 140 L 100 200 L 200 140 L 200 60 L 100 0 Z'
+  },
+  {
+    key: 'octagon',
+    path: 'M 60 0 L 140 0 L 200 60 L 200 140 L 140 200 L 60 200 L 0 140 L 0 60 L 60 0 Z'
+  },
+  {
+    key: 'water',
+    path: 'M 100 0 A 100 100 0 1 1 0 100 L 0 0 L 100 0 Z'
+  },  
+  {
+    key: 'leaf',
+    path: 'M 0 0 Q 200 0 200 200 Q 0 200 0 0'
+  },
+  {
+    key: 'leaf-2',
+    path: 'M 0 200 Q 0 0 200 0 Q 200 200 0 200'
+  },
+  {
+    key: 'moon',
+    path: 'M 100 0 A 50 50 0 1 0 200 120 A 100 100 0 1 1 100 0'
+  },
+  {
+    key: 'star',
+    path: 'M 100 0 L 122 70 L 196 70 L 136 114 L 158 182 L 100 140 L 42 182 L 64 114 L 4 70 L 78 70 Z'
+  },
+  {
+    key: 'lightning',
+    path: 'M 120 0 L 100 80 L 200 80 L 80 200 L 100 120 L 0 120 L 120 0'
+  },
+  {
+    key: 'cloud',
+    path: 'M 190 100 C 200 120 190 160 150 160 C 130 190 110 190 80 170 C 50 180 20 170 20 140 C 0 130 0 80 30 70 C 30 30 50 20 90 30 C 120 10 140 10 160 40 C 200 40 200 70 190 100'
+  },
+  {
+    key: 'arrow',
+    path: 'M 100 0 L 0 100 L 50 100 L 50 200 L 150 200 L 150 100 L 200 100 L 100 0 Z'
+  },
+  {
+    key: 'arrow-2',
+    path: 'M 100 200 L 200 100 L 150 100 L 150 0 L 50 0 L 50 100 L 0 100 L 100 200 Z'
+  },
+  {
+    key: 'arrow-3',
+    path: 'M 0 100 L 100 0 L 100 50 L 200 50 L 200 150 L 100 150 L 100 200 L 0 100 Z'
+  },
+  {
+    key: 'arrow-4',
+    path: 'M 200 100 L 100 0 L 100 50 L 0 50 L 0 150 L 100 150 L 100 200 L 200 100 Z'
+  },
+  {
+    key: 'arrow-5',
+    path: 'M 50 100 L 0 50 L 125 50 L 125 0 L 200 100 L 125 200 L 125 150 L 0 150 Z'
+  },
+  {
+    key: 'arrow-6',
+    path: 'M 150 100 L 200 50 L 75 50 L 75 0 L 0 100 L 75 200 L 75 150 L 200 150 Z'
+  },
+  {
+    key: 'arrow-7',
+    path: 'M 100 150 L 50 200 L 50 75 L 0 75 L 100 0 L 200 75 L 150 75 L 150 200 Z'
+  },
+  {
+    key: 'arrow-8',
+    path: 'M 100 50 L 50 0 L 50 125 L 0 125 L 100 200 L 200 125 L 150 125 L 150 0 Z'
+  },
+  {
+    key: 'arrow-9',
+    path: 'M 40 120 L 0 160 L 40 200 L 40 180 L 180 180 L 180 40 L 200 40 L 160 0 L 120 40 L 140 40 L 140 140 L 40 140 Z'
+  },
+  {
+    key: 'arrow-10',
+    path: 'M 160 60 L 160 80 L 200 40 L 160 0 L 160 20 L 20 20 L 20 160 L 0 160 L 40 200 L 80 160 L 60 160 L 60 60 Z'
+  },
+  {
+    key: 'arrow-11',
+    path: 'M 100 0 L 0 40 L 60 40 L 60 160 L 0 160 L 100 200 L 200 160 L 140 160 L 140 40 L 200 40 Z'
+  },
+  {
+    key: 'arrow-12',
+    path: 'M 0 100 L 40 200 L 40 140 L 160 140 L 160 200 L 200 100 L 160 0 L 160 60 L 40 60 L 40 0 Z'
+  },
+  {
+    key: 'arrow-13',
+    path: 'M 0 200 Q 0 25 150 25 L 150 0 L 200 50 L 150 100 L 150 75 Q 0 75 0 200',
+  },
+  {
+    key: 'arrow-14',
+    path: 'M 200 200 Q 175 25 50 25 L 50 0 L 0 50 L 50 100 L 50 75 Q 175 75 200 200'
+  },
+  {
+    key: 'message',
+    path: 'M 0 0 L 200 0 L 200 150 L 80 150 L 40 200 L 40 150 L 0 150 L 0 0 Z'
+  },
+  {
+    key: 'message-2',
+    path: 'M 0 0 L 200 0 L 200 150 L 160 150 L 160 200 L 120 150 L 0 150 L 0 10 Z'
+  },
+  {
+    key: 'v',
+    path: 'M 0 0 L 120 0 L 200 100 L 120 200 L 0 200 L 80 100 L 0 0 Z'
+  },
+  {
+    key: 'v-2',
+    path: 'M 80 0 L 200 0 L 120 100 L 200 200 L 80 200 L 0 100 L 80 0 Z'
+  },
+  {
+    key: 'point',
+    path: 'M 0 0 L 140 0 L 200 100 L 140 200 L 0 200 L 0 100 L 0 0 Z'
+  },
+  {
+    key: 'point-2',
+    path: 'M 60 0 L 200 0 L 200 100 L 200 200 L 60 200 L 0 100 L 60 0 Z'
+  },
+  {
+    key: 'plus-wide',
+    path: 'M 50 0 L 150 0 L 150 50 L 200 50 L 200 150 L 150 150 L 150 200 L 50 200 L 50 150 L 0 150 L 0 50 L 50 50 L 50 0'
+  },
+  {
+    key: 'plus',
+    path: 'M 70 0 L 70 70 L 0 70 L 0 130 L 70 130 L 70 200 L 130 200 L 130 130 L 200 130 L 200 70 L 130 70 L 130 0 L 70 0 Z'
+  },
+  {
+    key: 'cross',
+    path: 'M 40 0 L 0 40 L 60 100 L 0 160 L 40 200 L 100 140 L 160 200 L 200 160 L 140 100 L 200 40 L 160 0 L 100 60 L 40 0 Z'
+  },
+  {
+    key: 'funnel',
+    path: 'M 0 0 L 200 0 L 0 200 L 200 200 L 0 0 Z'
+  },
+  {
+    key: 'funnel-2',
+    path: 'M 200 0 Q 0 100 200 200 L 0 200 Q 200 100 0 0 L 200 0 Z'
+  },
+  {
+    key: 'funnel-3',
+    path: 'M 200 0 Q 100 100 200 200 L 0 200 Q 100 100 0 0 L 200 0 Z'
+  },
+  {
+    key: 'flag',
+    path: 'M 0 0 Q 50 50 100 25 Q 150 0 200 50 L 200 200 Q 150 150 100 175 Q 50 200 0 150 L 0 0 Z'
+  },
+  {
+    key: 'crown',
+    path: 'M 0 200 L 200 200 L 180 60 L 140 100 L 100 0 L 60 100 L 20 60 L 0 200 Z'
+  },
+  {
+    key: 'sector',
+    path: 'M 200 100 A 50 50 0 1 1 0 100 L 100 0 L 200 100 Z'
+  },
+  {
+    key: 'sector-2',
+    path: 'M 0 100 A 50 50 0 1 1 200 100 L 100 200 L 0 100 Z'
+  },
+  {
+    key: 'sector-3',
+    path: 'M 200 200 L 125 0 Q 0 0 0 125 Z'
+  },
+  {
+    key: 'darts',
+    path: 'M 100 0 L 60 60 L 0 100 L 60 140 L 100 200 L 140 140 L 200 100 L 140 60 L 100 0 Z'
+  },
+  {
+    key: 'break',
+    path: 'M 0 0 L 150 0 L 200 50 L 150 100 L 200 150 L 150 200 L 0 200 L 50 150 L 0 100 L 50 50 L 0 0 Z'
+  },
+  {
+    key: 'spray',
+    path: 'M 0 100 A 50 50 0 1 1 200 100 Q 100 50 100 200 Q 100 50 0 100 Z'
+  },
+  {
+    key: 'pinecones',
+    path: 'M 100 0 Q 0 50 0 175 Q 100 225 200 175 Q 200 50 100 0'
+  },
+  {
+    key: 'triangular-arrow',
+    path: 'M 50 100 L 0 0 L 200 100 L 0 200 Z'
+  },
+  {
+    key: 'triangular-arrow-2',
+    path: 'M 100 150 L 0 200 L 100 0 L 200 200 Z'
+  },
+  {
+    key: 'triangular-arrow-3',
+    path: 'M 150 100 L 200 200 L 0 100 L 200 0 Z'
+  },
+  {
+    key: 'triangular-arrow-4',
+    path: 'M 100 50 L 200 0 L 100 200 L 0 0 Z'
+  },
+  {
+    key: 'border',
+    path: 'M 0 0 L 200 0 L 160 40 L 40 40 L 40 160 L 0 200 Z'
+  },
+  {
+    key: 'border-2',
+    path: 'M 200 200 L 200 0 L 160 40 L 160 160 L 40 160 L 0 200 Z'
+  },
+  {
+    key: 'border-3',
+    path: 'M 40 40 L 200 40 L 200 0 L 0 0 L 0 200 L 40 200 Z'
+  },
+  {
+    key: 'border-4',
+    path: 'M 200 200 L 200 0 L 160 0 L 160 160 L 0 160 L 0 200 Z'
+  },
+  {
+    key: 'flower',
+    path: 'M 100 100 Q 50 50 100 0 Q 150 50 100 100 Q 150 50 200 100 Q 150 150 100 100 Q 150 150 100 200 Q 50 150 100 100 Q 50 150 0 100 Q 50 50 100 100'
+  },
+  {
+    key: 'flower-2',
+    path: 'M 100 100 Q 25 0 100 0 Q 175 0 100 100 Q 200 25 200 100 Q 200 175 100 100 Q 175 200 100 200 Q 25 200 100 100 Q 0 175 0 100 Q 0 25 100 100'
+  },
+  {
+    key: 'flower-3',
+    path: 'M 100 100 L 50 0 L 0 50 L 100 100 L 0 150 L 50 200 L 100 100 L 150 200 L 200 150 L 100 100 L 200 50 L 150 0 L 100 100'
+  },
+  {
+    key: 'brace-left',
+    path: 'M 200 0 L 80 20 L 80 90 L 0 100 L 80 110 L 80 180 L 200 200',
+    type: 'line'
+  },
+  {
+    key: 'brace-right',
+    path: 'M 0 0 L 120 20 L 120 90 L 200 100 L 120 110 L 120 180 L 0 200',
+    type: 'line'
+  },
+  {
+    key: 'fillet-brace-left',
+    path: 'M 200 0 Q 80 0 80 40 L 80 90 L 0 100 L 80 110 L 80 160 Q 80 200 200 200',
+    type: 'line'
+  },
+  {
+    key: 'fillet-brace-right',
+    path: 'M 0 0 Q 120 0 120 40 L 120 90 L 200 100 L 120 110 L 120 160 Q 120 200 0 200',
+    type: 'line'
+  },
+  {
+    key: 'bracket-left',
+    path: 'M 200 0 L 0 0 L 0 200 L 200 200',
+    type: 'line'
+  },
+  {
+    key: 'bracket-right',
+    path: 'M 0 0 L 200 0 L 200 200 L 0 200',
+    type: 'line'
+  },
+  {
+    key: 'parentheses-left',
+    path: 'M 200 0 Q 0 0 0 100 Q 0 200 200 200',
+    type: 'line'
+  },
+  {
+    key: 'parentheses-right',
+    path: 'M 0 0 Q 200 0 200 100 Q 200 200 0 200',
+    type: 'line'
+  },
+]
--- a/src/configs/tableTheme.ts
+++ b/src/configs/tableTheme.ts
@ -0,0 +1,117 @@
+const commonProps = {
+  data: [
+    [
+      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
+      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
+      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
+      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
+      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
+    ],
+    [
+      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
+      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
+      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
+      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
+      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
+    ],
+    [
+      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
+      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
+      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
+      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
+      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
+    ],
+    [
+      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
+      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
+      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
+      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
+      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
+    ],
+    [
+      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
+      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
+      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
+      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
+      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
+    ],
+    [
+      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
+      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
+      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
+      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
+      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
+    ],
+  ],
+  rowSizes: [10, 10, 10, 10, 10, 10],
+  colSizes: [20, 20, 20, 20, 20],
+  width: 102,
+  height: 62,
+  borderColor: '#fff',
+  borderTheme: 'all',
+  borderStyle: 'solid',
+  borderWidth: 1,
+}
+
+export const TABLE_THEMES = [
+  {
+    ...commonProps,
+    tableTheme: 'style-default',
+  },
+  {
+    ...commonProps,
+    tableTheme: 'style-0',
+  },
+  {
+    ...commonProps,
+    tableTheme: 'style-1',
+  },
+  {
+    ...commonProps,
+    tableTheme: 'style-2',
+  },
+  {
+    ...commonProps,
+    tableTheme: 'style-3',
+  },
+  {
+    ...commonProps,
+    tableTheme: 'style-4',
+  },
+  {
+    ...commonProps,
+    tableTheme: 'style-5',
+  },
+  {
+    ...commonProps,
+    tableTheme: 'style-6',
+  },
+  {
+    ...commonProps,
+    tableTheme: 'style-7',
+  },
+  {
+    ...commonProps,
+    tableTheme: 'style-8',
+  },
+  {
+    ...commonProps,
+    tableTheme: 'style-9',
+  },
+  {
+    ...commonProps,
+    tableTheme: 'style-10',
+  },
+  {
+    ...commonProps,
+    tableTheme: 'style-11',
+  },
+  {
+    ...commonProps,
+    tableTheme: 'style-12',
+  },
+  {
+    ...commonProps,
+    tableTheme: 'style-13',
+  },
+]
--- a/src/main.ts
+++ b/src/main.ts
@ -3,4 +3,9 @@ import App from './App.vue'
 import router from './router'
 import store from './store'

-createApp(App).use(store).use(router).mount('#app')
+import '@/assets/styles/global.scss'
+
+const app = createApp(App)
+app.use(store)
+app.use(router)
+app.mount('#app')
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -1,25 +1,22 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
-import Home from '../views/Home.vue'
+import Editor from '@/views/Editor/index.vue'

 const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
-    name: 'Home',
-    component: Home
+    name: 'Editor',
+    component: Editor,
  },
  {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
-  }
+    path: '/player',
+    name: 'Player',
+    component: () => import(/* webpackChunkName: "Player" */ '@/views/Player/index.vue'),
+  },
 ]

 const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
-  routes
+  routes,
 })

 export default router
--- a/src/store/editor.ts
+++ b/src/store/editor.ts
@ -0,0 +1,23 @@
+const state = {
+
+}
+
+const getters = {
+
+}
+
+const mutations = {
+
+}
+
+const actions = {
+
+}
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  mutations,
+  actions,
+}
--- a/src/store/index.ts
+++ b/src/store/index.ts
@ -1,12 +1,31 @@
 import { createStore } from 'vuex'

+import slides from './slides'
+import editor from './editor'
+
+const state = {
+
+}
+
+const getters = {
+
+}
+
+const mutations = {
+
+}
+
+const actions = {
+
+}
+
 export default createStore({
-  state: {
-  },
-  mutations: {
-  },
-  actions: {
-  },
  modules: {
-  }
+    slides,
+    editor,
+  },
+  state,
+  getters,
+  mutations,
+  actions,
 })
--- a/src/store/slides.ts
+++ b/src/store/slides.ts
@ -0,0 +1,24 @@
+const state = {
+  slides: [],
+  slideIndex: 0,
+}
+
+const getters = {
+  
+}
+
+const mutations = {
+
+}
+
+const actions = {
+
+}
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  mutations,
+  actions,
+}
--- a/src/types/slides.ts
+++ b/src/types/slides.ts
@ -0,0 +1,126 @@
+interface PPTElementBaseProps {
+  id: string;
+  isLock: boolean;
+  groupId: string;
+  left: number;
+  top: number;
+}
+
+interface PPTElementSizeProps {
+  width: number;
+  height: number;
+}
+
+interface PPTElementBorderProps {
+  borderStyle: string;
+  borderWidth: number;
+  borderColor: string;
+}
+
+interface PPTTextElement extends PPTElementBaseProps, PPTElementSizeProps, PPTElementBorderProps {
+  rotate: number;
+  fill: string;
+  opactity: number;
+  lineHeight: number;
+  segmentSapcing: number;
+  letterSpacing: number;
+  shadow: string;
+  padding: number;
+  textType: string;
+  content: string;
+}
+
+interface PPTImageElement extends PPTElementBaseProps, PPTElementSizeProps, PPTElementBorderProps {
+  rotate: number;
+  filter: string;
+  clip: string;
+  flip: string;
+  shadow: string;
+  lockRatio: boolean;
+  imgUrl: string;
+}
+
+interface PPTShapeElement extends PPTElementBaseProps, PPTElementSizeProps, PPTElementBorderProps {
+  rotate: number;
+  fill: string;
+  opactity: number;
+  shadow: string;
+  lockRatio: boolean;
+  svgCode: string;
+  text: string;
+  textAlign: string;
+}
+
+interface PPTIconElement extends PPTElementBaseProps, PPTElementSizeProps {
+  rotate: number;
+  color: string;
+  shadow: string;
+  lockRatio: boolean;
+  svgCode: string;
+}
+
+interface PPTLineElement extends PPTElementBaseProps {
+  start: number[];
+  end: number[];
+  width: number;
+  style: string;
+  color: string;
+  marker: string[];
+  lineType: string;
+}
+
+interface BarChartSeries {
+  name: string;
+  data: number[];
+}
+interface BarChartData {
+  axisData: string[];
+  series: BarChartSeries[];
+}
+interface PieChartData {
+  name: string;
+  value: number
+}
+interface PPTChartElement extends PPTElementBaseProps, PPTElementSizeProps, PPTElementBorderProps {
+  chartType: string;
+  theme: string;
+  data: PieChartData[] | BarChartData;
+}
+
+interface TableCell {
+  colspan: number;
+  rowspan: number;
+  content: string;
+  bgColor: string;
+}
+interface PPTTableElement extends PPTElementBaseProps, PPTElementSizeProps {
+  borderTheme: string;
+  theme: string;
+  rowSizes: number[];
+  colSizes: number[];
+  data: TableCell[][];
+}
+interface PPTIframeElement extends PPTElementBaseProps, PPTElementSizeProps, PPTElementBorderProps {
+  src: string;
+}
+
+type PPTElement = PPTTextElement | 
+                  PPTImageElement | 
+                  PPTShapeElement | 
+                  PPTIconElement | 
+                  PPTLineElement | 
+                  PPTChartElement |
+                  PPTTableElement |
+                  PPTIframeElement
+
+interface PPTAnimation {
+  elId: string;
+  type: string;
+  duration: number;
+}
+
+interface Slide {
+  id: string;
+  elements: PPTElement[];
+  animations: PPTAnimation[];
+}
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@ -0,0 +1,198 @@
+import padStart from 'lodash/padStart'
+import Clipboard from 'clipboard'
+import CryptoJS from 'crypto-js'
+
+const CRYPTO_KEY = 'zxc_ppt_online_editor'
+
+// 生成随机数
+export const createRandomNumber = (min: number, max: number) => {
+  return Math.floor(min + Math.random() * (max - min))
+}
+
+// 生成随机码
+export const createRandomCode = (len: number = 6) => {
+  const charset = `0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz`
+  const maxLen = charset.length
+  let ret = ''
+  for(let i = 0; i < len; i++) {
+    const randomIndex = Math.floor(Math.random() * maxLen)
+    ret += charset[randomIndex]
+  }
+  return ret
+}
+
+// 生成uuid
+export const createUUID = () => {
+  const url = URL.createObjectURL(new Blob())
+  const uuid = url.toString()
+  URL.revokeObjectURL(url)
+  return uuid.substr(uuid.lastIndexOf('/') + 1)
+}
+
+// 获取当前日期字符串
+export const getDateTime = (format: string = 'yyyy-MM-dd hh:mm:ss') => {
+  const date = new Date()
+
+  const formatMap = {
+    'y+': date.getFullYear(),
+    'M+': date.getMonth() + 1,
+    'd+': date.getDate(),
+    'h+': date.getHours(),
+    'm+': date.getMinutes(),
+    's+': date.getSeconds(),
+  }
+
+  for(const item of Object.keys(formatMap)) {
+    if(new RegExp('(' + item + ')').test(format)) {
+      const formated = (formatMap[item] + '').length < RegExp.$1.length ? padStart('' + formatMap[item], RegExp.$1.length, '0') : formatMap[item]
+      format = format.replace(RegExp.$1, formated)
+    }
+  }
+  return format
+}
+
+// 数字转中文，如1049 -> 一千零四十九
+export const digitalToChinese = (n: number) => {
+  const str = n + ''
+  const len = str.length - 1
+  const idxs = ['', '十', '百', '千']
+  const num = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']
+  return str.replace(/([1-9]|0+)/g, ($, $1, idx) => {
+    const pos = len - idx
+    if($1 !== 0) {
+      if(idx === 0 && $1 === 1 && idxs[pos] === '十') return idxs[pos]
+      return num[$1] + idxs[pos]
+    }
+    if(idx + $1.length >= str.length) return ''
+    return '零'
+  })
+}
+
+// 数字补足位数，例如将6补足3位 -> 003
+export const fillDigit = (digit: number, len: number) => {
+  return padStart('' + digit, len, '0')
+}
+
+// 进入全屏
+export const enterFullscreen = () => {
+  const docElm = document.documentElement
+  docElm.requestFullscreen()
+}
+
+// 退出全屏
+export const exitFullscreen = document.exitFullscreen
+
+// 判断是否全屏
+export const isFullscreen = () => document.fullscreenEnabled
+
+// 判断用户的操作系统是否安装了某字体
+export const isSupportFontFamily = (fontFamily: string) => {
+  if(typeof fontFamily !== 'string') return false
+  const arial = 'Arial'
+  if(fontFamily.toLowerCase() === arial.toLowerCase()) return true
+  const a = 'a'
+  const size = 100
+  const width = 100
+  const height = 100
+
+  const canvas = document.createElement('canvas')
+  const ctx = canvas.getContext('2d')
+
+  if(!ctx) return false
+
+  canvas.width = width
+  canvas.height = height
+  ctx.textAlign = 'center'
+  ctx.fillStyle = 'black'
+  ctx.textBaseline = 'middle'
+
+  const getDotArray = (_fontFamily: string) => {
+    ctx.clearRect(0, 0, width, height)
+    ctx.font = `${size}px ${_fontFamily}, ${arial}`
+    ctx.fillText(a, width / 2, height / 2)
+    const imageData = ctx.getImageData(0, 0, width, height).data
+    return [].slice.call(imageData).filter(item => item !== 0)
+  }
+
+  return getDotArray(arial).join('') !== getDotArray(fontFamily).join('')
+}
+
+// 获取图片的原始宽高
+export const getImageSize = (imgUrl: string) => {
+  return new Promise((resolve, reject) => {
+    const img = document.createElement('img')
+    img.src = imgUrl
+    img.style.opacity = '0'
+    document.body.appendChild(img)
+
+    img.onload = () => {
+      const imgWidth = img.clientWidth
+      const imgHeight = img.clientHeight
+    
+      img.onload = null
+      img.onerror = null
+
+      document.body.removeChild(img)
+
+      resolve({ imgWidth, imgHeight })
+    }
+
+    img.onerror = () => {
+      img.onload = null
+      img.onerror = null
+
+      reject('图片加载失败')
+    }
+  })
+}
+
+// 复制文本到剪贴板
+export const copyText = (text: string) => {
+  return new Promise((resolve, reject) => {
+    const fakeElement = document.createElement('button')
+    const clipboard = new Clipboard(fakeElement, {
+      text: () => text,
+      action: () => 'copy',
+      container: document.body,
+    })
+    clipboard.on('success', e => {
+      clipboard.destroy()
+      resolve(e)
+    })
+    clipboard.on('error', e => {
+      clipboard.destroy()
+      reject(e)
+    })
+    document.body.appendChild(fakeElement)
+    fakeElement.click()
+    document.body.removeChild(fakeElement)
+  })
+}
+
+// 加密函数
+export const encrypt = (msg: string) => {
+  return CryptoJS.AES.encrypt(msg, CRYPTO_KEY).toString()
+}
+
+// 解密函数
+export const decrypt = (ciphertext: string) => {
+  const bytes  = CryptoJS.AES.decrypt(ciphertext, CRYPTO_KEY)
+  return bytes.toString(CryptoJS.enc.Utf8)
+}
+
+// 获取DOM节点样式
+export const getStyle = (el: HTMLElement, style: string) => {
+  if(!el) return null
+  return window.getComputedStyle(el, null).getPropertyValue(style)
+}
+
+// 检查元素是否处在可视区域内
+export const checkElementInViewport = (el: HTMLElement) => {
+  const rect = el.getBoundingClientRect()
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+  )
+}
--- a/src/views/About.vue
+++ b/src/views/About.vue
@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
--- a/src/views/Editor/Canvas/index.vue
+++ b/src/views/Editor/Canvas/index.vue
@ -0,0 +1,13 @@
+<template>
+  <div class="canvas">
+    
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'canvas',
+})
+</script>
--- a/src/views/Editor/CanvasTool/index.vue
+++ b/src/views/Editor/CanvasTool/index.vue
@ -0,0 +1,21 @@
+<template>
+  <div class="canvas-tool">
+    
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'canvas-tool',
+})
+</script>
+
+<style lang="scss" scoped>
+.canvas-tool {
+  height: 40px;
+  border-bottom: 1px solid #eee;
+  background-color: #fff;
+}
+</style>
--- a/src/views/Editor/EditorHeader/index.vue
+++ b/src/views/Editor/EditorHeader/index.vue
@ -0,0 +1,22 @@
+<template>
+  <div class="editor-header">
+    
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'editor-header',
+})
+</script>
+
+<style lang="scss" scoped>
+.editor-header {
+  background-color: #fff;
+  user-select: none;
+  overflow: hidden;
+  border-bottom: 1px solid #eee;
+}
+</style>
--- a/src/views/Editor/Thumbnails/index.vue
+++ b/src/views/Editor/Thumbnails/index.vue
@ -0,0 +1,22 @@
+<template>
+  <div class="thumbnails">
+    
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'thumbnails',
+})
+</script>
+
+<style lang="scss" scoped>
+.thumbnails {
+  border-right: solid 1px #eee;
+  background-color: #fff;
+  overflow: auto;
+  padding: 5px 0;
+}
+</style>
--- a/src/views/Editor/Toolbar/index.vue
+++ b/src/views/Editor/Toolbar/index.vue
@ -0,0 +1,22 @@
+<template>
+  <div class="toolbar">
+    
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'toolbar',
+})
+</script>
+
+<style lang="scss" scoped>
+.toolbar {
+  border-left: solid 1px #eee;
+  background-color: #fff;
+  overflow: auto;
+  padding: 5px 0;
+}
+</style>
--- a/src/views/Editor/index.vue
+++ b/src/views/Editor/index.vue
@ -0,0 +1,60 @@
+<template>
+  <div class="editor">
+    <EditorHeader class="layout-header" />
+    <div class="layout-content">
+      <Thumbnails class="layout-content-left" />
+      <div class="layout-content-body">
+        <CanvasTool />
+        <Canvas />
+      </div>
+      <Toolbar class="layout-content-right" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import EditorHeader from './EditorHeader/index.vue'
+import Canvas from './Canvas/index.vue'
+import CanvasTool from './CanvasTool/index.vue'
+import Thumbnails from './Thumbnails/index.vue'
+import Toolbar from './Toolbar/index.vue'
+
+export default defineComponent({
+  name: 'editor',
+  components: {
+    EditorHeader,
+    Canvas,
+    CanvasTool,
+    Thumbnails,
+    Toolbar,
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.editor {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.layout-header {
+  height: 40px;
+}
+.layout-content {
+  flex: 1;
+  display: flex;
+}
+.layout-content-left {
+  width: 180px;
+  height: 100%;
+}
+.layout-content-body {
+  flex: 1;
+}
+.layout-content-right {
+  width: 260px;
+  height: 100%;
+}
+</style>
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
-
-export default defineComponent({
-  name: 'Home',
-  components: {
-    HelloWorld,
-  },
-});
-</script>
--- a/src/views/Player/index.vue
+++ b/src/views/Player/index.vue
@ -0,0 +1,13 @@
+<template>
+  <div class="player">
+    player
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'player',
+})
+</script>
--- a/tests/unit/example.spec.ts
+++ b/tests/unit/example.spec.ts
@ -1,12 +0,0 @@
-import { shallowMount } from '@vue/test-utils'
-import HelloWorld from '@/components/HelloWorld.vue'
-
-describe('HelloWorld.vue', () => {
-  it('renders props.msg when passed', () => {
-    const msg = 'new message'
-    const wrapper = shallowMount(HelloWorld, {
-      props: { msg }
-    })
-    expect(wrapper.text()).toMatch(msg)
-  })
-})
--- a/tsconfig.json
+++ b/tsconfig.json
@ -9,6 +9,7 @@
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
+    "suppressImplicitAnyIndexErrors":true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
--- a/vue.config.js
+++ b/vue.config.js
@ -0,0 +1,40 @@
+const StyleLintPlugin = require('stylelint-webpack-plugin')
+
+module.exports = {
+  css: {
+    loaderOptions: {
+      sass: {
+        prependData: `
+          @import "~@/assets/styles/variable.scss";
+          @import "~@/assets/styles/mixin.scss";
+        `,
+      },
+      less: {
+        lessOptions: {
+          modifyVars: {
+            'primary-color': '#41464b',
+            'link-color': '#41464b',
+          },
+          javascriptEnabled: true,
+        },
+      },
+    },
+  },
+  chainWebpack: config => {
+    config.module
+      .rule('images')
+      .use('url-loader')
+      .loader('url-loader')
+      .tap(options => Object.assign(options, { limit: 10240 }))
+  },
+  configureWebpack: {
+    plugins: [
+      new StyleLintPlugin({
+        files: ['src/**/*.{vue,html,css,scss,sass,less}'],
+        failOnError: false,
+        cache: false,
+        fix: false,
+      })
+    ],
+  },
+}