diff --git a/.eslintrc.js b/.eslintrc.js
index f420f92..eae059a 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,15 +1,15 @@
 module.exports = {
   root: true,
   env: {
-    node: true
+    node: true,
   },
-  'extends': [
+  extends: [
     'plugin:vue/vue3-essential',
     'eslint:recommended',
-    '@vue/typescript/recommended'
+    '@vue/typescript/recommended',
   ],
   parserOptions: {
-    ecmaVersion: 2020
+    ecmaVersion: 2020,
   },
   rules: {
     'curly': ['error', 'multi-line'], // if、while等仅允许在单行中省略大括号
@@ -71,8 +71,8 @@ module.exports = {
         '**/tests/unit/**/*.spec.{j,t}s?(x)'
       ],
       env: {
-        jest: true
-      }
-    }
-  ]
+        jest: true,
+      },
+    },
+  ],
 }
diff --git a/.stylelintrc.js b/.stylelintrc.js
index 65683dd..7057761 100644
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@@ -29,5 +29,5 @@ module.exports = {
     'declaration-block-semicolon-newline-after': 'always',
     'declaration-block-trailing-semicolon': 'always',
     'selector-pseudo-element-colon-notation': 'double',
-  }
+  },
 }
\ No newline at end of file
diff --git a/babel.config.js b/babel.config.js
index 3f52db0..9cd657f 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   presets: [
-    '@vue/cli-plugin-babel/preset'
+    '@vue/cli-plugin-babel/preset',
   ],
   plugins: [
     [
@@ -9,7 +9,7 @@ module.exports = {
         libraryName: 'ant-design-vue',
         libraryDirectory: 'es',
         style: true,
-      }
-    ]
-  ]
+      },
+    ],
+  ],
 }
diff --git a/jest.config.js b/jest.config.js
index d7f13cc..02f8b69 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
   transform: {
-    '^.+\\.vue$': 'vue-jest'
-  }
+    '^.+\\.vue$': 'vue-jest',
+  },
 }
diff --git a/package-lock.json b/package-lock.json
index c7b87aa..768bc25 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2252,6 +2252,122 @@
         "tslint": "^5.20.1",
         "webpack": "^4.0.0",
         "yorkie": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1606792369066&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz",
+          "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-4.1.0.tgz?cache=0&sync_timestamp=1591687000046&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fchalk%2Fdownload%2Fchalk-4.1.0.tgz",
+          "integrity": "sha1-ThSHCmGNni7dl92DRf2dncMVZGo=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz?cache=0&sync_timestamp=1566248870121&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcolor-convert%2Fdownload%2Fcolor-convert-2.0.1.tgz",
+          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
+          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
+          "dev": true,
+          "optional": true
+        },
+        "fork-ts-checker-webpack-plugin-v5": {
+          "version": "npm:fork-ts-checker-webpack-plugin@5.2.1",
+          "resolved": "https://registry.npm.taobao.org/fork-ts-checker-webpack-plugin/download/fork-ts-checker-webpack-plugin-5.2.1.tgz?cache=0&sync_timestamp=1607084938170&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffork-ts-checker-webpack-plugin%2Fdownload%2Ffork-ts-checker-webpack-plugin-5.2.1.tgz",
+          "integrity": "sha1-eTJthpeXkG+osk4qvPlCH8gFRQ0=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "@babel/code-frame": "^7.8.3",
+            "@types/json-schema": "^7.0.5",
+            "chalk": "^4.1.0",
+            "cosmiconfig": "^6.0.0",
+            "deepmerge": "^4.2.2",
+            "fs-extra": "^9.0.0",
+            "memfs": "^3.1.2",
+            "minimatch": "^3.0.4",
+            "schema-utils": "2.7.0",
+            "semver": "^7.3.2",
+            "tapable": "^1.0.0"
+          }
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz",
+          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
+          "dev": true,
+          "optional": true
+        },
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npm.taobao.org/lru-cache/download/lru-cache-6.0.0.tgz?cache=0&sync_timestamp=1594427484405&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flru-cache%2Fdownload%2Flru-cache-6.0.0.tgz",
+          "integrity": "sha1-bW/mVw69lqr5D8rR2vo7JWbbOpQ=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "schema-utils": {
+          "version": "2.7.0",
+          "resolved": "https://registry.npm.taobao.org/schema-utils/download/schema-utils-2.7.0.tgz",
+          "integrity": "sha1-FxUfdtjq5n+793lgwzxnatn078c=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "@types/json-schema": "^7.0.4",
+            "ajv": "^6.12.2",
+            "ajv-keywords": "^3.4.1"
+          }
+        },
+        "semver": {
+          "version": "7.3.4",
+          "resolved": "https://registry.npm.taobao.org/semver/download/semver-7.3.4.tgz?cache=0&sync_timestamp=1606852064928&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsemver%2Fdownload%2Fsemver-7.3.4.tgz",
+          "integrity": "sha1-J6qn0uTKdkUvmNOt0JOnLJQ+3Jc=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1606205010380&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
+          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npm.taobao.org/yallist/download/yallist-4.0.0.tgz",
+          "integrity": "sha1-m7knkNnA7/7GO+c1GeEaNQGaOnI=",
+          "dev": true,
+          "optional": true
+        }
       }
     },
     "@vue/cli-plugin-unit-jest": {
@@ -2415,6 +2531,17 @@
             "unique-filename": "^1.1.1"
           }
         },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-4.1.0.tgz?cache=0&sync_timestamp=1591687000046&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fchalk%2Fdownload%2Fchalk-4.1.0.tgz",
+          "integrity": "sha1-ThSHCmGNni7dl92DRf2dncMVZGo=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
         "cliui": {
           "version": "6.0.0",
           "resolved": "https://registry.npm.taobao.org/cliui/download/cliui-6.0.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcliui%2Fdownload%2Fcliui-6.0.0.tgz",
@@ -2477,6 +2604,18 @@
             "graceful-fs": "^4.1.6"
           }
         },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
+          "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
@@ -2525,6 +2664,18 @@
           "integrity": "sha1-tkb2m+OULavOzJ1mOcgNwQXvqmY=",
           "dev": true
         },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.1.1",
+          "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-16.1.1.tgz?cache=0&sync_timestamp=1607093677581&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-16.1.1.tgz",
+          "integrity": "sha1-9bKG1grGiGaExjoXoYQ5HMngGZo=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          }
+        },
         "wrap-ansi": {
           "version": "6.2.0",
           "resolved": "https://registry.npm.taobao.org/wrap-ansi/download/wrap-ansi-6.2.0.tgz",
@@ -7311,122 +7462,6 @@
         "worker-rpc": "^0.1.0"
       }
     },
-    "fork-ts-checker-webpack-plugin-v5": {
-      "version": "npm:fork-ts-checker-webpack-plugin@5.2.1",
-      "resolved": "https://registry.npm.taobao.org/fork-ts-checker-webpack-plugin/download/fork-ts-checker-webpack-plugin-5.2.1.tgz?cache=0&sync_timestamp=1607084938170&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffork-ts-checker-webpack-plugin%2Fdownload%2Ffork-ts-checker-webpack-plugin-5.2.1.tgz",
-      "integrity": "sha1-eTJthpeXkG+osk4qvPlCH8gFRQ0=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "@babel/code-frame": "^7.8.3",
-        "@types/json-schema": "^7.0.5",
-        "chalk": "^4.1.0",
-        "cosmiconfig": "^6.0.0",
-        "deepmerge": "^4.2.2",
-        "fs-extra": "^9.0.0",
-        "memfs": "^3.1.2",
-        "minimatch": "^3.0.4",
-        "schema-utils": "2.7.0",
-        "semver": "^7.3.2",
-        "tapable": "^1.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1606792302448&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz",
-          "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-4.1.0.tgz",
-          "integrity": "sha1-ThSHCmGNni7dl92DRf2dncMVZGo=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
-          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
-          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz?cache=0&sync_timestamp=1596294337050&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhas-flag%2Fdownload%2Fhas-flag-4.0.0.tgz",
-          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
-          "dev": true,
-          "optional": true
-        },
-        "lru-cache": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npm.taobao.org/lru-cache/download/lru-cache-6.0.0.tgz",
-          "integrity": "sha1-bW/mVw69lqr5D8rR2vo7JWbbOpQ=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "yallist": "^4.0.0"
-          }
-        },
-        "schema-utils": {
-          "version": "2.7.0",
-          "resolved": "https://registry.npm.taobao.org/schema-utils/download/schema-utils-2.7.0.tgz",
-          "integrity": "sha1-FxUfdtjq5n+793lgwzxnatn078c=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "@types/json-schema": "^7.0.4",
-            "ajv": "^6.12.2",
-            "ajv-keywords": "^3.4.1"
-          }
-        },
-        "semver": {
-          "version": "7.3.4",
-          "resolved": "https://registry.npm.taobao.org/semver/download/semver-7.3.4.tgz?cache=0&sync_timestamp=1606852122426&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsemver%2Fdownload%2Fsemver-7.3.4.tgz",
-          "integrity": "sha1-J6qn0uTKdkUvmNOt0JOnLJQ+3Jc=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "lru-cache": "^6.0.0"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1606205010380&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
-          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
-        "yallist": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npm.taobao.org/yallist/download/yallist-4.0.0.tgz",
-          "integrity": "sha1-m7knkNnA7/7GO+c1GeEaNQGaOnI=",
-          "dev": true,
-          "optional": true
-        }
-      }
-    },
     "form-data": {
       "version": "2.3.3",
       "resolved": "https://registry.npm.taobao.org/form-data/download/form-data-2.3.3.tgz",
@@ -15862,87 +15897,6 @@
         }
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.1.1",
-      "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-16.1.1.tgz?cache=0&sync_timestamp=1607093677581&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-16.1.1.tgz",
-      "integrity": "sha1-9bKG1grGiGaExjoXoYQ5HMngGZo=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1606792302448&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz",
-          "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-4.1.0.tgz",
-          "integrity": "sha1-ThSHCmGNni7dl92DRf2dncMVZGo=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
-          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
-          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz?cache=0&sync_timestamp=1596294337050&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhas-flag%2Fdownload%2Fhas-flag-4.0.0.tgz",
-          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
-          "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1606205010380&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
-          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "vue-router": {
       "version": "4.0.1",
       "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-4.0.1.tgz?cache=0&sync_timestamp=1607347245114&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-4.0.1.tgz",
diff --git a/src/configs/canvas.ts b/src/configs/canvas.ts
index 2fd3a2a..0412e79 100644
--- a/src/configs/canvas.ts
+++ b/src/configs/canvas.ts
@@ -1 +1,2 @@
-export const VIEWPORT_SIZE = 1000
\ No newline at end of file
+export const VIEWPORT_SIZE = 1000
+export const VIEWPORT_ASPECT_RATIO = 0.5625
\ No newline at end of file
diff --git a/src/store/constants.ts b/src/store/constants.ts
new file mode 100644
index 0000000..6a908dc
--- /dev/null
+++ b/src/store/constants.ts
@@ -0,0 +1,10 @@
+export enum MutationTypes {
+  SET_ACTIVE_ELEMENT_ID_LIST = 'setActiveElementIdList',
+  SET_HANDLE_ELEMENT_ID = 'setHandleElementId',
+  SET_EDITOR_AREA_SHOW_SCALE = 'setEditorAreaShowScale',
+  SET_CANVAS_SCALE = 'setCanvasScale',
+  TOGGLE_SHOW_GRID_LINES = 'toggleShowGridLines',
+  SET_THUMBNAILS_FOCUS = 'setThumbnailsFocus',
+  SET_EDITORAREA_FOCUS = 'setEditorAreaFocus',
+  SET_AVAILABLE_FONTS = 'setAvailableFonts',
+}
\ No newline at end of file
diff --git a/src/store/editor.ts b/src/store/editor.ts
deleted file mode 100644
index 72cbc8e..0000000
--- a/src/store/editor.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-const state = {
-
-}
-
-const getters = {
-
-}
-
-const mutations = {
-
-}
-
-const actions = {
-
-}
-
-export default {
-  namespaced: true,
-  state,
-  getters,
-  mutations,
-  actions,
-}
diff --git a/src/store/getters.ts b/src/store/getters.ts
new file mode 100644
index 0000000..4fe032b
--- /dev/null
+++ b/src/store/getters.ts
@@ -0,0 +1,20 @@
+import { PPTElement } from '@/types/slides'
+import { State } from './state'
+
+export type Getters = {
+  activeElementList(state: State): PPTElement[];
+  handleElement(state: State): PPTElement | null;
+}
+
+export const getters: Getters = {
+  activeElementList(state) {
+    const currentSlide = state.slides[state.slideIndex]
+    if(!currentSlide || !currentSlide.elements) return []
+    return currentSlide.elements.filter(element => state.activeElementIdList.includes(element.elId))
+  },
+  handleElement(state) {
+    const currentSlide = state.slides[state.slideIndex]
+    if(!currentSlide || !currentSlide.elements) return null
+    return currentSlide.elements.find(element => state.handleElementId === element.elId) || null
+  },
+}
\ No newline at end of file
diff --git a/src/store/index.ts b/src/store/index.ts
index 948e09c..73e6966 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,31 +1,10 @@
 import { createStore } from 'vuex'
-
-import slides from './slides'
-import editor from './editor'
-
-const state = {
-
-}
-
-const getters = {
-
-}
-
-const mutations = {
-
-}
-
-const actions = {
-
-}
+import { state } from './state'
+import { mutations } from './mutations'
+import { getters } from './getters'
 
 export default createStore({
-  modules: {
-    slides,
-    editor,
-  },
   state,
   getters,
   mutations,
-  actions,
 })
diff --git a/src/store/mutations.ts b/src/store/mutations.ts
new file mode 100644
index 0000000..65c8679
--- /dev/null
+++ b/src/store/mutations.ts
@@ -0,0 +1,20 @@
+import { MutationTypes } from './constants'
+import { State } from './state'
+
+export type Mutations = {
+  [MutationTypes.SET_ACTIVE_ELEMENT_ID_LIST](state: State, activeElementIdList: string[]): void;
+  [MutationTypes.SET_HANDLE_ELEMENT_ID](state: State, handleElementId: string): void;
+}
+
+export const mutations: Mutations = {
+  [MutationTypes.SET_ACTIVE_ELEMENT_ID_LIST](state, activeElementIdList) {
+    if(activeElementIdList.length === 1) state.handleElementId = activeElementIdList[0]
+    else state.handleElementId = ''
+    
+    state.activeElementIdList = activeElementIdList
+  },
+  
+  [MutationTypes.SET_HANDLE_ELEMENT_ID](state, handleElementId) {
+    state.handleElementId = handleElementId
+  },
+}
\ No newline at end of file
diff --git a/src/store/slides.ts b/src/store/slides.ts
deleted file mode 100644
index 8cce8d9..0000000
--- a/src/store/slides.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-const state = {
-  slides: [],
-  slideIndex: 0,
-}
-
-const getters = {
-  
-}
-
-const mutations = {
-
-}
-
-const actions = {
-
-}
-
-export default {
-  namespaced: true,
-  state,
-  getters,
-  mutations,
-  actions,
-}
diff --git a/src/store/state.ts b/src/store/state.ts
new file mode 100644
index 0000000..6f61cbc
--- /dev/null
+++ b/src/store/state.ts
@@ -0,0 +1,27 @@
+import { Slide } from '@/types/slides'
+
+export type State = {
+  activeElementIdList: string[];
+  handleElementId: string;
+  isShowGridLines: boolean;
+  editorAreaShowScale: number;
+  canvasScale: number;
+  thumbnailsFocus: boolean;
+  editorAreaFocus: boolean;
+  availableFonts: string[];
+  slides: Slide[],
+  slideIndex: number,
+}
+
+export const state: State = {
+  activeElementIdList: [],
+  handleElementId: '',
+  isShowGridLines: false,
+  editorAreaShowScale: 80,
+  canvasScale: 1,
+  thumbnailsFocus: false,
+  editorAreaFocus: false,
+  availableFonts: [],
+  slides: [],
+  slideIndex: 0,
+}
\ No newline at end of file
diff --git a/src/types/slides.ts b/src/types/slides.ts
index 0cd1650..1793cb0 100644
--- a/src/types/slides.ts
+++ b/src/types/slides.ts
@@ -1,65 +1,65 @@
-interface PPTElementBaseProps {
-  id: string;
+export interface PPTElementBaseProps {
+  elId: string;
   isLock: boolean;
   groupId: string;
   left: number;
   top: number;
 }
 
-interface PPTElementSizeProps {
+export interface PPTElementSizeProps {
   width: number;
   height: number;
 }
 
-interface PPTElementBorderProps {
-  borderStyle: string;
-  borderWidth: number;
-  borderColor: string;
+export 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;
+export interface PPTTextElement extends PPTElementBaseProps, PPTElementSizeProps, PPTElementBorderProps {
   textType: string;
   content: string;
+  rotate?: number;
+  fill?: string;
+  opactity?: number;
+  lineHeight?: number;
+  segmentSapcing?: number;
+  letterSpacing?: number;
+  shadow?: string;
+  padding?: number;
 }
 
-interface PPTImageElement extends PPTElementBaseProps, PPTElementSizeProps, PPTElementBorderProps {
-  rotate: number;
-  filter: string;
-  clip: string;
-  flip: string;
-  shadow: string;
+export interface PPTImageElement extends PPTElementBaseProps, PPTElementSizeProps, PPTElementBorderProps {
   lockRatio: boolean;
   imgUrl: string;
+  rotate?: number;
+  filter?: string;
+  clip?: string;
+  flip?: string;
+  shadow?: string;
 }
 
-interface PPTShapeElement extends PPTElementBaseProps, PPTElementSizeProps, PPTElementBorderProps {
-  rotate: number;
+export interface PPTShapeElement extends PPTElementBaseProps, PPTElementSizeProps, PPTElementBorderProps {
+  svgCode: string;
+  lockRatio: boolean;
   fill: string;
-  opactity: number;
-  shadow: string;
-  lockRatio: boolean;
-  svgCode: string;
-  text: string;
-  textAlign: string;
+  rotate?: number;
+  opactity?: number;
+  shadow?: string;
+  text?: string;
+  textAlign?: string;
 }
 
-interface PPTIconElement extends PPTElementBaseProps, PPTElementSizeProps {
-  rotate: number;
+export interface PPTIconElement extends PPTElementBaseProps, PPTElementSizeProps {
   color: string;
-  shadow: string;
   lockRatio: boolean;
   svgCode: string;
+  rotate?: number;
+  shadow?: string;
 }
 
-interface PPTLineElement extends PPTElementBaseProps {
+export interface PPTLineElement extends PPTElementBaseProps {
   start: number[];
   end: number[];
   width: number;
@@ -69,57 +69,57 @@ interface PPTLineElement extends PPTElementBaseProps {
   lineType: string;
 }
 
-interface BarChartSeries {
+export interface BarChartSeries {
   name: string;
   data: number[];
 }
-interface BarChartData {
+export interface BarChartData {
   axisData: string[];
   series: BarChartSeries[];
 }
-interface PieChartData {
+export interface PieChartData {
   name: string;
   value: number
 }
-interface PPTChartElement extends PPTElementBaseProps, PPTElementSizeProps, PPTElementBorderProps {
+export interface PPTChartElement extends PPTElementBaseProps, PPTElementSizeProps, PPTElementBorderProps {
   chartType: string;
   theme: string;
   data: PieChartData[] | BarChartData;
 }
 
-interface TableCell {
+export interface TableCell {
   colspan: number;
   rowspan: number;
   content: string;
   bgColor: string;
 }
-interface PPTTableElement extends PPTElementBaseProps, PPTElementSizeProps {
+export interface PPTTableElement extends PPTElementBaseProps, PPTElementSizeProps {
   borderTheme: string;
   theme: string;
   rowSizes: number[];
   colSizes: number[];
   data: TableCell[][];
 }
-interface PPTIframeElement extends PPTElementBaseProps, PPTElementSizeProps, PPTElementBorderProps {
+export interface PPTIframeElement extends PPTElementBaseProps, PPTElementSizeProps, PPTElementBorderProps {
   src: string;
 }
 
-type PPTElement = PPTTextElement | 
-                  PPTImageElement | 
-                  PPTShapeElement | 
-                  PPTIconElement | 
-                  PPTLineElement | 
-                  PPTChartElement |
-                  PPTTableElement |
-                  PPTIframeElement
+export type PPTElement = PPTTextElement | 
+                         PPTImageElement | 
+                         PPTShapeElement | 
+                         PPTIconElement | 
+                         PPTLineElement | 
+                         PPTChartElement |
+                         PPTTableElement |
+                         PPTIframeElement
 
-interface PPTAnimation {
+export interface PPTAnimation {
   elId: string;
   type: string;
   duration: number;
 }
 
-interface Slide {
+export interface Slide {
   id: string;
   elements: PPTElement[];
   animations: PPTAnimation[];
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 07c021a..4c42565 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -11,7 +11,7 @@ export const createRandomNumber = (min: number, max: number) => {
 
 // 生成随机码
 export const createRandomCode = (len: number = 6) => {
-  const charset = `0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz`
+  const charset = `_0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz`
   const maxLen = charset.length
   let ret = ''
   for(let i = 0; i < len; i++) {
diff --git a/vue.config.js b/vue.config.js
index c16b45e..c9c404d 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -34,7 +34,7 @@ module.exports = {
         failOnError: false,
         cache: false,
         fix: false,
-      })
+      }),
     ],
   },
 }
\ No newline at end of file